/* CSS Document */

/* ==== FONTS ==== */
/*@import url('https://fonts.googleapis.com/css?family=Londrina+Solid:400,900|Raleway:300,600,600i,700,700i');*/
/*
font-family:'Londrina Solid', cursive;
font-family:'Raleway', sans-serif;
*/
/* FONT */ 

@font-face {
  font-family: NewsGothicWeb;
  src: url('Fonts/n015003tWeb.eot'),url('Fonts/n015003tWeb.woff') format('woff');
}

@font-face {
  font-family: NewsGothicWebBold;
  src: url('Fonts/n015004tWeb.eot'),url('Fonts/n015004tWeb.woff') format('woff');
}

@font-face {
    font-family: 'quizz icons';
    src: url('Fonts/quizz-icons.eot');
    src: url('Fonts/quizz-icons.eot?#iefix') format('embedded-opentype'),
         url('Fonts/quizz-icons.woff') format('woff'),
         url('Fonts/quizz-icons.ttf') format('truetype'),
         url('Fonts/quizz-icons.svg#quizz-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on February 19, 2018 */
@font-face {
    font-family: 'Raleway';
    src: url('Fonts/raleway-semibold-webfont.eot');
    src: url('Fonts/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('Fonts/raleway-semibold-webfont.woff') format('woff'),
         url('Fonts/raleway-semibold-webfont.ttf') format('truetype'),
         url('Fonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/raleway-semibolditalic-webfont.eot');
    src: url('Fonts/raleway-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/raleway-semibolditalic-webfont.woff2') format('woff2'),
         url('Fonts/raleway-semibolditalic-webfont.woff') format('woff'),
         url('Fonts/raleway-semibolditalic-webfont.ttf') format('truetype'),
         url('Fonts/raleway-semibolditalic-webfont.svg#ralewaysemibold_italic') format('svg');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/raleway-bold-webfont.eot');
    src: url('Fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('Fonts/raleway-bold-webfont.woff') format('woff'),
         url('Fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('Fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: 700;
    font-style: normal;

}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/raleway-bolditalic-webfont.eot');
    src: url('Fonts/raleway-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/raleway-bolditalic-webfont.woff2') format('woff2'),
         url('Fonts/raleway-bolditalic-webfont.woff') format('woff'),
         url('Fonts/raleway-bolditalic-webfont.ttf') format('truetype'),
         url('Fonts/raleway-bolditalic-webfont.svg#ralewaybold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/raleway-light-webfont.eot');
    src: url('Fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/raleway-light-webfont.woff2') format('woff2'),
         url('Fonts/raleway-light-webfont.woff') format('woff'),
         url('Fonts/raleway-light-webfont.ttf') format('truetype'),
         url('Fonts/raleway-light-webfont.svg#ralewaylight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Londrina Solid';
    src: url('Fonts/londrinasolid-regular-webfont.eot');
    src: url('Fonts/londrinasolid-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/londrinasolid-regular-webfont.woff2') format('woff2'),
         url('Fonts/londrinasolid-regular-webfont.woff') format('woff'),
         url('Fonts/londrinasolid-regular-webfont.ttf') format('truetype'),
         url('Fonts/londrinasolid-regular-webfont.svg#londrina_solidregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Londrina Solid';
    src: url('Fonts/londrinasolid-black-webfont.eot');
    src: url('Fonts/londrinasolid-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/londrinasolid-black-webfont.woff2') format('woff2'),
         url('Fonts/londrinasolid-black-webfont.woff') format('woff'),
         url('Fonts/londrinasolid-black-webfont.ttf') format('truetype'),
         url('Fonts/londrinasolid-black-webfont.svg#londrina_solidblack') format('svg');
    font-weight: 900;
    font-style: normal;
}

.quiz-content [class*='icon-']:before,
.play-content [class*='icon-']:before,
.overlay-quiz [class*='icon-']:before{font-family:'quizz icons'; font-style:normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}

.icon-level.niveau_1:before{content:'\0041';}
.icon-level.niveau_2:before{content:'\0042';}
.icon-level.niveau_3:before{content:'\0043';}
.icon-level.niveau_4:before{content:'\0044';}
.icon-pouce-big:before{content:'\0045';}
.icon-pouce:before{content:'\0046';}
.icon-fb:before{content:'\0047';}
.icon-tw:before{content:'\0048';}
.icon-close:before{content:'\004a';}


/* cke_editable */
.cke_editable {max-width:750px;}
.cke_editable .caption {margin:0;}

/* ======== ADMIN ===== */
#user-login-form,
.is-path-user .layout-3col__full{max-width: 610px;margin: 0 auto; padding-left:20px;padding-right:20px; float:none; padding-top:50px;}
.is-logged-in-user .header {position:relative;}
.is-logged-in-user .quiz-play {margin-bottom:250px;}
.is-logged-in-user .scroll-container {padding-bottom:250px;}
.is-logged-in-user .overlay-quiz {padding-top:10vH;}
.is-logged-in-user.is-page-node-type-quiz .tabs { position:absolute; left:5%; width:95%; top:-35px; z-index:1000;}
.is-path-user .layout-center {background:url(../images/ombrage-main.jpg) repeat-x center 50px;}

/* ==== GENERAUX ===== */
ul,
li {list-style:none;}
a {text-decoration:none;}
main .field--name-body a,
.overlay-txt a {text-decoration:underline; color:#000;}
main .quiz-content .field--name-body a { color:#fff;}

h1 {font-size:4.688em; margin-top:60px; margin-bottom:60px; line-height:normal;}
body.is-page-node-type-quiz{overflow:hidden;}
.header {position:fixed; top:0; left:0; right:0; background:#fff; z-index:1000; min-height:50px;}
.header p {padding:15px 80px 5px 2%;margin:0;font-family:NewsGothicWeb, sans-serif; font-size:1.188em; line-height:1;}
.header .rubquiz {font-family:NewsGothicWebBold, sans-serif;}
#block-quiz-branding {position:absolute; right:10px; top:0;}
#block-quiz-branding img {display:block;}
.layout-3col, 
.layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar {margin:0; width:100%; padding:0;}
.layout-center {margin:0; padding:0; width:100%; max-width:inherit}

.container,
.play-content .container,
.is-page-node-type-page .layout-3col {max-width:900px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px;}
/* headerCookies */
.headerCookies {position:fixed;background:rgba(51,51,51,0.9); z-index: 999999; line-height:14px; font-size: 11px; bottom:0; width:100%; color:#fff;font-family:Verdana;}
.headerCookiesContent {color:#fff; padding:9px 20px; margin:0 auto; position:relative; max-width:950px; overflow:hidden;}
.headerCookiesContent p { float:left; margin:5px 0;}
.headerCookies a {color:#99cccc;}
.headerCookies .button_cookie {background:#cc0000; color:#fff; float:right; margin-left:10px; padding:5px;}
/* FOOTER */
.footer {margin:0; padding:0; border:none; font-family:NewsGothicWeb, sans-serif; font-size:0.875rem;}
.footer_reseaux{min-height:41px; line-height:41px; background-color:#f3f2f1; position:fixed; bottom:0; left:0; width:100%; color:#828282; z-index:1000;}
.footer_reseaux a{color:#828282;}
.footer_reseaux a:hover, 
.footer_reseaux a:focus{color:black; text-decoration:none;}
.footer_reseaux ul li{float:left;}
.footer_reseaux .menu_n1{float:left; padding-right:20px;}
.footer_reseaux .info ul li{padding-left:20px}
.footer_reseaux .tools{float:right; padding:0 25px 0 15px; margin:0;}
.footer_reseaux .logo{float:left; font-family:NewsGothicWebBold, sans-serif; padding:0 0px 0 25px;}
.footer_reseaux .logo a{display:block; float:left; margin-right: 25px;}
.footer_reseaux .logo .res_home{background:url(../images/pictoHome.png) no-repeat left center; height:40px; width:26px; margin-right:15px;}
.footer_reseaux .logo span {display:none;}
.footer_reseaux .tools a{display:block; background:url(../images/footer-links-sprite.png) no-repeat -15px top; width:41px; height:41px; text-indent:-1000px; overflow:hidden;}
.footer_reseaux .tools .share_twitter a{background-position:-60px top}
.footer_reseaux .tools .share_youtube a{background-position:-100px top;width:70px}
.footer_reseaux .tools .share_tumblr a{background-position:-170px top;}
.footer_reseaux .tools .creative a{background-position:-210px top;width:105px;margin-left:35px}
.footer_reseaux .addthis {float:right;background:url(../images/picto_partager.png) no-repeat 0 center;cursor:pointer;padding:0 10px 0 0;margin:0 0 0 15px;}
.footer_reseaux .addthis .share {padding-left:25px;}
.footer_reseaux .addthis_sharing_toolbox {display:none;position:absolute;left:0;bottom:0;background-color:#f3f2f1;height:40px;padding:5px;z-index:2000}

/* 404 */
.is-page-node-type-page-404 .layout-3col,
.maintenance-page .layout-3col {background:#192b3f; color:#ffcc4c; height:100vH; text-align:center; line-height:100vH; }
.is-page-node-type-page-404 h1,
.maintenance-page h1 {margin-bottom:0; background:url(../images/404.png) no-repeat center 0; padding-top:180px; margin-top:0; font-family: 'Raleway', sans-serif; }
.is-page-node-type-page-404 main,
.maintenance-page main {display:inline-block; line-height:normal; vertical-align: middle; float:none; padding:20px;}
.maintenance-page .container, .maintenance-page.is-page-node-type-page .layout-3col {max-width: inherit;}

/*QUIZ CONTENT */
.is-page-node-type-quiz .layout--onecol {line-height:100vH;}
.is-page-node-type-quiz .layout--onecol .layout--onecol {line-height:normal;}
.field--name-field-image.full img {width:100%; height:100%; display:none; max-width:none; z-index:-1;}
.js .field--name-field-image.full {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; transition:top 3s, opacity 1s; opacity:0; }
.js .loaded .field--name-field-image.full {opacity:1;}
.js .field--name-field-image.full img {width:100%; height:100%; display:none; max-width:none;}
.quiz-content h1 {color:#fff;}
.quiz-play {height:155px; width:155px; line-height:155px; display:block; background:#fff; border-radius:50%; margin:100px auto; text-transform:uppercase; font-size:1.625em; font-family:'Londrina Solid', cursive; font-weight:900; cursor:pointer; animation: bounce 0.5s infinite alternate; -webkit-animation: bounce 0.5s infinite alternate;}
.quiz-play span {line-height:normal;width:110px; display:inline-block; vertical-align:middle;}
.field--name-field-copyright {background:rgba(0, 0, 0, 0.5);position:absolute; right:19px; bottom:42px; max-width: 60%; padding:2px 25px; color:#fff; font-size:0.875em;  line-height:normal; font-family:'Raleway', sans-serif; transition:z-index 2s, opacity 2s; opacity:1; z-index:1; }
.quizplay .field--name-field-copyright {opacity:0; z-index:-10; transition:z-index 2s, opacity 2s;}
.quiz-content .field--name-body {font-size:1.375em; color:#fff; line-height:1.6; }
.quiz-content .field--name-field-niveau {padding-top:120px;}
.field--name-field-niveau {color:#fff; font-size:0.938em; text-transform:uppercase; line-height:normal; font-family:'Londrina Solid', cursive; font-weight:400;}
.icon-level:before {display:block;margin-bottom:10px;line-height:30px; transition:1s font-size;}
.js .icon-level:before {font-size:0;}
.js .loaded .icon-level:before {font-size:8.5em;}
.quiz-background {background:rgba(0, 0, 0, 0.2); height:100vH; overflow:hidden; font-family: 'Raleway', sans-serif; font-weight:600; line-height:1.2; transition:background 2s;}
.quizplay .quiz-background {background:rgba(0, 0, 0, 0.5); }
.overlay-quiz {background:rgba(0, 0, 0, 0.2); width:100%; overflow:hidden; position:fixed; z-index:10001; display:none; top:0; bottom:0; text-align:center; padding:15vH 20px 10vH 20px;}

.overlay-quiz .overlay-content { width:100%; background:#fff; line-height:normal; display:inline-block; max-height:65vH; /*overflow-x:hidden;*/ border-radius:5px; cursor:pointer; position:relative; overflow:hidden; }
.overlay-shadow {box-shadow:0 -60px 60px -30px #000 inset; position:absolute; bottom:3px; left:0; right:0; height:90px; border-radius:5px;}
.overlay-quiz .overlay-container {max-width:580px; width:100%; margin-left:auto; margin-right:auto; position:relative;}
.overlay-container .icon-close {top:0; right:10px; position:absolute; z-index:1; }
.overlay-container .playbtn {}
.overlay-content h3 {font-size:2.5em; font-weight:600;margin:70px 0 60px 0;}
.overlay-quiz .icon-pouce-big:before {margin-right:15px;}
.overlay-txt {color:#192b3d; text-align:left; line-height:1.4; padding-bottom:20px }
.overlay-quiz .playbtn {position:absolute; bottom:-62px; left:50%; margin:0 0 0 -62px; height:125px; width:125px; line-height:110px; animation: bounce 0.5s infinite alternate; -webkit-animation: bounce 0.5s infinite alternate; border:solid #000 4px; }
.overlay-quiz .quiz-media,
.overlay-quiz .quiz-video {padding-bottom:20px;}
.overlay-quiz .quiz-media p {margin:0; font-size:0.75em; padding:0 10%;}


.quiz-content {width:100%; text-align:center; box-sizing:border-box; vertical-align:middle; display:inline-block; position:absolute; bottom:0; overflow-y:scroll; height:100vH; transition:height 2s, bottom 2s, opacity 1s; line-height:100vH;}

.quiz-content.finished { bottom:-100vH; transition:height 2s, bottom 2s, opacity 1s; opacity:0; height:0}
.quiz-content.quiz-next {bottom:100vH; transition:bottom 2s, opacity 1s; opacity:0; z-index:-1;}

.scroll-container {display:inline-block; width:100%; line-height:normal; vertical-align: middle; position:relative;}
.quiz-content .scroll-container {transition:top 3s;}
.play-content {width:100%; text-align:center; box-sizing:border-box; vertical-align:middle; display:inline-block; position:absolute; bottom:100vH; height:100vH; left:0; overflow-y:scroll; line-height:100vH; opacity:1; transition:height 2s, opacity 2s, z-index 1s;}
.play-content .scroll-container {padding:110px 0; }
.quiz-current .scroll-container {transition:top 3s;}
.quiz-all {bottom:-100vH; transition:bottom 1s; padding-left:20px; padding-right:20px;}
.quiz-result {padding-left:15px; padding-right:15px;}
.play-content.quiz-next {bottom:100vH; transition:bottom 2s, opacity 1s, z-index 1s; opacity:0; */*z-index:-1;*/}
.play-content.quiz-current {bottom:0; transition:bottom 2s, opacity 1s; opacity:1;}
.play-content.finished {bottom:-100vH; }

.play-content p,
.play-content ul {margin:0; padding:0;}
.play-content .reponses {display:flex; width:100%; max-width:1086px; margin-left:auto; margin-right:auto;}
.reponses li {width:33.33%; display:inline-flex;vertical-align:top; }

.quiz-video {position:relative; width:100%; padding-top:56.3%;}
.quiz-video iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
.question {font-weight:700; color:#fff; max-width:800px;margin:45px auto 100px auto; padding:0 20px;}
.question .quiz-media {margin-top:50px; position:relative; max-width:480px; margin:50px auto 0 auto;}
.question-video {max-width:480px; margin:50px auto 0 auto; background:#000;} 
.question-texte {font-size:2.875em;}

.reponse-content {margin:0 11px; background:#fff; border-radius:5px; width:100%; cursor:pointer;}
.reponse { padding:20px; min-height:95px; text-align:left; border-radius:5px;}
.reponses .quiz-media {border-radius:5px 5px 0 0;position:relative;}
.reponses .quiz-media img {border-radius:5px 5px 0 0; display:block;}
.pilote-zoom {position:absolute; right:10px; top:10px; width:35px;height:35px;z-index:100;cursor:pointer; border-radius:50%;}
.img-zoom img {max-height:80vH; }
.overlay-quiz.img-zoom {line-height:100vH; padding:0 }
.img-zoom div {line-height:normal; vertical-align:middle; display:inline-block; padding:20px;}
.icon-close {position:relative;}
.icon-close:before {top:15px; right:15px; position:absolute;color:#fff; cursor:pointer;}
.img-zoom .icon-close:before {background:#333; border-radius:50%; top:30px; right:30px; padding:9px; width:20px;}
.img-zoom .copyright {margin:10px 0; color:#fff; font-weight:300; text-align:left;}
.icon-loupe:before {content:'\0049'; position:absolute; top:8px; left:6px; font-size:1.2em; }


.timeline li {display:inline-block;height:28px;width:28px;border:1px solid #fff;border-radius:50%;background:#fff;margin:2px;position:relative;}
.timeline .icon-pouce-big:before {position:absolute;line-height:25px;width:26px;top:0;left:0;}
.quiz-buttons {width:100%; text-align:center;margin:60px 0;}
.quiz-buttons li {display:inline-block; margin:30px 13px;}
.quiz-buttons .playbtn {height:135px;width:135px;line-height:135px;}
.playbtn {border:1px solid #fff;display:block;background:#fff;border-radius:50%;font-family:'Londrina Solid', cursive;font-weight:400;cursor:pointer;font-size:1.625em;}
.playbtn span {line-height:0.85; width:110px;display:inline-block;vertical-align:middle;}
.reussite {font-weight:700;color:#fff;font-size:3.75em;margin:50px 0 10px 0;}
.bilan {font-weight:600;color:#fff;font-size:1.25em;}
.share {display:inline-block;}
.share li {cursor:pointer; font-size:2em; width:40px; height:40px; position:relative; display:inline-block; margin:0 3px;}
.share li:before,
.share li a:before{position:absolute; left:0; top:0}
.share li a {width:40px; height:40px; display:block;}
.share-content {margin-top:70px;}
.share-content p {font-size:1.625em; text-transform:uppercase; font-family:'Londrina Solid', cursive; font-weight:400; display:inline-block; vertical-align:top; margin-top:5px; margin-right:15px; line-height:1;}
.quiz-all h2 {font-size:2.250em;font-weight:300; margin:45px 20px 70px 20px; color:#fff;}
.all-item {text-align:left; max-width:1010px; margin:0 auto; padding:0 0 65px 0; color:#fff; clear:both; }
.all-titre {font-weight:700; font-size:1.625em; margin-bottom:30px; width:68%; padding-left:100px}
.all-titre p {display:inline;}
.all-left { float:left; padding-left:100px; position:relative;}
.all-right { float:right; width:26%; padding-top:10px;}
.nbr-all {font-weight:300;}
.bonne-reponse,
.all-reponse {font-size:1.125em; font-weight:700;}
.all-explicatif {font-size:0.875em; margin-top:15px; line-height:1.6; clear:left;}
.play-content .all-explicatif p {margin:5px 0;}
.all-container {position:relative; float:left; width:68%}
.matched {background:#fff; width:70px;height:70px;position:absolute; left:0; top:0; border:1px solid #fff; border-radius:50%; color:#000; font-weight:bold;font-size:0.938em; line-height:70px; text-align:center;}
.matched.icon-pouce-big {padding-top:10px; line-height:normal;}
.matched.icon-pouce-big:before {font-size:1.5em; display:block;}

.quiz-blocs p.container {font-weight:600; color:#fff; font-size:1.125em; max-width:600px;}
.titre-blocs {font-weight:700;font-size:2.813em;color:#fff;margin:60px 0 30px 0;}
.titre-blocs .container {display:block; position:relative; max-width:1000px;}
.titre-blocs .container:before {content:""; height:4px; width:30%; position:absolute; background:#fff; top:50%; left:5px; }
.titre-blocs .container:after {content:""; height:4px; width:30%; position:absolute; background:#fff; top:50%; right:5px;}
.quiz-blocs-bonus .titre-blocs .container:after,
.quiz-blocs-bonus .titre-blocs .container:before {width:40%;}
.quiz-blocs {padding-bottom:20px;}

/* BONUS */
.play-content .quiz-bonus {max-width:1098px; margin:0 auto; font-size:0.875em; padding-top:40px;}
.quiz-bonus li {display:inline-block;width:22%;margin:1.5%;vertical-align:top;}
.quiz-bonus div {color:#fff; line-height:1.5; text-align:left; margin:15px 0;}
.quiz-bonus img {border-radius:5px;}

/* AUTRES */
.play-content .quiz-autres {max-width:1085px; margin:0 auto; font-size:0.875em; padding-top:40px; display:flex;}
.quiz-autres li {display:inline-block; width:31.33%; margin:1%; vertical-align:top; border-radius:5px }
.quiz-autres div {color:#fff; line-height:1.5; padding:20px 20px 30px 20px; font-weight:900; font-size:1.125em;}
.quiz-autres .icon-level:before {margin-bottom:20px;}
.quiz-autres img {border-radius:5px 5px 0 0; display:block;}

/*JQUERY PLUGIN NANOSCROLLER*/
.nano-content {overflow-x: hidden; overflow-y:auto; padding:0 50px; height:100%;}
.nanocontent {padding-bottom:80px;}

.nano > .nano-content:focus {
  outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
  display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
}
.nano > .nano-pane {
  background : rgba(28,172,230,.25);
  position   : absolute;
  width      : 15px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01;
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
}
.nano > .nano-pane > .nano-slider {
  background: #1cace6;
  background: rgba(28,172,230,.50);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
	cursor:move;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed, .has-scrollbar > .nano-pane {
  visibility : visible\9;  /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}

/* colorset_1 jaune/turquoise */
/* timeline:#8f7d44; highlighted:#ffcc4c; btn-3:vert:89f2ee; typo:#192b3d*/
.colorset_1 .icon-level,
.colorset_1 .all-titre,
.colorset_1 .bonne-reponse,
.colorset_1 .share-content,
.colorset_1 .share-content a {color:#ffcc4c;} 
.colorset_1 .quiz-autres div,
.colorset_1 .quiz-autres .icon-level,
.colorset_1 .overlay-quiz .icon-close:before {color:#192b3d;}
.colorset_1 .quiz-background,
.colorset_1 .nano > .nano-pane {background:rgba(25, 43, 61, 0.2);}
.colorset_1.quizplay .quiz-background,
.colorset_1 .nano > .nano-pane > .nano-slider {background:rgba(25, 43, 61, 0.7);}
.colorset_1 .overlay-quiz {background:rgba(25, 43, 61, 0.9);}
.colorset_1 .quiz-play,
.colorset_1 .playbtn,
.colorset_1 .timeline .highlighted,
.colorset_1 .overlay-content,
.colorset_1 .matched,
.colorset_1 .scroll-line .highlighted {color:#192b3d;background:#ffcc4c;border-color:#ffcc4c;}
.colorset_1 .pilote-zoom,
.colorset_1 .img-zoom .icon-close:before{background:#192b3d;color:#ffcc4c;}
.colorset_1 .timeline li,
.colorset_1 .scroll-line li {background:#8f7d44;border-color:#8f7d44;}
.colorset_1 .reponses li div,
.colorset_1 .quiz-autres li,
.colorset_1 .btn-3,
.colorset_1 .titre-blocs .container:before,
.colorset_1 .titre-blocs .container:after {background:#89f2ee;border-color:#89f2ee;color:#192b3d;}
.colorset_1 .btn-2 {background:#f5517b;border-color:#f5517b;color:#fff;}
.colorset_1 .quiz-play:hover,
.colorset_1 .playbtn:hover {background:#faa936; border-color:#faa936;}
.colorset_1 .btn-2:hover,
.colorset_1 .hover .btn-2 {background:#e93157; border-color:#e93157;}
.colorset_1 .btn-3:hover,
.colorset_1 .hover .btn-3 {background:#57c2d6; border-color:#57c2d6;}
.colorset_1 .overlay-quiz .playbtn {border-color:#192b3d;}
.colorset_1 .pilote-zoom:hover,
.colorset_1 .share-content li:hover,
.colorset_1 .share-content a:hover,
.colorset_1 .img-zoom .icon-close:before:hover {color:#faa936;}
.colorset_1 .overlay-shadow {box-shadow:0 -65px 60px -30px #ffcc4c inset;}

/* colorset_2 turquoie/framboise*/
/* timeline:#588990; highlighted:#85f2ef; btn-3:vert->framboise:#ff6283; typo:#2b1f35 - rgba(43, 31, 53, 0.5)*/
.colorset_2 .icon-level,
.colorset_2 .all-titre,
.colorset_2 .bonne-reponse,
.colorset_2 .share-content,
.colorset_2 .share-content a {color:#85f2ef; } 
.colorset_2 .quiz-autres div,
.colorset_2 .quiz-autres .icon-level,
.colorset_2 .overlay-quiz .icon-close:before{color:#2b1f35;}
.colorset_2 .quiz-background,
.colorset_2 .nano > .nano-pane {background:rgba(43, 31, 53, 0.2);}
.colorset_2.quizplay .quiz-background {background:rgba(43, 31, 53, 0.7);}
.colorset_2 .overlay-quiz,
.colorset_2 .nano > .nano-pane > .nano-slider {background:rgba(43, 31, 53, 0.9);}
.colorset_2 .quiz-play,
.colorset_2 .playbtn,
.colorset_2 .timeline .highlighted,
.colorset_2 .overlay-content,
.colorset_2 .matched,
.colorset_2 .scroll-line .highlighted {color:#2b1f35;background:#85f2ef;border-color:#85f2ef;}
.colorset_2 .pilote-zoom,
.colorset_2 .img-zoom .icon-close:before {background:#2b1f35;color:#85f2ef;}
.colorset_2 .timeline li,
.colorset_2 .scroll-line li {background:#588990;border-color:#588990;}
.colorset_2 .reponses li div,
.colorset_2 .quiz-autres li,
.colorset_2 .btn-3,
.colorset_2 .titre-blocs .container:before,
.colorset_2 .titre-blocs .container:after {background:#ff6283;border-color:#ff6283;color:#2b1f35;}
.colorset_2 .btn-2 {background:#f5517b;border-color:#f5517b;color:#fff;}
.colorset_2 .quiz-play:hover,
.colorset_2 .playbtn:hover {background:#57c2d6; border-color:#57c2d6;}
.colorset_2 .btn-2:hover,
.colorset_2 .hover .btn-2 {background:#e93157; border-color:#e93157;}
.colorset_2 .btn-3:hover,
.colorset_2 .hover .btn-3 {background:#e4435a; border-color:#e4435a;}
.colorset_2 .overlay-quiz .playbtn {border-color:#2b1f35;}
.colorset_2 .pilote-zoom:hover,
.colorset_2 .share-content li:hover,
.colorset_2 .share-content a:hover,
.colorset_2 .img-zoom .icon-close:before:hover {color:#57c2d6;}
.colorset_2 .overlay-shadow {box-shadow:0 -65px 60px -30px #85f2ef inset;}

/* colorset_3 turquoise/orange*/
/* timeline:#588990; highlighted:#85f2ef; btn-3:vert->orange:#ff7757; typo:#192b3f - rgba(25, 43, 63, 0.5)*/
.colorset_3 .icon-level,
.colorset_3 .all-titre,
.colorset_3 .bonne-reponse,
.colorset_3 .share-content,
.colorset_3 .share-content a{color:#85f2ef; } 
.colorset_3 .quiz-autres div,
.colorset_3 .quiz-autres .icon-level,
.colorset_3 .overlay-quiz .icon-close:before {color:#192b3f;}
.colorset_3 .quiz-background,
.colorset_3 .nano > .nano-pane {background:rgba(25, 43, 63, 0.2);}
.colorset_3.quizplay .quiz-background {background:rgba(25, 43, 63, 0.7);}
.colorset_3 .overlay-quiz,
.colorset_3 .nano > .nano-pane > .nano-slider {background:rgba(25, 43, 63, 0.9);}
.colorset_3 .quiz-play,
.colorset_3 .playbtn,
.colorset_3 .timeline .highlighted,
.colorset_3 .overlay-content,
.colorset_3 .matched,
.colorset_3 .scroll-line .highlighted {color:#192b3f;background:#85f2ef;border-color:#85f2ef;}
.colorset_3 .pilote-zoom,
.colorset_3 .img-zoom .icon-close:before {background:#192b3f;color:#85f2ef;}
.colorset_3 .timeline li,
.colorset_3 .scroll-line li {background:#588990;border-color:#588990;}
.colorset_3 .reponses li div,
.colorset_3 .quiz-autres li,
.colorset_3 .btn-3,
.colorset_3 .titre-blocs .container:before,
.colorset_3 .titre-blocs .container:after {background:#ff7757;border-color:#ff7757;color:#192b3f;}
.colorset_3 .btn-2 {background:#f5517b;border-color:#f5517b;color:#fff;}
.colorset_3 .quiz-play:hover,
.colorset_3 .playbtn:hover {background:#57c2d6; border-color:#57c2d6;}
.colorset_3 .btn-2:hover,
.colorset_3 .hover .btn-2 {background:#e93157; border-color:#e93157;}
.colorset_3 .btn-3:hover,
.colorset_3 .hover .btn-3 {background:#eb4934; border-color:#eb4934;}
.colorset_3 .overlay-quiz .playbtn {border-color:#192b3f;}
.colorset_3 .pilote-zoom:hover,
.colorset_3 .share-content li:hover,
.colorset_3 .share-content a:hover,
.colorset_3 .img-zoom .icon-close:before:hover {color:#57c2d6;}
.colorset_3 .overlay-shadow {box-shadow:0 -65px 60px -30px #85f2ef inset;}

/* colorset_4 violet/jaune*/
/* timeline:#844797; highlighted:#e172ff; btn-3:vert->jaune:#fed53b; typo:#281b2c - rgba(40, 27, 44, 0.5)*/
.colorset_4 .icon-level,
.colorset_4 .all-titre,
.colorset_4 .bonne-reponse,
.colorset_4 .share-content
.colorset_4 .share-content a{color:#e172ff; } 
.colorset_4 .quiz-autres div,
.colorset_4 .quiz-autres .icon-level,
.colorset_4 .overlay-quiz .icon-close:before {color:#281b2c;}
.colorset_4 .quiz-background,
.colorset_4 .nano > .nano-pane {background:rgba(40, 27, 44, 0.2);}
.colorset_4.quizplay .quiz-background {background:rgba(40, 27, 44, 0.7);}
.colorset_4 .overlay-quiz,
.colorset_4 .nano > .nano-pane > .nano-slider {background:rgba(40, 27, 44, 0.9);}
.colorset_4 .quiz-play,
.colorset_4 .playbtn,
.colorset_4 .timeline .highlighted,
.colorset_4 .overlay-content,
.colorset_4 .matched,
.colorset_4 .scroll-line .highlighted {color:#281b2c;background:#e172ff;border-color:#e172ff;}
.colorset_4 .pilote-zoom,
.colorset_4 .img-zoom .icon-close:before {background:#281b2c;color:#e172ff;}
.colorset_4 .timeline li,
.colorset_4 .scroll-line li {background:#844797;border-color:#844797;}
.colorset_4 .reponses li div,
.colorset_4 .quiz-autres li,
.colorset_4 .btn-3,
.colorset_4 .titre-blocs .container:before,
.colorset_4 .titre-blocs .container:after {background:#fed53b;border-color:#fed53b;color:#281b2c;}
.colorset_4 .btn-2 {background:#f5517b;border-color:#f5517b;color:#fff;}
.colorset_4 .quiz-play:hover,
.colorset_4 .playbtn:hover {background:#bd53f3; border-color:#bd53f3;}
.colorset_4 .btn-2:hover,
.colorset_4 .hover .btn-2 {background:#e93157; border-color:#e93157;}
.colorset_4 .btn-3:hover,
.colorset_4 .hover .btn-3 {background:#faa936; border-color:#faa936;}
.colorset_4 .overlay-quiz .playbtn {border-color:#281b2c;}
.colorset_4 .pilote-zoom:hover,
.colorset_4 .share-content li:hover,
.colorset_4 .share-content a:hover,
.colorset_4 .img-zoom .icon-close:before:hover {color:#bd53f3;}
.colorset_4 .overlay-shadow {box-shadow:0 -65px 60px -30px #e172ff inset;}

/* colorset_4 violet/vert*/
/* timeline:#775997; highlighted:#c996ff; btn-3:vert-:#4feda3; typo:#281b2c - rgba(40, 27, 44, 0.5)*/
.colorset_5 .icon-level,
.colorset_5 .all-titre,
.colorset_5 .bonne-reponse,
.colorset_5 .share-content,
.colorset_5 .share-content a {color:#c996ff; } 
.colorset_5 .quiz-autres div,
.colorset_5 .quiz-autres .icon-level,
.colorset_5 .overlay-quiz .icon-close:before {color:#192b3d;}
.colorset_5 .quiz-background,
.colorset_5 .nano > .nano-pane {background:rgba(40, 27, 44, 0.2);}
.colorset_5.quizplay .quiz-background {background:rgba(40, 27, 44, 0.7);}
.colorset_5 .overlay-quiz,
.colorset_5 .nano > .nano-pane > .nano-slider{background:rgba(40, 27, 44, 0.9);}
.colorset_5 .quiz-play,
.colorset_5 .playbtn,
.colorset_5 .timeline .highlighted,
.colorset_5 .overlay-content,
.colorset_5 .matched,
.colorset_5 .scroll-line .highlighted {color:#192b3d;background:#c996ff;border-color:#c996ff;}
.colorset_5 .pilote-zoom,
.colorset_5 .img-zoom .icon-close:before {background:#192b3d;color:#c996ff;}
.colorset_5 .timeline li,
.colorset_5 .scroll-line li {background:#775997;border-color:#775997;}
.colorset_5 .reponses li div,
.colorset_5 .quiz-autres li,
.colorset_5 .btn-3,
.colorset_5 .titre-blocs .container:before,
.colorset_5 .titre-blocs .container:after {background:#4feda3;border-color:#4feda3;color:#192b3d;}
.colorset_5 .btn-2 {background:#f5517b;border-color:#f5517b;color:#fff;}
.colorset_5 .quiz-play:hover,
.colorset_5 .playbtn:hover {background:#9774f2; border-color:#9774f2;}
.colorset_5 .btn-2:hover,
.colorset_5 .hover .btn-2 {background:#e93157; border-color:#e93157;}
.colorset_5 .btn-3:hover,
.colorset_5 .hover .btn-3 {background:#36cda1; border-color:#36cda1;}
.colorset_5 .overlay-quiz .playbtn {border-color:#192b3d;}
.colorset_5 .pilote-zoom:hover,
.colorset_5 .share-content li:hover,
.colorset_5 .share-content a:hover,
.colorset_5 .img-zoom .icon-close:before:hover{color:#9774f2;}
.colorset_5 .overlay-shadow {box-shadow:0 -65px 60px -30px #c996ff inset;}

/* OFFLINE */
.offline .field--name-field-copyright {bottom:2px;}

/* RESPONSIVE */
@media screen and (max-width:1024px)
{
	.quiz-all {height:0;}
	.quiz-current.quiz-all {height:100vH;}
	.header p {padding-left:20px}
	.quiz-blocs-autres .titre-blocs .container:after,
	.quiz-blocs-autres .titre-blocs .container:before {width:22%;}
	.quiz-blocs-bonus .titre-blocs .container:after,
	.quiz-blocs-bonus .titre-blocs .container:before {width:33%;}
}

@media screen and (max-width:735px)
{
	.reponses-content {overflow-x:auto;}
	.reponse-content {width:300px;}
	.play-content .reponses {width:1000px; margin-bottom:10px; padding:0 20px; }
	.play-content .quiz-autres {display:block;}
	.quiz-autres li {width:96%; max-width:340px; margin:10px 2%;}
	.quiz-bonus li {width:47%;}
	.play-content .scroll-line {margin:20px 0;}
	.quiz-buttons li {margin:10px;}
	.scroll-line {min-height:7px;}
	.scroll-line li {display:inline-block; width:68px; height:7px; margin:2px; background:#fff; transition:background 1s;}
	
	.question {margin:20px auto 80px auto;}
	.question .quiz-media {margin-top:30px;}
	.question-texte {font-size:1.65em;}
}

@media screen and (max-width:666px)
{
	p, pre {margin:0.5rem 0;}
	.all-item {padding-bottom:40px;}
	.all-reponse-container {min-height:50px; }
	.all-left { width:100%; float:none; padding-left:70px;}
	.all-explicatif { padding-left:0; line-height:1.3;}
	.all-right {float:none; max-width:340px; width:auto;}
	.all-container {float:none; width:100%;}
	.all-titre {padding:0;width:100%; font-size:1.25em; margin-bottom:20px;}
	.bonne-reponse, .all-reponse {font-size:1em;}
	.creative {clear:left;}
	.footer_reseaux .logo,
	.footer_reseaux .tools {padding:0 10px;}
	.footer_reseaux .logo .res_home {margin-right:10px;}
	.footer_reseaux .tools .creative a {margin-left:50px;width:95px;}
	.footer_reseaux .addthis {float:left; clear:left;}
	
	
	body.is-page-node-type-quiz {overflow:visible;}
	.quiz-content,
	.play-content {position:relative; height:auto; display:block;}
	.overlay-quiz {font-size:0.938em;}
	.quiz-background {position:relative;height:auto; font-size:0.938em;}
	.header,
	.footer_reseaux {position:relative;}
	.quiz-content .field--name-field-niveau {padding:60px 0 40px 0;}
	.play-content .scroll-container {padding:40px 0;}
	h1 {margin-top:0; margin-bottom:0; font-size:2em;}
	.quiz-content .field--name-body {font-size:1.2em; line-height:1.4;}
	.quiz-play {margin-top:30px; margin-bottom:40px; line-height:125px; height:125px; width:125px;}
	.quiz-play span {line-height:1;}
	.play-content.quiz-next {height:0;}
	.reussite {margin-top:0; font-size:2.25em;}
	.reussite .container {padding:0;}
	.bilan {font-size:1.125em;}
	.titre-blocs {font-size:2em; margin:30px 0 20px 0;}
	.quiz-buttons {margin:30px 0;}
	.quiz-all h2 {margin:0 0 60px 0;}
	.quiz-all,
	.quiz-result,
	.quiz-content.quiz-next {height:0;}
	.quiz-all.quiz-current,
	.quiz-result.quiz-current {height:auto;}
	.layout__region--content {position:relative;}
	.field--name-field-copyright {bottom:1px;right:1px; max-width:none; padding:2px 20px;width:100%;}
	.overlay-quiz {padding-top:10vH;}
	.overlay-quiz .overlay-content {max-height:75vH;}
	.overlay-container .icon-close {right:0;}
	.nano-content {padding-left:8%; padding-right:8%;}
	.overlay-content h3 {font-size:2em;}
	.overlay-quiz .icon-pouce-big:before {margin-right:10px;}
	.overlay-content h3 {margin:50px 0 30px 0;}
	.overlay-quiz .playbtn {padding:30px auto;}
	.quiz-all h2 {margin:0 0 20px 0;font-size:2em;}
	.share-content p {font-size:1.25em; margin-top:7px; margin-right:5px;}
	.share li {font-size:1.8em; width:30px; height:30px; margin:0 2px;}
	.timeline li {width:17px; height:17px;}
	.timeline .icon-pouce-big:before {line-height:17px;width:17px; height:17px;font-size:0.8em}
	
	.quiz-content.finished,
	.play-content.finished {height:0; transition:height 2s;}
	.matched { width:53px; height:53px; line-height:53px;}
	.matched.icon-pouce-big {padding-top:5px;}

}

@media screen and (max-width:460px)
{
	.quiz-blocs-autres .titre-blocs .container:after, 
	.quiz-blocs-autres .titre-blocs .container:before {width:12%;}
}

@media screen and (max-width:360px)
{
	.play-content .reponses {width:850px;}
	.reponse-content {width:250px;}
	.quiz-buttons .playbtn { height:105px; width:105px; line-height:105px; font-size:1.375em;}
	
	.quiz-blocs-bonus .titre-blocs .container:after,
	.quiz-blocs-bonus .titre-blocs .container:before {width:27%;}
	.titre-blocs {font-size:1.75em;}
	.quiz-blocs p.container {padding:0;}
	.play-content .quiz-bonus,
	.play-content .quiz-autres {padding-top:20px;}
}


@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-10px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-10px);
  }
}

@media print
{
	*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
	}
	.quiz-next,	
	.finished,
	.quiz-all,
	.footer {display:none;}
	.quiz-all.quiz-current {display:block;}
	.js .field--name-field-image.full img {width:auto; height:auto; z-index:1;}
	
	body.is-page-node-type-quiz {overflow:visible;}	
	/*.quiz-content,
	.play-content, 
	.quiz-background,
	.header,
	.footer_reseaux {position:relative; height:auto;}*/
}