#game_outer{position:relative;
            background-size: 900px 600px;
          }

#game_outer_game_bg{
  width:100%;
  height: 100%;
}

/*#game_outer:before {    
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background: url(images/perso_bob.png) no-repeat; background-size: 840px 600px;
    z-index: -2;
}*/

#winIntro.popup {left:50%; margin-left: -150px;}

#topLayer{position:absolute; top:0px; left:0px; z-index:900; width:900px; height:600px;}

#topInterface{position: absolute; top:6px; left:0; z-index: 90; width: 900px;}


/* Good / Bad */
.green{color:#6fff64;}
.red{color:#f9a656;}


/* PERSO */
.perso.big{position: absolute; top: 295px; left: 700px;
                  width: 130px; height: 219px;
                  background-size: 130px 219px;
}
.perso.small{position: absolute; top: 225px; left: 750px;
                  width: 86px; height: 150px;
                  background-size: 86px 150px;

}




/* input assets for ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
  #buttonSpeechForInputBloc{ top:330px; left:200px;}
  #submitButton{top:320px; left:630px;}
}




/* winSolution */
#winSolutionBloc{position: absolute; top:160px; left:110px; 
                width: 650px; height: 278px;
              text-align:center;}

#winSolutionWin{width: 650px; height: 278px;
                  -webkit-border-radius: 40px; border-radius: 40px;
                  -webkit-box-shadow: 1px 3px 0px rgba(0,0,0,0.2);
                  box-shadow: 1px 3px 0px rgba(0,0,0,0.2);
                  border:solid 10px #4ffc5b;
                  background: #37c30b;
                }
#winSolutionLost{width: 650px; height: 278px;
                 -webkit-border-radius: 40px; border-radius: 40px;
                  webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
                  box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
                  border:solid 10px #ff0000;
                  background: #ff8400;
                }
#winSolutionBloc .title{position: absolute; top: 30px; 
                        font-size:3em;
                        font-weight: bold;
                        width: 100%;
                        color:#fff;
                        }
#winSolutionWin{text-shadow: 1px 3px 0px #31af0a;}
#winSolutionLost{text-shadow: 1px 3px 0px #d16c00;}
#winSolutionBloc .baseline{position: absolute; top: 85px; 
                           text-align:center;
                           font-size:1.6em; color:#fff;
                            width: 90%;
                            left: 5%;
}
                           }
/*
#winSolutionWin .baseline{color:#e5ef09;width: 100%;}
#winSolutionLost .baseline{color:#f9a656;}
*/
#winSolutionLost .red{color:#ffe050;}
#winSolutionBloc .label{position: absolute; top: 130px;
                        text-align:center; color:#fff;
                        font-size:2.2em;
                        width: 630px;
                        font-weight: bold;
                        }
#winSolutionBloc .label.alt{top:180px;}
#winSolutionBloc .label.small{font-size:1.7em;}

#winSolutionBloc .baseline .question{ margin-bottom:10px; font-size:1.3em; opacity:0.6; filter:alpha(opacity=60);}
#winSolutionBloc .baseline .question.small{  font-size:1em; line-height: 0.9em; }
#winSolutionBloc .baseline .question.super_small{  font-size:0.8em; line-height: 0.8em;margin-bottom: 0px;}

#winSolutionBloc .verb{color:#fcff00;}

#winSolutionBloc .txtSupSol{opacity:0.7; filter:alpha(opacity=70);}
#winSolutionBloc .txtSupSolPost{font-size:0.8em;}

#winSolutionBloc .nextButton{position: absolute; top: 250px; left: 50%; margin-left:-87px; }

#winSolutionBloc .perso_prof{position: absolute; top: 165px; left: 490px;
                  width: 201px; height: 198px;
                  }
 

