.colorRouge {
	background-color: #d70101;
}
.colorRouge:hover, .colorRouge:focus, .colorRouge:active {
	background-color: #FF0000;
}
.colorBleu {
	background-color: #00a9e0;
}
.colorBleu:hover, .colorB:hover, .colorBleu:focus {
	background-color: #00c0ff;
}
.colorJaune {
	background-color: #f7dd00;
	color: #000000;
}
.colorJaune:hover, .colorJ:hover, .colorJaune:focus {
	background-color: #ffe400;
}
.colorBlanc {
	background-color: #f4f4f4;
	color: #000000;
}
.colorBlanc:hover, .colorW:hover, .colorBlanc:focus {
	background-color: #FFFFFF;
}
.colorNoir {
	background-color: #2d2d2d; 
}
.colorNoir:hover, .colorN:hover, .colorNoir:focus {
	background-color: #000000;
}
.colorVert {
	background-color: #29ae00; 
}
.colorVert:hover, .colorV:hover, .colorVert:focus {
	background-color: #30c701;
}


#module1 .fil {
	display: block;
	/* line-height: 25px; */
	/* height: 25px; */
	text-align: center;
	font-weight: bold;
	margin: 5px;
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
	transition: all .5s;
}
#module1 .fil.colorBlanc, #module1 .fil.colorJaune {
	color: #000000;
}

.cutme {
	/* font-size: 20px; */
	animation-name: cutme;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}

@keyframes cutme {
    0%, 100% { 
		color: #000000;
		text-shadow: 1px 1px #FFFFFF, -1px 1px #FFFFFF, 1px -1px #FFFFFF, -1px -1px #FFFFFF;
	}
	50% {
		color: #FFFFFF;
		text-shadow: 1px 1px #000000, -1px 1px #000000, 1px -1px #000000, -1px -1px #000000;
	}
}

#module1 p button {
	min-height: 50px;
}

#bouton {
	display: block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 50px;
	text-align: center;
	border: 2px solid brown;
	font-weight: bold;
	text-transform: uppercase;
	color: #000000;
	transition: all .3s;
}
#module2 #bouton.colorBleu, #module2 #bouton.colorRouge {
	color: #FFFFFF;
}


#module3 img {
	border: 3px solid black;
	margin: 3px;
	transition: all .3s;
}
#module3 input[type=checkbox] {
	display: none;
}	
#module3 input[type=checkbox]:checked + img {
	border-color: #29AE00;
}
button:disabled.enable {
	opacity: 1;
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
button {
	transition: .3s;
}

#pos {
	display: block;
	margin:auto;
}


#module4 div:nth-of-type(2) button {
	width: 70px;
}


.mod5span {
	display: inline-block;
	height: 23px;
	overflow: hidden;
	transition: all .3s;
	cursor: pointer;
}
#mod5word img {
	margin-bottom: 15px;
	border: 1px solid #000000;
}
#mod5list div strong {
	display: inline-block;
	width: 100px;
	text-align: center;
}
#mod5list span {
	cursor: default;
}
#mod5list span:nth-of-type(even) {
	background-color: #cacaca;
}
#mod5list span:nth-of-type(odd) {
	background-color: #f3f3f3;
}
#mod5list span:hover {
	background-color: #be8850;
}

.mod7glb {
	border: 1px solid #e8e8e8;
	padding: 5px;
	border-radius: 8px 20px 20px 8px;
	display: inline-block;
	margin: 3px;
}
.mod7suppr {
	background-color: #d70101;
	color: white;
	border-radius: 8px;
	font-weight: bold;
	font-size: 8px;
	padding: 5px;
	cursor: pointer;
}

button.Set {
	background-color: #d70101;
}

#module8 button {
	border: 2px solid white;
}

#module8 .couleur {
	display: inline-block;
	padding: 5px 15px;
	margin: 8px;
	border-radius: 25px;
}

