/********** FONTS **********/

@import url('https://fonts.googleapis.com/css?family=Comfortaa:300,400,700');


/********** Général **********/

:selection {background:#4076EF; }
#content.content-quizz { margin: 90px 0 0 0; }
.quizz_question .left_col { float:left; display:flex; width:50%; border:solid 1px #fff; background:#F0F0F2; padding:1.5em; }
.quizz_question .right_col { float:right; display:flex; position:relative; width:50%; border:solid 1px #fff; background:#F0F0F2; padding:1.5em; }
.quizz_nom { display: none; }
.quizz_content { }
.quizz_question { display: flex; flex-direction: row; flex-wrap: wrap;}


/********** Entête **********/

.page-header-quizz { position:fixed; top:0; z-index:11; width:100%; background:#F0F0F2; padding:15px; }
.page-header-quizz h1 { font: 400 30px/30px 'Comfortaa', cursive; color:#25282a!important; margin:0; }
a.quizz_exit { position: fixed; z-index:12; top:0; right:0; width:60px; height:60px; background:#EFB940 url("img/picto-fermer.png") center center; background-size:50px; }
a.quizz_exit:hover { background:#D1A238 url("img/picto-fermer.png") center center; background-size:50px; text-decoration: none; }


/********** Barre de progression **********/

ul.progressbar.themes { position:relative; display:flex; list-style: none; padding:15px 0; margin:0 0 30px 0; }
ul.progressbar.themes::after { position:absolute; bottom:15px; left:0; content:" "; width:calc(100% - 44px); height:4px; background:#abb2ba; }
ul.progressbar.themes li { position:relative; font:700 12px/14px 'Comfortaa', cursive; color:#abb2ba; padding: 0 0 20px 0; }
ul.progressbar.themes li:before { position:absolute; bottom:-10px; z-index:2; content:" "; width:24px; height:24px; border-radius:12px; background:#abb2ba; }
ul.progressbar.themes li.current { color:#4076EF; }
ul.progressbar.themes li.current:before { background: #4076EF; }

ul.progressbar.themes li.section_fin:before { left:-1px; bottom:-4px; content:" "; width:44px; height:44px; background:url(img/drapeau.png) no-repeat center 0; background-size:44px; }
ul.progressbar.themes li.section_fin.current:before { background:url(img/drapeau.png) no-repeat center -44px; background-size:44px; border-radius:0; }
.section_progress { position: absolute; z-index: 1; bottom: 0; height:4px; background: #4076EF; border-right:solid 2px #fff; }

ul.progressbar.themes li.finished { color:#30CC85; }
ul.progressbar.themes li.finished:before { font: normal 22px/26px 'dashicons'; content:"\f147"; color:#fff; background:#30CC85; }
ul.progressbar.themes li.finished .section_progress { background:#30CC85; border:none; }


/********** Modal **********/

.quizz_question_time_overlay{ position:fixed; left:0; top:0; z-index:13; width: 100%; height:100vh; background-color: #F0F0F2; }
.quizz_question_time_content { font:700 24px/30px 'Comfortaa', cursive; text-align: center; margin:2em; }
.quizz_question_time_accept {text-align: center; }


/********** Titre du thème **********/

.quizz-theme { display:none; }
.quizz_section_form {text-align: center; }
.quizz_section_titre { font:400 36px/48px 'Comfortaa', cursive;  letter-spacing:-0.02em; margin:1em 0 2em; }


/********** Timer **********/

.quizz_question_timer { width:100%; height:90px; text-align: center; margin:0 0 0.5em 0; }
.timer { position: relative; }
.timer:before { position:absolute; left: calc(50% - 91px); width:90px; height:90px; content:""; background:#EFB940; }
.timer:after { content:""; position:absolute; left:calc(50% - 91px); width:90px; height:90px; background: url("img/picto-chrono.png") no-repeat center center; background-size:70px; }
.timer .count { position: absolute; left:calc(50% + 1px); width:90px; font:700 50px/90px 'Comfortaa', cursive; color: #fff; margin:0; background:#EFB940; }
svg { display:none; }


/********** Questions / Colonne de gauche **********/

.quizz_question_visuel_bloc {margin:auto; }

.quizz_question_intitule { padding:0 0 1em 0; }
.quizz_question_complement { margin:1.4em 0 0; }

.quizz_question_intitule p, .quizz_question_complement p { font:700 18px/24px 'Comfortaa', cursive; text-align:justify; }
.quizz_question_intitule p em, .quizz_question_complement p em { color:#25282a; }
.quizz_question_intitule blockquote, .quizz_question_complement blockquote { position:relative; border:none; margin:15px 0; padding:0; quotes: "\201C""\201D""\2018""\2019"; }
.quizz_question_complement blockquote { margin:0; }
.quizz_question_intitule blockquote p, .quizz_question_complement blockquote p  { font:700 16px/24px 'Comfortaa', cursive; font-style: italic; }
.quizz_question_intitule blockquote p:before { content: open-quote; font-size:36px; line-height: 0.1em; vertical-align: -0.4em; color: #89abe1; margin-right:8px;  }
.quizz_question_intitule blockquote p:after { content: close-quote; font-size:36px; vertical-align: -0.4em; color: #89abe1;  }
.quizz_question_complement blockquote p:before { content: open-quote; font-size:36px; line-height: 0.1em; vertical-align: -0.4em; margin-right:8px; color:#666;  }
.quizz_question_complement blockquote p:after { content: close-quote; font-size:36px; vertical-align: -0.4em; color:#666; }
/* indices */
.quizz_question_indice {}
[data-tooltip] { position: relative; z-index: 2; cursor: pointer; }
[data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; }
[data-tooltip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; }
[data-tooltip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; }
[data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

.quizz_question_visuel { background:#e8e9eb;  }
.quizz_question_visuel iframe { display: block; height:300px; width: 100%; }
.quizz_question_visuel img { width: 100%; }


/********** Cache réponses / Colonne de droite **********/

.quizz_reponses_form {width:100%;  margin:auto 0; }
.quizz_activation_reponses_overlay{ display:flex; position:absolute; left:0; top:0;  z-index: 10; width: 100%; height:100%; background-color: #F0F0F2; }
.quizz_activation_reponses_accept { margin:auto; }


/********** Réponses / Colonne de droite **********/

ul.quizz_reponses { width:100%; list-style: none; margin:0 0 3em 0; padding:0; }


/********** Blocs **********/

ul.quizz_reponses li.bloc { position:relative; padding:0; margin:15px 0; }
ul.quizz_reponses li.bloc input[type="radio"] { display: none; }
ul.quizz_reponses li.bloc input[type="radio"] + label { display:block; min-height:40px; font-weight:normal; padding:.8rem; margin:0; border:solid 2px #D1D3D7; cursor:pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
ul.quizz_reponses li.bloc input[type="radio"]:hover + label { border-color: #4076EF; background:#fff;  }
ul.quizz_reponses li.bloc.selected input[type="radio"]:checked + label { color: #fff; border-color: #4076EF; background: #4076EF; }


/********** Cases à cocher **********/

ul.quizz_reponses li.checkbox { position:relative; padding:0; margin:15px 0; }
ul.quizz_reponses li.checkbox input[type="radio"] { display: none; }
ul.quizz_reponses li.checkbox input[type="checkbox"] + label { display:block; min-height:48px; padding:0 0 0 30px; }
ul.quizz_reponses li.checkbox input[type="checkbox"] + label:before { position:absolute; left:0; top:0; width:18px; height:18px; content: " "; border:2px solid #D1D3D7; line-height:18px; background: #fff; box-sizing: content-box; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
ul.quizz_reponses li.checkbox input[type="checkbox"]:hover + label:before { border-color: #4076EF; }
ul.quizz_reponses li.checkbox input[type="checkbox"]:checked + label:before { font: normal 18px/18px 'dashicons'; content: "\f147"; color: #fff; border-color: #4076EF; background: #4076EF; }

/********** Boutons radio **********/

ul.quizz_reponses li.radio { position:relative; padding:0; margin:15px 0; }
ul.quizz_reponses li.radio input[type="radio"] { display: none; }
ul.quizz_reponses li.radio input[type="radio"] + label { display:block; min-height:48px; padding:0 0 0 30px; }
ul.quizz_reponses li.radio input[type="radio"] + label:before { position:absolute; left:0; top:0; width:20px; height:20px; content: " "; border:2px solid #D1D3D7; line-height:21px; background: #fff; box-sizing: content-box; border-radius:20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
ul.quizz_reponses li.radio input[type="radio"]:hover + label:before { border-color: #4076EF; }
ul.quizz_reponses li.radio input[type="radio"]:checked + label:before { font: normal 18px/21px 'dashicons'; content: "\f147"; color: #fff; border-color: #4076EF; background: #4076EF; }



button.button.quizz_reponses_submit { position:absolute; right:0; bottom:0; }


/********** Quizz fin **********/

.quizz_fin { font:700 30px/36px 'Comfortaa', cursive; margin:0 0 35px 0;}
.quizz_fin p { margin:0;}
button.button.quizz_fin_submit { margin:35px 0 0 0; }


/********** Bouton rouge **********/

button.button, button.btn { font:700 18px/24px 'Comfortaa', cursive; color: #fff; text-transform:inherit; background:#4076EF; border:none; padding:10px 15px; outline: none; border-radius:0; -webkit-transition: all .3s ease; transition: all .3s ease; }
button.button:hover, button.btn:hover { background: #3059B3; border:none; -webkit-transition: all .3s ease; transition: all .3s ease; }
button.button.quizz_reponses_submit::after { float:right; font:normal 18px/24px 'dashicons'; content: "\f344"; margin:0 0 0 5px; } 

/********** Bouton de téléchargement du certificat **********/

.download_certificat a { font:700 18px/40px 'Comfortaa', cursive; color: #fff; background: #3AD64D; border: none; padding: 0 15px; outline: none; -webkit-transition: all .3s ease; transition: all .3s ease; }


/********** Quizz / Restrictions **********/

.quizz_restrictions { text-align: center; font-size:20px;  }


/* VERSION RESPONSIVE
================================================== */

@media (max-width: 768px) {
	
/* Général */

}

@media (max-width:414px) {

/* Général */
body { font: 400 15px/21px 'Montserrat', sans-serif !important; }
.quizz_content {border:solid 2px #4076EF; margin:0 0 15px 0; }
#content.content-quizz { margin: 50px 0 0 0; }
	
/* Header */
.page-header-quizz { padding:0; }
.page-header-quizz h1 { font:600 18px/50px 'Comfortaa', cursive; }
a.quizz_exit { width: 55px; height: 50px; }

/* Écran 1 */
button.quizz_section_submit { display:block; margin:0 auto 15px auto; }
.quizz_section_titre { font: 400 30px/48px 'Comfortaa', cursive; }
	
/* Barre de progression */
.progressbar_container { overflow: auto; white-space: nowrap; }
ul.progressbar.themes { width:1140px; margin:0 0 15px 0; }
	
/* Validation question de vitesse */
/*.quizz_question_time_content { font: 700 18px/24px 'Comfortaa', cursive; margin: 1.5em; }
.quizz_question_time_accept { position: absolute; bottom: 15px; width: 100%; }*/
	
/* Question - Colonne de gauche */
.quizz_question .left_col { float:none; position: relative; display:block; width:100%; border:none; border-bottom:dashed 2px #4076EF; }
.quizz_question .left_col::after { position:absolute; bottom:-30px; left:0; z-index:11;  width:100%; font:normal 60px/60px 'dashicons'; content:"\f347"; color:#D1D3D7; text-align:center;  }
.quizz_question_intitule, .quizz_question_complement { padding:0;  margin:0; }
.quizz_question_intitule p, .quizz_question_complement p { font: 700 16px/22px 'Comfortaa', cursive; text-align:left; margin:0; }
.quizz_question_visuel iframe { height:170px; margin:15px 0; background:#F0F0F2; background:red;  }

/* Timer */
.quizz_question_timer { position:fixed; top:calc(50% - 51px); right:0; z-index:1; width: 55px; height:102px; margin:0; }
.timer .count { left:0; top:52px; width: 55px; font: 700 30px/50px 'Comfortaa', cursive; }
.timer:before { left:0; width:55px; height:50px; }
.timer:after { left: 0; width: 55px; height: 50px; background-size: 50px; }

	
/* Réponses - Colonne de droite */
.quizz_question .right_col { float:none; display:block; width:100%; border: none; }
ul.quizz_reponses li.bloc, ul.quizz_reponses li.radio, ul.quizz_reponses li.checkbox { margin: 0 0 15px 0; }
ul.quizz_reponses li.bloc input[type="radio"] + label, ul.quizz_reponses li.radio input[type="radio"] + label, ul.quizz_reponses li.checkbox input[type="checkbox"] + label { color: #666; }
ul.quizz_reponses li.radio input[type="radio"] + label, ul.quizz_reponses li.checkbox input[type="checkbox"] + label { border-bottom: solid 2px #D1D3D7; }

button.button.quizz_reponses_submit { position: absolute; left:0; bottom:0; width: 100%; }
.quizz_activation_reponses_accept { margin: 30px auto; }

}

@media (max-width:320px) {

/* Question - Colonne de gauche */
.quizz_question_intitule p, .quizz_question_complement p { font: 700 15px/21px 'Comfortaa', cursive; }
.quizz_question_visuel iframe { height: 145px; }

}