#goodAnswerBloc{position: absolute; top: 470px; left: 50px; width: 770px; text-align:center;}
#goodAnswerTitle{font-size:1.2em; color:#4485f5; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);}
#goodAnswerLabel{font-size: 2em; font-weight: bold; color:#fff29c;text-shadow: 0 1px 0 rgba(75, 90, 115, 1);}


/* soundController */
#soundController{position:absolute; right:65px; bottom:33px; color:#fff; font-size:2.5em; cursor: pointer;}
#volumeOff{}
#volumeOff i{vertical-align: middle; margin-top: -7px;}
#volumeOff i.volumeMuteCross{margin-left:2px;}


/* DRAG DROP */
/*-----------------------------------*/

#textFrame{letter-spacing: -0.05em; color:#FFF; position:absolute; text-align: center; padding:15px;
  display: flex; 
  justify-content: center ;
  align-items: center;
  position:absolute;
  flex-wrap: wrap;
}

#textFrameContent{ }

.drop{
  width:150px; 
  height: 50px; 
  border:solid 2px rgba(255, 255, 255, 0.5); 
  text-align:center; 
  position:absolute;
  display: flex; 
  justify-content: center;
  align-items: center;
  position:absolute;
  flex-wrap: wrap; 
  border-radius:15px;
}

.dropSentence{position:absolute; background:#D8CFF9; color:#3C2E65; border-radius:15px; display:flex; align-items: center; padding:0px 10px; font-size:1.2em;}

.dropsInGapsInTextMode{display:inline-block; position:relative; vertical-align: middle;}

.dropsBlocForGapInTextMode{position:absolute; color:#2a4285; font-size:1.4em; line-height: 1.6em;letter-spacing: -0.03em;}
.dropsBlocForGapInTextMode .drop{
  border:solid 2px rgba(52, 65, 136, 0.2)
}

.inputInGapsInTextMode{padding:2px;}

.brbr{height: 12px;}

#dragsStack{
  display: flex; 
  justify-content: center ;
  align-items: center;
  position:absolute;
  flex-wrap: wrap;
}

.drag{
    width:150px; 
    height: 30px; 
    border:none; 
    background: #FEF7E3; 
    color:#854C25; 
    font-size:1.5em;
    text-align:center; 
    border-radius: 15px; 
    align-self: auto; 
    margin:5px;
}

.drag.dragTransparent{opacity:0.4; filter:alpha(opacity=40);}

.dragShadow{
    webkit-box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 2px 3px 0px rgba(0,0,0,0.2);
}

.dragCursor{ cursor:grab;}

.drag img{    
    position: absolute;
    bottom: 0px;
    left: 5px;
    /*-webkit-filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.4));
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.4));*/
}
.dragBackgroundNone{background:none;}
.drag.error{background:#fC6E5B; color:#FFF0B4;}
.drag.error img{
/*-webkit-filter: drop-shadow(2px 2px 5px #fC6E5B);
  filter: drop-shadow(2px 2px 5px #fC6E5B);*/
}
.drag.good{background:#7EF265; color:#1A3C14;}
.drag.good img{ 
/*-webkit-filter: drop-shadow(2px 2px 5px #6fff64);
  filter: drop-shadow(2px 2px 5px #6fff64);*/
}

.inputInGapsInTextMode.error{background:#fC6E5B; color:#FFF0B4; border:none;}
.inputInGapsInTextMode.good{background:#7EF265; color:#1A3C14; border:none;}
.inputInGapsInTextMode.corrected{background:#FFE275; color:#EE6900; border:none;}

.dragIsDragging{
  transform: scale(1.3, 1.3); 
  transform-origin: center;
  cursor: grabbing;
}

#btn_display_correction, #submitButton, #btn_display_win_end_game{font-size: 1.4em;}
#submitButton:disabled{cursor:auto;opacity:0.6; filter:alpha(opacity=60);}


.textFrameBackground{background:rgba(255, 255, 255, 0.2); border-radius:20px}
.dragsStackBackground{background:rgba(255, 255, 255, 0.2); border-radius:20px}