/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 
 /*************************/
 /*   DANS TON OREILLE    */ 
 /*************************/
 
 .hide{
     display: none !important;
 }
 
 #exo_zone_ampli{
     width:1040px;
     height:710px;
     margin: auto;
     position: relative;
 }
 
 #exo_zone_ampli #loader-om{
     width:100%;
     height:100%;
     position: absolute;
     top:0px;
     left:0px;
     z-index: 0;
     background:center no-repeat;
     opacity: 1;
     transition: all 800ms
 } 
 
 #exo_zone_ampli .zone_ampli{
     opacity: 0;
     width:100%;
     height:100%;
     position: relative;
     transition: all 800ms;
     z-index: 1;
     background-size:100%;
 }
 
 .zone_ampli .placeholder{
     background-color:transparent !important
 }
 
 .opacity100{
     opacity: 1 !important;
 }
 .opacity0{
     opacity: 0 !important;
 }
 
     #exo_zone_ampli .menu{
         position: absolute;
         top: 25.2px;
         right: 20px;
         width: 235px;
         height: 650px;
     }
     
     #exo_zone_ampli .menu .btnhome {
         position: absolute;
         bottom: 36px;
         cursor: pointer;
         left: 105px;
         opacity: 0.7;
         transition: 500ms all;
     }
     #exo_zone_ampli .menu .btnhome:hover{
         opacity: 1;
     }
     
     #exo_zone_ampli .menu .putter1,
     #exo_zone_ampli .menu .putter2,
     #exo_zone_ampli .menu .putter3,
     #exo_zone_ampli .menu .putter4,
     #exo_zone_ampli  .menu .putter5,
     #exo_zone_ampli  .menu .putter6{
         position: absolute;
         width:80px;
         height:50px;
         display: block;
         right:13px;
         cursor: pointer;
         
     }
     
     #exo_zone_ampli .putter1 {
         top: 148px;
         
     }
     #exo_zone_ampli .putter2 {
         top: 206px;
     }
     #exo_zone_ampli .putter3 {
         top: 263px;
     }
     #exo_zone_ampli .putter4 {
         top: 320px;
     }
     #exo_zone_ampli .putter5 {
         top: 377px;
     }
     #exo_zone_ampli .putter6 {
         top: 435px;
     }
     
     
     #exo_zone_ampli .putter4 .fas.fa-lock-alt {
         color: #222;
         opacity: 0.8;
         position: relative;
         top: 15px;
         left: 32px;
         cursor: default;
     }
     
     .putter.tuto {
         position: absolute;
         bottom: 30px;
         left: 31px;
         opacity: 0.7;
         transition: 800ms all;
     }
     
     .putter.tuto:hover {
         opacity: 1;
     }	
     .putter.tuto img {
         width:60px;
     }
     
     
     
     .menu .niveau_zone {
        position: absolute;
        top: -30px;
        left: -769px;
        width: 710px;
        height: 100px;
        
     }
     
        .menu .niveau_zone .image img{
            width:170px;  
        }
     
        .niveaux {
           position: absolute;
           top: 0px;
           left: 180px;
           background: #00000082;
           padding: 10px 20px;
           border-radius: 10px;
        }
     
        .menu .niveau_zone .nv {
           display: inline-block;
           margin: 4px;
           width: 40px;
           height: 40px;
           background: #fff;
           opacity: 0.4;
           transition: 400ms all;
           border-radius: 3px;
        }
        
        .menu .niveau_zone .nv:hover{
            cursor: pointer;  
            opacity: 0.6;
        }
        
        .menu .niveau_zone .nv.active,
        .menu .niveau_zone .nv.active:hover{
           opacity:1;
        }
     
     
     #exo_zone_ampli .filet {
         position: absolute;
         top: 142px;
         left: 146px;
         width: 539px;
         height: 480px;
         overflow: auto;
         z-index: 1;
     }
     
     
     /* placeholder : choisi ton putter */
     #exo_zone_ampli .placeholder{
         background-size:auto;
         background-repeat: no-repeat;
         background-position: center;
         width:100%;
         height:100%;
     }
     
     
     #exo_zone_ampli .menu_nav{
         position: absolute;
         top:0px;
         left:0px;
         width:100%;
         height:100%;
         display: none;
         z-index: 999;
     }
     #exo_zone_ampli .menu_nav.show{
         display: block;
     }
     
         #exo_zone_ampli .menu_nav .couv_exo{
             width:100%;
             height:100%;
             background-size:auto;
             background-repeat: no-repeat;
             background-position: center;
             display: none;
         }
         #exo_zone_ampli .menu_nav .couv_exo.show{
             display: block;
         }
         
     #exo_zone_ampli .quizz_titre {
         color: #FFF;
         text-transform: uppercase;
         position: absolute;
         top: -51px;
         font-weight: bold;
         font-size: 1.5em;
         text-align: center;
         width: 126%;
         font-family: 'Roboto Slab', serif;
     }
     
     #exo_zone_ampli .form_ampli{
         padding: 10px 40px;
         color:#fff;
     }
         
         #exo_zone_ampli .form_ampli .form-label{
             text-transform: uppercase;
             font-family: 'Roboto Slab', serif;
             font-size: 1.6em;
         }
         
         #exo_zone_ampli .form-control{
             margin-bottom:20px;
         }
     
         #exo_zone_ampli .form_ampli .zone_btn{
             padding-top:25px;
             text-align: center;
         }
         
         
         
         #exo_zone_ampli .playmp3 {
             padding-left:40px;
             padding-right:40px;
         }
     
     #exo_zone_ampli .alert_filet{
         width: 80%;
         margin: auto;
         margin-top: 200px;
     }
     
     #exo_zone_ampli .g7credit {
         position: absolute;
         bottom: 8px;
         right: 22px;
     }
     
         #exo_zone_ampli .g7credit img{
             width:80px	
         }
     
     #exo_zone_ampli  .titre_avant_option{
         text-align: center;
         
     }
     
         #exo_zone_ampli .titre_avant_option img{
             width:100%;
         }
     #exo_zone_ampli  .titre_avant_quiz{
         text-align: center;
         
     }
     
         #exo_zone_ampli .titre_avant_quiz img{
             max-height:130px;
             width:auto;
         }
     
     #exo_zone_ampli .zonequiz .zone_question {
         display: none;
         width:90%;
         margin:auto;
         height:350px;
     }
         
         #exo_zone_ampli .zonequiz .zone_question.active {
             display: block;
         }
         
         #exo_zone_ampli .zonequiz .zone_question .num_question {
                 text-align: left;
                 color: #e9e6e6;
                 font-family: 'Slabo 27px', serif;
                 font-size: 2.5em;
                 position: absolute;
                 top: 37px;
                 opacity: 1;
                 transform: rotate(4deg);
                 left: 56px;
                 font-family: 'Anton', sans-serif;
             }
         
             #exo_zone_ampli .zonequiz .zone_question .num_question .cover {
                 height: 72px;
                 position: absolute;
                 top: -8px;
                 left: 0px;
                 z-index: 50;
                 width: 233px;
             }
         
         #exo_zone_ampli .zonequiz .zone_question .laquestion{
             color:#fff;
             font-family: 'Slabo 27px', serif;
             font-size: 1.8em;
             text-align: left;
             padding: 10px;
             width:445px;
             margin: auto;
         }
         
         #exo_zone_ampli .zonequiz .zone_question .choix{
             text-align: center;
             z-index: 1;
             position: relative;
         }
         
         
         #exo_zone_ampli .zonequiz .zone_question .controllers{
             text-align: center;
             width:70%;
             margin: auto;
             margin-top:20px;
         }
         
             #exo_zone_ampli .zonequiz .zone_question .controllers .btn{
                 padding:8px 25px;
             }
         
         #exo_zone_ampli .zonequiz .zone_question .controllers.controllers-large{
             width:100%;
         }
         
         #exo_zone_ampli .zonequiz .zone_question .boutonnext{
             position: absolute;
             bottom: 20px;
             right: 20px;	
         }
         
         #exo_zone_ampli .zonequiz .zone_question .text_reponse{
             font-family: 'Slabo 27px', serif;
             text-align: left;
             padding:10px;
             font-size: 1.5em;
             color:#fff;
         }
         
             .col-12.colreponsejuste {
                 padding-top: 10px;
             }
         
             #exo_zone_ampli .zonequiz .zone_question .textresultat{
                 font-size: 1.4em;
             }
         
             #exo_zone_ampli .zonequiz .zone_question .text_reponse  .textsuccess{
                 color : #9dfe03;
             }
             #exo_zone_ampli .zonequiz .zone_question .text_reponse .texterreur{
                 color:#ff0302;	
             }
             
         #exo_zone_ampli .zonequiz .zone_question .numnote{
             font-family: 'Slabo 27px', serif;
             text-align: center;
             padding:7px;
             color:#fff;
             font-size:1.5em;
         }
         
         #exo_zone_ampli .reponsejusteline{
             font-size:1em;
             padding:7px;
             text-decoration: none;
             color:#bbb;
             background: none !important;
         }
         
         
         
         #exo_zone_ampli .zonequiz .sep {
             color: #fff;
             letter-spacing: 0.3em;
             text-align: center;
         }
         #exo_zone_ampli .zonequiz .sep.sep2 {
             margin-top: 16px;
         }
     
     #exo_zone_ampli .resultats{
         text-align: center;
         font-family: 'Slabo 27px', serif;
     }
     
     #exo_zone_ampli .pageresultats {
         padding: 20px;
         color: #fff;
         font-family: 'Slabo 27px', serif;
     }
     
     #exo_zone_ampli .pageresultats .before_message{
         font-size:2em;
         text-align: center;
         font-weight: bold;
     }
     #exo_zone_ampli .pageresultats .messages_after {
        width: 90%;
        text-align: center;
        margin: auto;
     }
     
     #exo_zone_ampli .pageresultats .note{
         
         font-family: 'Slabo 27px', serif;
         padding:20px;
         font-weight: bold;
         font-size: 3em;
         text-align: center;
         
     }
     
     #exo_zone_ampli .pageresultats .after_message{
         font-size:1.2em;
         margin-bttom:20px;
     }
     
     #exo_zone_ampli .pageresultats .zone_btn{
         text-align: center;
     }
 
 
 #exo_zone_ampli .content_filet{
     background-size: 100%;
     background-position: top center;
 }
 
 #exo_zone_ampli .content_filet select{
     background-image: url(../img/sort-down-solid.svg);
     background-position: 97% 18%;
     background-repeat: no-repeat;
     background-size: 14px;
 }
 
 
 /* AMPLI ZONE FX */
 
 #exo_zone_ampli .zone_fx .diode img {
     opacity: 0;
     position: absolute;
     top: 64px;
     right: 13px;
     z-index: 0;
     transition: 150ms all;
     width: 100px;
 }
 
 #exo_zone_ampli.putter_hover .zone_fx .diode img {
     opacity:1;
     /* animation-duration: 2s;
     animation-name: ampli_fx_diode; */
 }
 
 @keyframes ampli_fx_diode {
   from { opacity: 1; } 
   0% { opacity: 0.8; }
   30% { opacity: 0.1; }
   68%, 72% { opacity: 0.6; }
   100% { opacity: 1; }
   to { opacity: 1; }
 }
     
 
 /* End > Content */
 
 /*Tuto*/
 
 #exo_zone_ampli .zone_ampli.tuto .filet{
     left:74px;
     width:670px;
 }
 #exo_zone_ampli .zone_ampli.tuto .content_filet{
     margin-top:43px;
 }
 
 
 /* CARTO */
 
 #exo_zone_ampli .zone_ampli.boardquiz .filet,
 #exo_zone_ampli .zone_ampli.carto .filet { 
     overflow: visible;
 }
 
 #exo_zone_ampli .zone_ampli.boardquiz .zonequiz,
 #exo_zone_ampli .zone_ampli.carto .zonequiz {
     height:210px;
     z-index: 100;
 }
 
 #exo_zone_ampli .zonequiz.forcehauteur{
     height:477px !important;
 }
 
 #exo_zone_ampli. .zone_ampliboardquiz .zonequiz .zone_question .controllers,
 #exo_zone_ampli .zone_ampli.carto .zonequiz .zone_question .controllers{
     margin-top:10px;
 }
 
 
 #exo_zone_ampli .zone_ampli.boardquiz .zonequiz .zone_question .laquestion,
 #exo_zone_ampli .zone_ampli.carto .zonequiz .zone_question .laquestion {
     color: #fff;
     font-family: 'Slabo 27px', serif;
     font-size: 1.8em;
     text-align: left;
     padding: 20px 0px 10px;
 }
 
 #exo_zone_ampli .zone_ampli.boardquiz .zonequiz .zone_question .boutonnext,
 #exo_zone_ampli .zone_ampli.carto .zonequiz .zone_question .boutonnext {
     bottom: 224px;
 }
 
 #exo_zone_ampli .zone_ampli.carto .zone_question .controllers{
     margin-top:3px;
 }
 
 #refmanche {
     background: center no-repeat;
     width: 840px;
     height: 260px;
     position: absolute;
     left: -157px;
     top: 266px;
     background-size: contain;
     z-index: 99;
 }
 
 #refmanche .proposition{
     display: none;
 }
 
 #refmanche .posnote{
     position: absolute;
     width:1px;
     height:1px;
 }
 #refmanche .posnote.masque img{
     opacity: 0.3;
 }
 
 
 #refmanche .proposition.active{
     display: block;
 }
 
 #refmanche .proposition img{
     position: relative;
     left:-40px;
     top:-46px;
     max-width: none
 }
 
 #pianoabouton .posnote{
     position: absolute;
     width:1px;
     height:1px;
 }
 
 #pianoabouton .posnote .buttonpiano{
     width:40px;
     height:40px;
     background: rgba(255, 255, 255);
     border-radius:100%;
     position: absolute;
     left:-20px;
     top:-20px;
     z-index:999;
     position: relative;
     opacity: 0.1;
     transition: all 500ms;
     cursor: pointer;
 }
 
 #pianoabouton .posnote .buttonpiano:hover{
     background: rgba(255, 255, 255);
     opacity: 0.6;
 }
 
 #pianoabouton.complet .posnote .buttonpiano:hover{
     opacity: 0.1 !important;
     cursor: default;
 }
 
 
 #pianoabouton .posnote.select .buttonpiano{
     background: #fff;
     cursor: pointer;
     opacity: 1
 }
 
 #pianoabouton .posnote.select .buttonpiano:hover{
     opacity: 0.8 !important;
     cursor: pointer;
     
 }
 
 #pianoabouton .posnote.select.success .buttonpiano{
     background: #9dfe03;
     opacity: 0.8;
 }
 #pianoabouton .posnote.select.error .buttonpiano{
     background:#ff0302;
 }
 
 #exo_zone_ampli .zonequiz .zone_question .laquestion .aide{
     font-size:0.6em;
     display: block;
 }
 
 .afternote {
     margin-bottom: 30px;
 }
 
 
 
 
 
 /* MEME PAS PEUR */
 
 #exo_zone_ampli .zone_ampli.memepaspeur  .zone_question {
 
     overflow: hidden;
 }
 
 #exo_zone_ampli .choixmemepaspeur {
     overflow: auto;
     height: 205px;
     position: absolute;
     bottom: 0px;
     width: 480px;
     overflow-x: hidden;
     z-index: 0;
 }
 
 .btn_choix_harmomelo.show_resultat .col{
     display: none;
 }
 
 .btn_choix_harmomelo.show_resultat .col.show_result{
     display: inline-block;
     margin-top: 90px;
 }
 
 .btn_choix_harmomelo.show_resultat.show_resultat_2res .col.show_resul:first .btn_choix{
     float:right;
 }
 .btn_choix_harmomelo.show_resultat.show_resultat_2res .col.show_resul:last .btn_choix{
     float:left;
 }
 
 .btn_choix_harmomelo.show_resultat .btn_choice{
     width:70px;
     height:70px;
 }
 
 .btn_choix_harmomelo .col {
     display: inline-block;
     margin: 0px 7px;
 }
 
 /* .btn_choix_harmomelo.show_resultat .reponsejuste{
     
     position: absolute;
     bottom: 32px;
     left: 213px;
     
 } */
 
 
 .btn_choix_harmomelo .btn_choice {
     width: 45px;
     height: 45px;
     background-position: center;
     background-repeat: no-repeat;
     margin: auto;
     background-size: 175%;
     cursor: pointer;
     margin-bottom:10px;
     
     color: #fff;
     font-size: 1.5em;
     text-align: center;
     padding: 18px 0px;
     
     position: relative;
 }
 
 .btn_choix_harmomelo.controllers{
     width:100% !important;
     margin-top:20px !important;
 }
 
 .btn_choix_harmomelo.controllers.disabled .btn_choice{
     opacity: 0.4;
     transition: all 800ms
 }
 
 .btn_choix_harmomelo.controllers.disabled .btn_choice.reponsejuste{
     opacity: 1 !important;
 }
 
 .btn_choix_harmomelo.controllers.disabled .btn_choice.reponsejuste .rd {
     position: absolute;
     left: -4px;
     top: 1px;
     width: 75px;
     height: 75px;
     border-radius: 100%;
     border: 7px solid #9dfe03;
 }
 
 .btn_choix_harmomelo.controllers.disabled .btn_choice.reponsefausse{
     opacity: 0.8 !important;
 }
 
 .btn_choix_harmomelo.controllers.disabled .btn_choice.reponsefausse .rd{
     position: absolute;
     left: -4px;
     top: 1px;
     width: 75px;
     height: 75px;
     border-radius: 100%;
     border:9px solid #ff0302;
 }
 
  /* VERSION MOBILE */
 
 #zone_menu_mobile{
    display: none;
 }
 
 #exo_zone_ampli .zone_ampli .bckmobile{
    display: none;
 }
 
 #exo_zone_ampli .zone_ampli .picto-mobile-90{
    display: none;
 }
 