#module8 .couleur.Blanc {
	background-color: #f4f4f4;
}
#module8 .couleur.Bleu {
	background-color: #00a9e0;
}
#module8 .couleur.Rouge{
	background-color: #d70101;
}
#module8 .couleur.Blanc.Bleu, #module8 .couleur.Bleu.Blanc {
	background: repeating-linear-gradient(
		45deg,
		#f4f4f4,
		#f4f4f4 10px,
		#00a9e0 10px,
		#00a9e0 20px
	);
}
#module8 .couleur.Blanc.Rouge, #module8 .couleur.Rouge.Blanc {
	background: repeating-linear-gradient(
		45deg,
		#f4f4f4,
		#f4f4f4 10px,
		#d70101 10px,
		#d70101 20px
	);
}
#module8 .couleur.Bleu.Rouge, #module8 .couleur.Rouge.Bleu {
	background: repeating-linear-gradient(
		45deg,
		#d70101,
		#d70101 10px,
		#00a9e0 10px,
		#00a9e0 20px
	);
}


#mod9couleur div, #mod9destination div {
	display: inline-block;
	width: 80px;
	height: 50px;
	text-align: center;
	border: 1px solid transparent;
	margin: 15px 25px;
	line-height: 50px;
}
#mod9destination div {
	border-color: black;
}
#module9 .result button {
	position: relative;
	padding-right: 30px;
	margin: 8px;
	border-radius: 10px 30px 30px 10px;
}
#module9 .result button::after {
	content: 'x';
	font-size: 10px;
	position: absolute;
	right: 10px;
	line-height: 50%;
	background-color: rgba(255,255,255,.5);
	border-radius: 3px;
	padding: 5px;
	text-shadow: none;
	color: black;
}


#grid {
	display: inline-block;
	border: 1px solid #000000;
}
.spot {
	cursor: pointer;
	opacity: 1;
	transition: all .3s;
}
.spot.mod10start {
	opacity: 1;
	width: 20px;
	height: 20px;
	margin: 7px;
}
.spot.mod10end {
	opacity: 1;
	margin: 7px;
	width: 20px;
	height: 20px;
}

.invisible {
	display: none;
}

.light, .star {
	display: none;
}
.light + span {
	content: 'a';
	vertical-align: middle;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 2px solid black;
	display: inline-block;
	cursor: pointer;
	transition: all .3s;
	background-color: #dcdcdc;
}
.light:checked + span {
	background-color: #ffd400;
}

.star + span {
	vertical-align: middle;
	width: 29px;
	height: 30px;
	display: inline-block;
	cursor: pointer;
	background: transparent url('Star_gris.png') center center no-repeat;
}
.star:checked + span {
	background-image: url('Star_jaune.png');
}


.askme {
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
    box-sizing: border-box;
    text-align: center;
	box-shadow: 0 0 100px 10px #000000;
	z-index: 10;
}

h1 {
	font-size: 0;
	background-image: url('logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 30.66%; /* (img-height / img-width * width) */
                /* (314 / 1024 * 100) */
}
h1 + div {
	display: none;
}
body {
	background-color: #222326;
	background-attachment: fixed;
}
/* #newbomb { */
	/* position: sticky; */
	/* top: 5px; */
	/* right: 5px; */
/* } */

.hamburger .hamburger__icon, 
.hamburger .hamburger__icon:before, 
.hamburger .hamburger__icon:after {
    background-color: red;
}
.hamburger.active .hamburger__icon:before, 
.hamburger.active .hamburger__icon:after {
    background-color: green;
}

#beta {
	border: 2px solid red;
	background-image: url('Hi-grey.png') ;
	background-position: right center ;
	background-repeat: no-repeat;
}
#beta a {
	color: red;
}

footer {
	text-align: center;
	margin-bottom: 10px;
}

footer a {
	color: grey;
	transition: all .3s;
}
footer a:hover {
	color: white;
}