/* Container et fond */
#jeu-5 div#container-jeu-5 {
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
}

#jeu-5 img#fond {
	width: 100%;	
}

#jeu-5 img#fondvertical{
	display: none;	
}

/* Plus petit que le standard de 980 (appareils et navigateurs) */
	@media only screen and (max-width: 959px) {
	#jeu-5 img#fond {
		display: none;
	}
	#jeu-5 img#fondvertical{
		display: block;
		width: 100%;
	}
}

/* les nombres*/
#jeu-5 div#container-jeu-5 div#container-image {
	width: 100%;
	position: relative;
}

/* Divs contenant les nombres et div contenant la valeur cible, sans instruction de placement */
#jeu-5 div#container-jeu-5 div#container-image div.jeu5nb, #jeu-5 div#container-jeu-5 div#container-image #jeu5val  {
	display: inline-block;
	position: absolute;
	background-size: contain;
	background-origin: border-box;
	width: 5vw;
	heigth: 5vw;
	min-height: 5vw;
	border-style: solid;
	border-color: black;
	border-width: 2px;
	text-align: center;
	text-decoration: blink;
	color: black;
	font-size: 5vw;
	line-height: 5vw;
	text-align: center;
	vertical-align: middle;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* Placement des divs contenant les nombres */
#jeu-5 div#container-jeu-5 div#container-image div#jeu5a {
	top: 8.3%;
	left: 16.5%;
	background-color: lightblue;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_bleue.png);
	}
#jeu-5 div#container-jeu-5 div#container-image div#jeu5b {
	top: 37.9%;
	left: 16.2%;
	background-color: lightblue;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_bleue.png);
	}
#jeu-5 div#container-jeu-5 div#container-image div#jeu5c {
	top: 77.6%;
	left: 15.5%;
	background-color: lightblue;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_bleue.png);
	}

#jeu-5 div#container-jeu-5 div#container-image div#jeu5d {
	top: 12.5%;
	left: 48.7%;
	background-color: yellow;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
	}

#jeu-5 div#container-jeu-5 div#container-image div#jeu5e {
	top: 35.9%;
	left: 44.7%;
	background-color: yellow;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
	}
#jeu-5 div#container-jeu-5 div#container-image div#jeu5f {
	top: 56.3%;
	left: 45.0%;
	background-color: yellow;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
	}
#jeu-5 div#container-jeu-5 div#container-image div#jeu5g {
	top: 77.35%;
	left: 46.3%;
	background-color: yellow;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
	}
#jeu-5 div#container-jeu-5 div#container-image div#jeu5h {
	top: 16.1%;
	left: 75.2%;
	background-color: red;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_rouge.png);
	} 

#jeu-5 div#container-jeu-5 div#container-image div#jeu5i {
	top: 47.3%;
	left: 76.6%;
	background-color: red;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_rouge.png);
	}
	
#jeu-5 div#container-jeu-5 div#container-image div#jeu5j {
	top: 70.7%;
	left: 75%;
	background-color: red;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_rouge.png);
	}

/* La valeur cible */
#jeu-5 div#container-jeu-5 div#container-image #jeu5val {
	top: 44.7%;
	left: 89.7%;
	background-color: white;
	border-width: 5px;
	}

/* Plus petit que le standard de 980 (appareils et navigateurs) */
	@media only screen and (max-width: 959px) {
	/* Divs contenant les nombres et div contenant la valeur cible, sans instruction de placement */
		#jeu-5 div#container-jeu-5 div#container-image div.jeu5nb, #jeu-5 div#container-jeu-5 div#container-image #jeu5val  {
		width: 12vw;
		heigth: 12vw;
		min-height: 12vw;
		font-size: 12vw;
		line-height: 12vw;
		}

	/* Placement des divs contenant les nombres */
	#jeu-5 div#container-jeu-5 div#container-image div#jeu5a {
		top: 15%;
		left: 15%;
		background-color: lightblue;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_bleue.png);
		}
	#jeu-5 div#container-jeu-5 div#container-image div#jeu5b {
		top: 8%;
		left: 40%;
		background-color: lightblue;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_bleue.png);
		}
	#jeu-5 div#container-jeu-5 div#container-image div#jeu5c {
		top: 15%;
		left: 65%;
		background-color: lightblue;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_bleue.png);
		}

	#jeu-5 div#container-jeu-5 div#container-image div#jeu5d {
		top: 45%;
		left: 10%;
		background-color: yellow;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
		}

	#jeu-5 div#container-jeu-5 div#container-image div#jeu5e {
		top: 40%;
		left: 30%;
		background-color: yellow;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
		}
	#jeu-5 div#container-jeu-5 div#container-image div#jeu5f {
		top: 35%;
		left: 55%;
		background-color: yellow;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
		}
	#jeu-5 div#container-jeu-5 div#container-image div#jeu5g {
		top: 45%;
		left: 75%;
		background-color: yellow;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_jaune.png);
		}
	#jeu-5 div#container-jeu-5 div#container-image div#jeu5h {
		top: 70%;
		left: 10%;
		background-color: red;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_rouge.png);
		} 

	#jeu-5 div#container-jeu-5 div#container-image div#jeu5i {
		top: 60%;
		left: 40%;
		background-color: red;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_rouge.png);
		}
	
	#jeu-5 div#container-jeu-5 div#container-image div#jeu5j {
		top: 75%;
		left: 65%;
		background-color: red;
		background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_rouge.png);
		}

	/* La valeur cible */
	#jeu-5 div#container-jeu-5 div#container-image #jeu5val {
		top: 83%;
		left: 40%;
		background-color: white;
		border-width: 5px;
		}
}