/* Small devices (landscape phones, less than 768px) */


@media (max-width: 600px) { 
   #exo_zone_ampli .zone_ampli .picto-mobile-90{
        display: block;
        text-align: center; 
    }
    
       #exo_zone_ampli .zone_ampli .picto-mobile-90 img{
           margin: 20px;
           width: 80px;  
       }
}

@media (max-width: 850px) { 
 
 #titremenunavmobiledto{
    margin:30px auto 15px auto;
    text-align:center
 }
 
 #zone_menu_mobile{
    position: relative;
    z-index: 1;
    display: block;
 }
 
    #exo_zone_ampli .zonequiz .zone_question .controllers {
       width: 80%;
    }
 
  #dto_menumobile {
     
     width: 80%;
     margin: 10px auto;
     background-image: url(../img/sort-down-solid.svg);
     background-position: 97% 18%;
     background-repeat: no-repeat;
     background-size: 14px;
     position: relative;
     z-index: 1;
     
  }
  #exo_zone_ampli .choixmemepaspeur {
     height: auto;
     position: inherit;
     width: 100%;
  }
  .btn_choix_harmomelo.show_resultat .col.show_result {
   
      margin-top: 30px;
  }
   
   #exo_zone_ampli .menu {
      position: absolute;
      top: -30px;
      right: 0px;
      width: 100%;
      height: auto;
      z-index: 1;
   }
      .menu .niveau_zone {
         position: absolute;
         top: 0px;
         left: 0px;
         width: 100%;
         height: auto;
      }
      .menu .niveau_zone .image{
         display: none;
      }
      .niveaux {
         position: relative;
         top: 0px;
         left: 0px;    
         padding:10px;    
         text-align: center; 
      }
      .menu .niveau_zone .nv {
         display: inline-block;
         margin: 2px;
         width: 26px;
         height: 22px;
         background: #fff;
         opacity: 0.4;
         transition: 400ms all;
         border-radius: 3px;
      }
   
   #exo_zone_ampli{
      width:100%;
      height:auto;
   }
   #exo_zone_ampli .zone_ampli{
      background: none !important;
      padding-top:100px;
      min-height:740px;
   }
   
   #exo_zone_ampli .zone_ampli .bckmobile{
      display: block;
      position: absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      background-size:cover;
      z-index: 0 ;
      background-position: top center;
   }
   
   #exo_zone_ampli .filet {
      position: relative;
      top: 0px;
      left: 0px;
      width: 100%;
      height: auto;
   }
   
   #exo_zone_ampli .menu .putter,
   #exo_zone_ampli .zone_fx{
      display: none;
   }
   
   
   
   #exo_zone_ampli .g7credit {
      position: relative;
      bottom: auto;
      right: auto;
      text-align: center;
      display: block;
      margin: 30px auto;
   }
   
   #exo_zone_ampli .zonequiz .zone_question .controllers .btn {
      margin: 5px;
   }
   
   #exo_zone_ampli .zonequiz .zone_question {
      height: auto;
   }
   #exo_zone_ampli  .num_question .cover{
      display: none;
   }
   #exo_zone_ampli .zonequiz .sep {
      overflow: hidden;
   }
   
   #exo_zone_ampli .titre_avant_quiz img {
      width: 100%;
   }
   
   #exo_zone_ampli .zonequiz .zone_question .num_question {
      font-size: 1.5em;
   }
   
   #exo_zone_ampli .zonequiz .zone_question .boutonnext {
      position: inherit;
      margin-top: 20px;
      z-index: 2;
   }
   
   #exo_zone_ampli .zonequiz .zone_question .laquestion {
      width: 100%;

   }
   
   .zone_refmanche {
      overflow-x: auto;
      height: 260px;
      overflow-y: hidden;
   }
   
   #refmanche {
      position: relative;
      left: 0px;
      top: 0px;
      
   }
   
   #exo_zone_ampli .zone_ampli.tuto .filet {
      left: 0px;
      width: 100%;
    }

}