/* CSS Document */

.back {margin-right : 5px;}
#game { max-width : 820px;margin : auto; position : relative;}
#ecran {   max-width: 200px; margin : auto;}
#ecran p {text-align: center;}
#cubes {    background-color : #FFF; /*background-size: cover;*/}

#ecran #cubes svg {width: 100%;}

#number {/*text-align : center; */font-size : 2.5em; margin : auto; width : 45%; margin-bottom : 5px; padding-bottom : 5px;
           border: 5px solid black; border-radius : 25px;
		   min-width : 170px;}
#controles {max-width : 800px; min-width : 300px; margin : auto; margin-top : 5px;display: -webkit-flex; display : flex;
              align-content: space-between; -webkit-align-content: space-between;}

#unites { display: -webkit-flex; display : flex; color : #890E26;  width:45%; 
             align-content: space-around; -webkit-align-content: space-around;
			 max-width : 400px;  border: 2px solid #890E26; /*background-color:red;*/
			 border-radius : 20px;
			 height : 50px;}
			 
#dizaines p, #unites p { width : 50%; max-width : 200px; font-size: 4em; text-align: center; /*padding-bottom: 15px;*/
                          height : 80px; 
						  -webkit-user-select: none;  /* Chrome all / Safari all */
						  -moz-user-select: none;     /* Firefox all */
						  -ms-user-select: none;      /* IE 10+ */
						   user-select: none;  
						  cursor: pointer;}
						  
	#dizaines p:first-child, #unites p:first-child { border-radius : 20px 0 0 20px; }
    #dizaines p:nth-child(2), #unites p:nth-child(2) {border-radius : 0 20px 20px 0; }

#dizaines svg, #unites svg { /*height : 60px;*/ 
						  -webkit-user-select: none;  /* Chrome all / Safari all */
						  -moz-user-select: none;     /* Firefox all */
						  -ms-user-select: none;      /* IE 10+ */
						   user-select: none;  
						  cursor: pointer;
						  }
						  
	#dizaines svg:first-child, #unites svg:first-child { border-radius : 20px 0 0 20px; }
    #dizaines svg:nth-child(2), #unites svg:nth-child(2) {border-radius : 0 20px 20px 0; }



	
#dizaines p:hover, #unites p:hover {  background-color : #DDD; }
#dizaines svg:hover, #unites svg:hover {  background-color : #DDD; }



#dizaines {display: -webkit-flex; display : flex; color : #293389; width:45%;
             align-content: space-around; -webkit-align-content: space-around; 
			 max-width : 400px; border: 2px solid #293389; /*background-color:blue;*/
			 border-radius : 20px; margin-right: 10%;
			 height: 50px;}

#cubes { /*border: 2px solid black;*/}			 
			 //game
.disparu {display: none;}
.invisible {visibility : hidden;}			 
			 
#btn_valider {width : 90%; background-color: #243D09; color: white; font-size: 3em; text-align:center;
              border-radius: 15px; font-family: "Nyala",Times New Roman, serif;
			  padding-top: 5px; padding-bottom: 5px;
			  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
			  cursor: pointer;  transition : border .5s; border:  1px solid #243D09;
			  margin-left : auto; margin-right : auto; margin-top: 20px;}


#btn_valider:hover { color: #243D09; /*border:  1px solid #243D09;*/ background-color: white;  }


#big_instructions { position: absolute; font-size : 3em; text-align: center; max-height: 262px;font-family: "Arvin", Times;
                    margin : auto; width : 70%; margin-left: -35%; left: 50%;}
#big_instructions span {color:  #FF9312;} 

#comment {  position: absolute; text-align: center; top : 320px; width : 150px;
            left : 50%; margin-left: -75px; font-size : 2em; }
    

.correct { border:  2px solid #243D09;    }

.neutral {  border:  2px solid black;}

.wrong {  border: 2px solid red ;     }
	
	
.correcttext { color: #243D09; }
.wrongtext {color : red;}	
	
.correctpic { background-image: url("../images/chatcubesgagne.gif");}

.neutralpic {background-image: url("../images/chatcubes.gif");}  

.wrongpic {background-image: url("../images/chatcubesperdu.gif");} 
	
@media screen and (min-width : 470px) {
	#ecran {   max-width: 300px;}
	#big_instructions { top : 80px;}
	#comment {top : 420px;}}

@media screen and (min-width : 570px) {
	#btn_valider {width : 60%; font-size : 3.5em;}
	#dizaines svg, #unites svg {height : initial;}
	#big_instructions { top : 200px;}
	#ecran {   max-width: 350px;}
	#comment {top : 490px;}
	#unites,#dizaines {height:60px;}
	#number {font-size : 3em;}
	}
	
@media screen and (min-width :690px) {
		#btn_valider  {padding-top: 10px; padding-bottom: 10px;width : 50%; }
		/*#game {border: 1px solid gray;} */
		#comment {top : 485px;}
	}
	
@media screen and (min-width : 850px) 	{ 			  

#btn_valider  {width : 420px;  }
#big_instructions { top : 250px;}
	/*#ecran {   max-width: 400px;} */
	#comment {top : 540px;}
	/*#unites,#dizaines {height:60px;} */
	#number {font-size : 5em;}
#unites,#dizaines {height:80px;}
#game {   border : 2px solid black; background-color: #FFF;}
body {background-color: #eff;}
#banner #logotext h1 {padding-top : 8px;}

}