/* les boutons*/

#jeu-5 div#container-jeu-5 #jeu5commencer {
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/boutons/play.png);
	background-size: contain;
	background-origin: border-box;
	background-color: transparent;
	width: 5vw;
	heigth: 5vw;
	min-height: 5vw;
	border-width: 0;
}
#jeu-5 div#container-jeu-5 #jeu5fini{
	display: none;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/boutons/validation.png);
	background-size: contain;
	background-origin: border-box;
	background-color: transparent;
	width: 5vw;
	heigth: 5vw;
	min-height: 5vw;
	border-width: 0;
}
	
#jeu-5 div#container-jeu-5 #jeu5oups{
	display: none;
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/boutons/annuler.png);
	background-size: contain;
	background-origin: border-box;
	background-color: transparent;
	width: 5vw;
	heigth: 5vw;
	min-height: 5vw;
	border-width: 0;
	}

/* Plus petit que le standard de 980 (appareils et navigateurs) */
	@media only screen and (max-width: 959px) {
	
	#jeu-5 div#container-jeu-5 #jeu5commencer {
		width: 12vw;
		heigth: 12vw;
		min-height: 12vw;
		}
	#jeu-5 div#container-jeu-5 #jeu5fini{
		width: 12vw;
		heigth: 12vw;
		min-height: 12vw;
	}
	
	#jeu-5 div#container-jeu-5 #jeu5oups{
		width: 12vw;
		heigth: 12vw;
		min-height: 12vw;
		}
}

/* Validation des essais */
#jeu-5 div#container-jeu-5 div.essai {
	background-image: url(https://www.mathemagiques.org/data/uploads/jouer/au-debut/jeu-5/balle_verte.png);
	background-size: contain;
	background-origin: border-box;
	background-color: transparent;
	width: 3vw;
	heigth: 3vw;
	min-height: 3vw;	
}

#jeu-5 div#container-jeu-5 div#essai1 {
	display: none;	
}

#jeu-5 div#container-jeu-5 div#essai2 {
	display: none;	
}

#jeu-5 div#container-jeu-5 div#essai3 {
	display: none;	
}

#jeu-5 div#container-jeu-5 div#essai4 {
	display: none;	
}

/* Plus petit que le standard de 980 (appareils et navigateurs) */
	@media only screen and (max-width: 959px) {
	#jeu-5 div#container-jeu-5 div.essai {
		width: 7vw;
		heigth: 7vw;
		min-height: 7vw;
	}
}

/* Le calcul */

#jeu-5 div#container-jeu-5 div#jeu5lecalcul {
	display: block;
	position: relative;
	width: 100%;
	line-height: 5em;
	margin: 10px 0;
	font-size: 1vw;
}

#jeu-5 div#container-jeu-5 div#jeu5lecalcul  span.jeu5champcalcul {
	display: inline-block;
	width: 5vw;
	height: 5vw;
	vertical-align: middle;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	text-align: center;
	color:black;
	text-decoration: blink;
	font-size: 5vw;
	line-height: 5vw;
	text-align: center;
	vertical-align: center;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
	border-style: solid;
	border-width: 2px;
}

/* Plus petit que le standard de 980 (appareils et navigateurs) */
	@media only screen and (max-width: 959px) {
	#jeu-5 div#container-jeu-5 div#jeu5lecalcul  span.jeu5champcalcul {
		width: 7vw;
		height: 7vw;
		font-size: 7vw;
		line-height: 7vw;
		}
}

#jeu-5 div#container-jeu-5 div#jeu5lecalcul span#jeu5calcul1 {
	background-color: lightblue;
	}
#jeu-5 div#container-jeu-5 div#jeu5lecalcul span#jeu5calcul2 {
	background-color: yellow;
	}
#jeu-5 div#container-jeu-5 div#jeu5lecalcul span#jeu5calcul3 {
	background-color: red;
	}
#jeu-5 div#container-jeu-5 div#jeu5lecalcul span#jeu5somme {
	background-color: white;
	}

#jeu-5 div#container-jeu-5 div#jeu5lecalcul span.jeu5op {
	display: inline-block;
	width: 7%;
	vertical-align: middle;
	font-size: 5em;
	color: black;
}