/* GESTION DES COOKIES */
@keyframes go {
  from {
    opacity: 1;
    z-index: 99;
  }
  to {
    opacity: 0;
    z-index: -1;
  }
}
.cc-banner.cc-bottom.go {
  animation: go 1s 6s forwards;
}
.visited .cc-banner.cc-bottom {
  opacity: 0;
  z-index: -1;
}

/* PAGE */
html {
	font-size: 100%;
}

@font-face {
  	font-family: "NotoWOFF";
  	src: url("../fonts/Noto_SansExtraCond/notosans-extracondensed-webfont.woff") format("woff"),
    url("../fonts/Noto_SansExtraCond/NotoSans-ExtraCondensed.ttf") format("truetype");
		font-display: swap;
}
@font-face {
  	font-family: "FantasqueWOFF";
  	src: url("../fonts/fantasque_sans_mono/Webfonts/FantasqueSansMono-Regular.woff") format("woff"),
    url("../fonts/fantasque_sans_mono/FantasqueSansMono-Regular.ttf") format("truetype");
		font-display: swap;
}
@font-face {
  	font-family: "LibreFranklinTTF";
  	src: url("../fonts/libre-franklin/librefranklin-regular-webfont.woff2") format("woff2"),
    url("../fonts/libre-franklin/librefranklin-regular-webfont.woff") format("woff");
		font-display: swap;
}

body {
	background-size: 25%;
	background-image: url("../Images/no_index/mur_briques.jpg");
	font-family: "NotoWOFF", "Times New Roman", "Courier New", Arial, Verdana, sans-serif;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: baseline;
	justify-content: center;
}

/* Spécifications communes à l'ensemble de la page */

input[type=checkbox] {
	display: none;
}

label {
	cursor: pointer;
}

.barre {
	text-decoration: line-through;
}

.surligne {
	padding-left: 4rem;
	margin-left: -4rem;
	box-shadow: inset 0 -0.6em 0 0px #f8f005;
}

.surligne2 {
	padding-left: 0.5rem;
	margin-left: 0.5rem;
}

#sur1 {
	box-shadow: inset 0 -0.7em 0 0px rgba(255, 0, 0, 0.3);
}

#sur2 {
	box-shadow: inset 0 -0.7em 0 0px rgba(0, 0, 255, 0.3);
}

/* Spécifications particulières */

.clic {
	border-bottom: 1px dotted white;
}

	#croix2 {
		opacity: 0.7;
		z-index: 2;
		position: absolute;
		width: 13px;
		top: 2%;
		right: 0.5%;
	}

	#mention .clicroix {
		display: none;
		z-index: 3;
		position: absolute;
		width: 20px;
		top: 0;
		right: 0;
	}

		#formulaire:checked ~ #form {
			z-index: 8;
			opacity: 1;
		}

		#formulaire:checked ~ #mention {
			display: none;
		}

.contact {
	font-family: "LibreFranklinTTF";
	font-size: 13px;
	line-height: 1.3;
	overflow-y: scroll;
	background: white;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 0px grey, inset 0px 0px 5px 0px grey;
	padding: 2px 7px 2px 7px;
}

.contact .croix {
	z-index: 2;
	position: -webkit-sticky;
	position: sticky;
	width: 14px;
	top: 0;
	left: 98%;
}
.contact .clicroix {
	display: none;
}
#Site:checked ~ #entame {
	display: none;
}

.contact .form-mentions {
  font-size: 10px;
}

.interieur {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: space-around;
	width: 100%;
}

.php {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-content: flex-end;
	align-items: flex-end;
	justify-content: center;
}

	.php p {
		margin: 5px 0 0 0;
		width: 100%;
		text-align: right;
	}

	input[name=nom] {
		width: 70%;
	}

	input[name=email] {
		width: 65%;
	}

	textarea {
		width: 98%;
		height: 70px;
	}

#form {
	z-index: 5;
	position: absolute;
	bottom: 12vh;
	left: 25vw;
	width: 50vw;
	min-width: 475px;
	max-height: 85vh;
	opacity: 0;
	transition: all 0.00001s;
}

#form .bloc1 {
	width: 45%;
}

	#form .relecture {
		width: 70%;
	}

	#form .projet {
		width: 70%;
	}

#form .bloc2 {
	width: 45%;
}

	#form .nous {
		width: 85%;
	}

	#form .php {
		width: 100%;
	}

@media screen and (min-device-width: 1101px) and (max-width: 1100px) {
  #form .bloc1 {width: 95%;}
	  #form .relecture {width: 100%;
						margin: 5px;}
	  #form .projet {width: 100%;
					 margin: 5px;}
  #form .bloc2 {width: 95%;
				margin-top: 10px;}
	  #form .nous {width: 100%;
				   margin: 5px;}
	  #form .php {width: 90%;}
}
@media screen and (min-device-width: 1101px) and (max-width: 950px) {
  #form {left: 15vw;}
}
@media screen and (min-device-width: 1101px) and (max-width: 580px) {
  #form {left: 12vw;
		 width: 80vw;
		 min-width: 0;}
}

	#contact {
		display: none;
		opacity: 1;
		min-height: 26vw;
		max-height: 30.9vw;
		width: 55vw;
		bottom: 12.6vw;
		left: 23vw;
	}

		#contact .relecture, #contact .projet {
			width: 48%;
		}

@media screen and (min-device-width: 1101px) and (max-width: 1250px) {
  #contact {font-size: 11px;}
}
@media screen and (min-device-width: 1101px) and (max-width: 1100px) {
  #contact .relecture {width: 90%;
					   margin: 5px;}
  #contact .projet {width: 90%;
				    margin: 5px;}
  #contact .nous {width: 90%;
			      margin: 10px 5px 5px 5px;}
  #contact .php {width: 75%;}
}


/****** NOUVEAU FORMULAIRE ******/
#contactform {
  text-align: right;
}
#contactform .form-field {
  margin: 5px 0;
}
#contactform .captcha .form-data {
  display: flex;
  justify-content: flex-end;
}
#contactform .button {
  border: solid 1px grey;
  border-radius: 2px;
}

/********************************/

	.interrupteur2 {
		opacity: 1;
		position: absolute;
		z-index: 7;
		width: 5vw;
		left: 2vw;
		bottom: 12vw;
		-webkit-transform: scaleY(-1);
	  -moz-transform: scaleY(-1);
	  -o-transform: scaleY(-1);
	  transform: scaleY(-1);
	}

	@-webkit-keyframes neonclignote {
		from {box-shadow: 0px 0px 60px 20px #fe7530;}
		to {box-shadow: 0px 0px 110px 80px #fe7530;}
	}
	@keyframes neonclignote {
		from {box-shadow: 0px 0px 60px 20px #fe7530;}
		to {box-shadow: 0px 0px 110px 80px #fe7530;}
	}

	.neon {
		opacity: 1;
		border-radius: 50%;
		position: absolute;
		z-index: 7;
		height: 0.4vw;
		width: 0.01vw;
		left: 4.2vw;
		bottom: 14.45vw;
		box-shadow: 0px 0px 110px 80px #fe7530;
		transition: opacity 100000s, z-index 100000s;
		-webkit-animation: neonclignote 1.5s linear infinite alternate;
		animation: neonclignote 1.5s linear infinite alternate;
	}

	@-webkit-keyframes avant {
		from {z-index: 6;}
		to {z-index: 8;}
	}
	@keyframes avant {
		from {z-index: 6;}
		to {z-index: 8;}
	}

	.interrupteur1 {
		position: absolute;
		z-index: 6;
		height: 5vw;
		left: 2vw;
		bottom: 12vw;
		-webkit-transform: scaleY(-1);
		-moz-transform: scaleY(-1);
		-o-transform: scaleY(-1);
		transform: scaleY(-1);
		-webkit-animation: avant 0.01s 1 forwards;
		-webkit-animation-play-state: paused;
		animation: avant 0.01s 1 forwards;
		animation-play-state: paused;
	}

	.sombre {
		opacity: 0.95;
		position: absolute;
		z-index: 6;
		margin: 0 0 0 0;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		background: black;
		transition: opacity 7s, z-index 0.001s 4s;
	}

	.cachelapin {
		opacity: 1;
		position: absolute;
		z-index: 5;
		background-color: #0c0d0d;
		bottom: 2.9vw;
		left: 46vw;
		width: 13vw;
		height: 6vw;
		transition: z-index 0.0001s 5s, opacity 1s 4.5s;
	}

	.etageres {
		height: 30vw;
		position: absolute;
		bottom: 15vw;
		left: 9.5vw;
		z-index: 0;
		transition: all 1s;
	}

		.etageres:hover {
			z-index: 10;
			height: 38vw;
			bottom: 9vw;
			left: 0;
		}

@media screen and (min-device-width: 1101px) and (max-width: 1450px) {
  .etageres {bottom: 18vw;}
	  .etageres:hover {bottom: 12vw;}
}
@media screen and (min-device-width: 1101px) and (max-width: 1350px) {
  .etageres {bottom: 21vw;}
	  .etageres:hover {bottom: 15vw;}
}
@media screen and (min-device-width: 1101px) and (max-width: 1250px) {
  .etageres {bottom: 24vw;}
	  .etageres:hover {bottom: 18vw;}
}
@media screen and (min-device-width: 1101px) and (max-width: 1100px) {
  .etageres {bottom: 27vw;}
	  .etageres:hover {bottom: 21vw;}
}
@media screen and (min-device-width: 1101px) and (max-width: 950px) {
  .etageres {bottom: 30vw;}
	  .etageres:hover {bottom: 24vw;}
}

	.liste {
		height: 15vw;
		position: absolute;
		bottom: 16vw;
		right: 1vw;
		z-index: 0;
		transition: all 1s;
	}

		.liste:hover {
			z-index: 10;
			height: 25vw;
			bottom: 10vw;
		}

	.lampe1a {
		opacity: 0.5;
		height: 10.2vw;
		position: absolute;
		top: 0;
		left: 9vw;
		z-index: 6;
		transition: opacity 7s, z-index 0.001s 7s;
	}

	.lampe1b {
		opacity: 0.5;
		height: 7vw;
		position: absolute;
		top: 10.2vw;
		left: 8.6vw;
		z-index: 6;
		transition: z-index 0.001s 7s;
	}

	.lampe2a {
		opacity: 0.5;
		height: 9vw;
		position: absolute;
		top: 0;
		right: 10vw;
		z-index: 6;
		transition: opacity 7s, z-index 0.001s 7s;
	}

	.lampe2b {
		opacity: 0.5;
		height: 9vw;
		position: absolute;
		top: 9vw;
		right: 9.2vw;
		z-index: 6;
		transition: z-index 0.001s 7s;
	}

		#on_off47:checked ~ .neon {
			opacity: 0;
			z-index: -1;
			transition: opacity 0.00001s, z-index 0.00001s;
		}

		#on_off47:checked ~ .interrupteur1 {
			-webkit-animation-play-state: running;
			animation-play-state: running;
		}

		#on_off47:checked ~ .sombre {
			opacity: 0;
			z-index: -2;
		}

		#on_off47:checked ~ .cachelapin {
			opacity: 0;
			z-index: -1;
		}

		#on_off47:checked ~ .lampe1a {
			opacity: 1;
			z-index: 0;
		}

		#on_off47:checked ~ .lampe1b {
			z-index: 0;
		}

		#on_off47:checked ~ .lampe2a {
			opacity: 1;
			z-index: 0;
		}

		#on_off47:checked ~ .lampe2b {
			z-index: 0;
		}

		#on_off47:active ~ .interrupteur2 {
			opacity: 0;
			z-index: 0;
			transition: z-index 0.00000000001s, opacity 0.00000000001s;
		}

	.table {
		width: 100vw;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}

	.p6 {
		position: absolute;
		bottom: 2.8vw;
		right: 16%;
		height: 6vw;
		z-index: 1;
	}

	.ordi {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-around;
	}

		@-webkit-keyframes canardclignote {
			from {opacity: 1;}
			to {opacity: 0.1;}
		}
		@keyframes canardclignote {
			from {opacity: 1;}
			to {opacity: 0.1;}
		}

		.canardlapin {
			position: absolute;
			bottom: 3vw;
			left: 49vw;
			width: 5.7vw;
			z-index: 4;
			-webkit-animation: canardclignote 2s infinite alternate;
			animation: canardclignote 2s infinite alternate;
		}

		.cache2 {
			z-index: 3;
			position: absolute;
			bottom: 2.95vw;
			left: 47.3vw;
			border-bottom: 3.9vw solid #0c0d0d;
			border-left: 4.5vw solid transparent;
			border-right: 1vw solid transparent;
			width: 3vw;
		}

		.cache4 {
			opacity: 0;
			position: absolute;
			bottom: 7vw;
			left: 49.5%;
			width: 4vw;
			height: 2.5vw;
			z-index: 2;
			transition: z-index 0.00001s 5s;
		}

		@-webkit-keyframes vol1 {
			0% {transform: translate(0, 35vw);}
			100% {transform: translate(400%, 25vw);}
		}
		@keyframes vol1 {
			0% {transform: translate(0, 35vw);}
			100% {transform: translate(400%, 25vw);}
		}

		.avion1 {
			width: 35vw;
			position: absolute;
			left: -40vw;
			z-index: 10;
			-webkit-animation: vol1 2s 60s 1 linear;
			-webkit-animation-play-state: paused;
			animation: vol1 2s 60s 1 linear;
			animation-play-state: paused;
		}

		@-webkit-keyframes vol2 {
			0% {transform: translate(0, 5vw);}
			100% {transform: translate(500%, 25vw);}
		}
		@keyframes vol2 {
			0% {transform: translate(0, 5vw);}
			100% {transform: translate(500%, 25vw);}
		}

		.avion2 {
			width: 32vw;
			position: absolute;
			left: -35vw;
			z-index: 10;
			-webkit-animation: vol2 2s 115s 1 linear;
			-webkit-animation-play-state: paused;
			animation: vol2 2s 115s 1 linear;
			animation-play-state: paused;
		}

		@-webkit-keyframes clap1 {
			0% {opacity: 1;
				z-index: 2;
				bottom: 2vw;
				border-bottom: 7.5vw solid #0c0d0d;}
			99.9999% {opacity: 1;
				z-index: 2;}
			100% {opacity: 0;
				z-index: -1;
				bottom: 9.4vw;
				border-bottom: 0.1vw solid #0c0d0d;}
		}
		@keyframes clap1 {
			0% {opacity: 1;
				z-index: 2;
				bottom: 2vw;
				border-bottom: 7.5vw solid #0c0d0d;}
			99.9999% {opacity: 1;
				z-index: 2;}
			100% {opacity: 0;
				z-index: -1;
				bottom: 9.4vw;
				border-bottom: 0.1vw solid #0c0d0d;}
		}

		.clapet1 {
			opacity: 1;
			z-index: 2;
			position: absolute;
			bottom: 2vw;
			left: 8vw;
			border-bottom: 7.5vw solid #0c0d0d;
			border-left: 7vw solid transparent;
			border-right: 7vw solid transparent;
			border-radius: 10px/10px;
			width: 70vw;
			-webkit-animation: clap1 2s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: clap1 2s 1 forwards;
			animation-play-state: paused;
		}

		@-webkit-keyframes clap2 {
			0% {opacity: 1;
				z-index: 2;
				bottom: 1.9vw;
				border-bottom: 0.6vw solid #0c0d0d;
				width: 83.4vw;
				left: 8.3vw;
				border-radius: 30px/30px;}
			10% {border-bottom: 0.6vw solid #0c0d0d;}
			25% {border-radius: 3px/3px;}
			99.9999% {opacity: 1;
				z-index: 2;}
			100% {opacity: 0;
				z-index: -1;
				bottom: 8vw;
				border-bottom: 1.5vw solid #0c0d0d;
				width: 84vw;
				left: 8vw;
				border-radius: 3px/3px;}
		}
		@keyframes clap2 {
			0% {opacity: 1;
				z-index: 2;
				bottom: 1.9vw;
				border-bottom: 0.6vw solid #0c0d0d;
				width: 83.4vw;
				left: 8.3vw;
				border-radius: 30px/30px;}
			10% {border-bottom: 0.6vw solid #0c0d0d;}
			25% {border-radius: 3px/3px;}
			99.9999% {opacity: 1;
				z-index: 2;}
			100% {opacity: 0;
				z-index: -1;
				bottom: 8vw;
				border-bottom: 1.5vw solid #0c0d0d;
				width: 84vw;
				left: 8vw;
				border-radius: 3px/3px;}
		}

		.clapet2 {
			opacity: 1;
			z-index: 2;
			position: absolute;
			bottom: 1.9vw;
			left: 8.3vw;
			border-bottom: 0.6vw solid #0c0d0d;
			border-left: 0vw solid transparent;
			border-right: 0vw solid transparent;
			border-radius: 30px/30px;
			width: 83.4vw;
			-webkit-animation: clap2 2s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: clap2 2s 1 forwards;
			animation-play-state: paused;
		}

		@-webkit-keyframes clap3 {
			0% {opacity: 1;
				bottom: 8vw;
				left: 8vw;
				border-top: 1.5vw solid #0c0d0d;
				border-radius: 3px/3px;
				width: 84vw;}
			66.6666666% {border-top: 0vw solid #0c0d0d;}
			96.6666666% {bottom: 46vw;}
			100% {opacity: 1;
				bottom: 46vw;
				left: 15vw;
				border-top: 0vw solid #0c0d0d;
				border-radius: 5px/30px;
				width: 70vw;}
		}
		@keyframes clap3 {
			0% {opacity: 1;
				bottom: 8vw;
				left: 8vw;
				border-top: 1.5vw solid #0c0d0d;
				border-radius: 3px/3px;
				width: 84vw;}
			66.6666666% {border-top: 0vw solid #0c0d0d;}
			96.6666666% {bottom: 46vw;}
			100% {opacity: 1;
				bottom: 46vw;
				left: 15vw;
				border-top: 0vw solid #0c0d0d;
				border-radius: 5px/30px;
				width: 70vw;}
		}

		.clapet3 {
			opacity: 0;
			position: absolute;
			bottom: 8vw;
			left: 8vw;
			border-top: 1.5vw solid #0c0d0d;
			border-left: 0vw solid transparent;
			border-right: 0vw solid transparent;
			border-radius: 3px/3px;
			width: 84vw;
			-webkit-animation: clap3 3s 2s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: clap3 3s 2s 1 forwards;
			animation-play-state: paused;
		}

		@-webkit-keyframes clap4 {
			0% {opacity: 1;
				z-index: 2;
				bottom: 9.4vw;
				border-top: 0vw solid #0c0d0d;
				border-left: 7vw solid transparent;
				border-right: 7vw solid transparent;
				left: 8vw;
				border-radius: 3px/3px;}
			99.9999% {opacity: 1;
				z-index: 2;}
			100% {opacity: 0;
				z-index: -1;
				bottom: 9.5vw;
				border-top: 37.5vw solid #0c0d0d;
				border-left: 0vw solid transparent;
				border-right: 0vw solid transparent;
				left: 15vw;
				border-radius: 15px/15px;}
		}
		@keyframes clap4 {
			0% {opacity: 1;
				z-index: 2;
				bottom: 9.4vw;
				border-top: 0vw solid #0c0d0d;
				border-left: 7vw solid transparent;
				border-right: 7vw solid transparent;
				left: 8vw;
				border-radius: 3px/3px;}
			99.9999% {opacity: 1;
				z-index: 2;}
			100% {opacity: 0;
				z-index: -1;
				bottom: 9.5vw;
				border-top: 37.5vw solid #0c0d0d;
				border-left: 0vw solid transparent;
				border-right: 0vw solid transparent;
				left: 15vw;
				border-radius: 15px/15px;}
		}

		.clapet4 {
			opacity: 1;
			z-index: 2;
			position: absolute;
			bottom: 9.4vw;
			left: 8vw;
			border-top: 0vw solid #0c0d0d;
			border-left: 7vw solid transparent;
			border-right: 7vw solid transparent;
			border-radius: 3px/3px;
			width: 70vw;
			-webkit-animation: clap4 3s 2s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: clap4 3s 2s 1 forwards;
			animation-play-state: paused;
		}

			#on_off:checked ~ .cache4 {
				z-index: -1;
			}

			#on_off:checked ~ .cache2 {
				z-index: 4;
			}

			#on_off:checked ~ .avion1 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .avion2 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .clapet1 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .clapet2 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .clapet3 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .clapet4 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .blocnote {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .postit1 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .postit2 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .postit3 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .postit4 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .postit5 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .scotchdechire {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .ecran {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .noir {
				opacity: 1;
				z-index: 2;
			}

			#on_off:checked ~ .marchearret2 {
				-webkit-animation-play-state: running;
				animation-play-state: running;
			}

			#on_off:checked ~ .marchearret3 {
				opacity: 1;
			}

		.blocnotemobile {
			display: none;
		}

		@-webkit-keyframes bloc {
			0% {opacity: 0;
				z-index: -1;}
			100% {opacity: 1;
				z-index: 9;}
		}
		@keyframes bloc {
			0% {opacity: 0;
				z-index: -1;}
			100% {opacity: 1;
				z-index: 9;}
		}

		.blocnote {
			position: absolute;
			width: 17.5vw;
			height: 33vw;
			max-height: 528px;
			bottom: 11vw;
			left: 0;
			opacity: 0;
			z-index: -1;
			-webkit-animation: bloc 0.0000001s 5s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: bloc 0.0000001s 5s 1 forwards;
			animation-play-state: paused;
		}

			.carnet {
				width: 100%;
				height: 100%;
				position: relative;
				transform: rotate(1deg);
			}

			.postitgauche {
				font-family: "FantasqueWOFF";
				hyphens: auto;
				word-wrap: break-word;
				line-height: 1.4;
				width: 80%;
				height: 93%;
				overflow: hidden;
				position: absolute;
				transform: rotate(1deg);
				top: 0;
				left: 8%;
			}

				.com0 {
					line-height: 1.2;
				}

		@-webkit-keyframes post {
			0% {opacity: 0;
				z-index: -1;}
			100% {opacity: 1;
				  z-index: 2;}
		}
		@keyframes post {
			0% {opacity: 0;
				z-index: -1;}
			100% {opacity: 1;
				  z-index: 2;}
		}

		.postit1 {
			position: absolute;
			bottom: 40vw;
			right: 0.8%;
			width: 16vw;
			height: 3.5vw;
			max-height: 56px;
			z-index: -1;
			opacity: 0;
			-webkit-animation: post 0.00001s 6s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 6s 1 forwards;
			animation-play-state: paused;
		}

			.p1 {
				width: 100%;
				height: 100%;
				transform: rotate(-3deg);
			}

			.postitdroite1 {
				font-family: "FantasqueWOFF";
				text-align: center;
				width: 100%;
				height: 100%;
				position: inherit;
				transform: rotate(-3deg);
				top: 0;
				right: 1%;
			}

		.postit2 {
			position: absolute;
			bottom: 36.5vw;
			right: 0.8%;
			width: 16vw;
			height: 3.5vw;
			max-height: 56px;
			z-index: -1;
			opacity: 0;
			-webkit-animation: post 0.00001s 6.5s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 6.5s 1 forwards;
			animation-play-state: paused;
		}

			.p2 {
				width: 100%;
				height: 100%;
				transform: rotate(2deg);
			}

			.postitdroite2 {
				font-family: "FantasqueWOFF";
				text-align: center;
				width: 100%;
				height: 100%;
				position: inherit;
				transform: rotate(2deg);
				top: 0;
				right: 1%;
			}

		.postit3 {
			position: absolute;
			bottom: 33vw;
			right: 0.8%;
			width: 16vw;
			height: 3.5vw;
			max-height: 56px;
			z-index: -1;
			opacity: 0;
			-webkit-animation: post 0.00001s 7s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 7s 1 forwards;
			animation-play-state: paused;
		}

			.p3 {
				width: 100%;
				height: 100%;
				transform: rotate(-3deg);
			}

			.postitdroite3 {
				font-family: "FantasqueWOFF";
				text-align: center;
				width: 98%;
				height: 100%;
				position: inherit;
				transform: rotate(-3deg);
				top: 0;
				right: 1%;
			}

		.postit4 {
			position: absolute;
			bottom: 28.7vw;
			right: 0.8%;
			width: 16vw;
			height: 4vw;
			max-height: 64px;
			z-index: -1;
			opacity: 0;
			-webkit-animation: post 0.00001s 7.5s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 7.5s 1 forwards;
			animation-play-state: paused;
		}

			.p4 {
				width: 100%;
				height: 100%;
				transform: rotate(-1deg);
			}

			.postitdroite4 {
				font-family: "FantasqueWOFF";
				text-align: center;
				width: 100%;
				height: 100%;
				position: inherit;
				transform: rotate(-1deg);
				top: 0;
				right: 1%;
			}

		.postit5 {
			position: absolute;
			bottom: 19.5vw;
			right: 0.8%;
			width: 16vw;
			height: 9.2vw;
			max-height: 148px;
			z-index: -1;
			opacity: 0;
			-webkit-animation: post 0.00001s 8s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 8s 1 forwards;
			animation-play-state: paused;
		}

			.p5 {
				width: 100%;
				height: 100%;
				transform: rotate(1deg);
			}

			.postitdroite5 {
				font-family: "FantasqueWOFF";
				text-align: center;
				width: 98%;
				height: 100%;
				overflow: hidden;
				position: inherit;
				transform: rotate(1deg);
				top: 0;
				right: 1%;
			}

		.scotchdechire {
			opacity: 0;
			width: 8vw;
			height: 2.7vw;
			position: absolute;
			bottom: 44.2vw;
			left: 45%;
			z-index: -1;
			-webkit-animation: post 0.00001s 5s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 5s 1 forwards;
			animation-play-state: paused;
		}

			.scotch {
				width: 65%;
				height: 80%;
				background: #4c4b47;
				transform: rotate(1deg);
				position: absolute;
				top: 10%;
				left: 22%;
			}

			.dechgauche1 {
				border-top: 0.4vw solid transparent;
				border-left: 1vw solid #0c0d0d;
				border-bottom: 0.4vw solid transparent;
				position: absolute;
				top: 10%;
				left: 20%;
				transform: rotate(-10deg);
			}

			.dechgauche2 {
				border-top: 0.5vw solid transparent;
				border-left: 1vw solid #0c0d0d;
				border-bottom: 0.6vw solid transparent;
				position: absolute;
				top: 40%;
				left: 20%;
				transform: rotate(10deg);
			}

			.dechgauche3 {
				border-top: 0.3vw solid transparent;
				border-right: 0.9vw solid #0c0d0d;
				border-bottom: 0.8vw solid transparent;
				position: absolute;
				top: 70%;
				left: 16%;
				transform: rotate(-25deg);
			}

			.dechdroite1 {
				border-top: 0.7vw solid transparent;
				border-right: 1vw solid #0c0d0d;
				border-bottom: 0.5vw solid transparent;
				position: absolute;
				top: 10%;
				left: 79%;
				transform: rotate(-10deg);
			}

			.dechdroite2 {
				border-top: 0.7vw solid transparent;
				border-right: 1.3vw solid #0c0d0d;
				border-bottom: 0.5vw solid transparent;
				position: absolute;
				top: 35%;
				left: 78%;
				transform: rotate(10deg);
			}

			.dechdroite3 {
				border-top: 0.5vw solid transparent;
				border-right: 0.8vw solid #0c0d0d;
				border-bottom: 1vw solid transparent;
				position: absolute;
				top: 61%;
				left: 84%;
				transform: rotate(-70deg);
			}

		@-webkit-keyframes maj {
			0% {left: -20vw;}
			100% {left: 68vw;}
		}
		@keyframes maj {
			0% {left: -20vw;}
			100% {left: 68vw;}
		}

		.maj {
			z-index: 2;
			width: 15vw;
			position: absolute;
			bottom: 12.5vw;
			left: -20vw;
			transition: z-index 240s;
			-webkit-animation: maj 0.00001s 9s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: maj 0.00001s 9s 1 forwards;
			animation-play-state: paused;
		}

			.maj:active {
				z-index: -1;
				transition: z-index 0.00001s;
			}

		@-webkit-keyframes prom {
			0% {left: -40vw;}
			0.000001% {left: 35vw;}
			99.99999% {left: 35vw;}
			100% {left: -40vw;}
		}
		@keyframes prom {
			0% {left: -40vw;}
			0.000001% {left: 35vw;}
			99.99999% {left: 35vw;}
			100% {left: -40vw;}
		}

		.promo {
			position: absolute;
			bottom: 17vw;
			width: 32vw;
			left: -40vw;
			z-index: 2;
			-webkit-animation: prom 15s 240s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: prom 15s 240s 1 forwards;
			animation-play-state: paused;
		}

		.ici {
			text-align: center;
			position: absolute;
			bottom: 18vw;
			height: 1.5vw;
			width: 6vw;
			border: none;
			padding: 6px 0 6px 0;
			border-radius: 2px;
			box-shadow: 3px 3px 12px #999;
			background: #fff;
			font: bold 0.8vw Arial;
			color: #555;
		}

		.ici p {
			position: relative;
			bottom: 40%;
		}

		@-webkit-keyframes ici {
			0% {transform: translate(0, 0);}
			0.000001% {transform: translate(80vw, 0);}
			99.99999% {transform: translate(80vw, 0);}
			100% {transform: translate(0, 0);}
		}
		@keyframes ici {
			0% {transform: translate(0, 0);}
			0.000001% {transform: translate(80vw, 0);}
			99.99999% {transform: translate(80vw, 0);}
			100% {transform: translate(0, 0);}
		}

		#ici1 {
			opacity: 1;
			z-index: 2;
			left: -44vw;
			transition: opacity 1000000s, z-index 1000000s;
			-webkit-animation: ici 15s 240s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: ici 15s 240s 1 forwards;
			animation-play-state: paused;
		}

		#ici2 {
			opacity: 1;
			z-index: 2;
			left: -31.5vw;
			transition: opacity 1000000s, z-index 1000000s;
			-webkit-animation: ici 15s 240s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: ici 15s 240s 1 forwards;
			animation-play-state: paused;
		}

		#ici3 {
			opacity: 1;
			z-index: 2;
			left: -20vw;
			transition: opacity 1000000s, z-index 1000000s;
			-webkit-animation: ici 15s 240s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: ici 15s 240s 1 forwards;
			animation-play-state: paused;
		}

			#ici1:hover {
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s, z-index 0.00001s;
			}

			#ici2:hover {
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s, z-index 0.00001s;
			}

			#ici3:hover {
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s, z-index 0.00001s;
			}

		.tache2 {
			opacity: 0;
			z-index: -1;
			width: 3vw;
			position: absolute;
			left: 17.5vw;
			bottom: 41vw;
			-webkit-animation: post 0.00001s 15s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 15s 1 forwards;
			animation-play-state: paused;
		}

		.tache3 {
			opacity: 0;
			z-index: -1;
			width: 3vw;
			position: absolute;
			left: 17.5vw;
			bottom: 13vw;
			-webkit-animation: post 0.00001s 20s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: post 0.00001s 20s 1 forwards;
			animation-play-state: paused;
		}

		@-webkit-keyframes ecran {
			0% {opacity: 0;
				z-index: -1;}
			100% {opacity: 1;
				  z-index: 1;}
		}
		@keyframes ecran {
			0% {opacity: 0;
				z-index: -1;}
			100% {opacity: 1;
				  z-index: 1;}
		}

		.mobile {
			display: none;
		}

		.ecran {
			z-index: -1;
			opacity: 0;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
			webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: space-around;
			width: 66vw;
			height: 31.5vw;
			position: absolute;
			bottom: 9.5vw;
			border-style: solid;
			border-color: #0c0d0d;
			border-width: 3vw 2vw 3vw 2vw;
			border-radius: 15px/15px;
			overflow-y: scroll;
			overflow-x: hidden;
			background-color: #e3e3dd;
			-webkit-animation: ecran 0.00001s 5s 1 forwards;
			-webkit-animation-play-state: paused;
			animation: ecran 0.00001s 5s 1 forwards;
			animation-play-state: paused;
		}

			.onglet1 {
				z-index: 2;
				height: 2.5vw;
				position: fixed;
				left: 17.4vw;
				bottom: 37.5vw;
				transition: all 0.3s;
			}

				.onglet1:hover {
					height: 4vw;
					bottom: 36.5vw;
				}

			.onglet2 {
				z-index: 2;
				height: 3vw;
				position: fixed;
				left: 17.4vw;
				bottom: 32vw;
				transition: all 0.3s;
			}

			.menu2 {
				z-index: 2;
				font-size: 0.75vw;
				line-height: 0.85;
				text-align: center;
				height: 0.8vw;
				position: fixed;
				left: 18.1vw;
				bottom: 30.2vw;
				transition: all 0.3s;
			}

				.onglet2:hover {
					height: 5vw;
					bottom: 31vw;
				}
				.onglet2:hover ~ .menu2 {
					font-size: 1vw;
					height: 2.5vw;
					bottom: 27.5vw;
					left: 18.9vw;
				}
				#Robin_Birge:target {
					display: block;
				}

			.onglet3 {
				z-index: 2;
				height: 3vw;
				position: fixed;
				left: 17.4vw;
				bottom: 25vw;
				transition: all 0.3s;
			}

			.menu3 {
				z-index: 2;
				font-size: 0.75vw;
				line-height: 0.85;
				text-align: center;
				height: 0.8vw;
				position: fixed;
				left: 18.1vw;
				bottom: 23.2vw;
				transition: all 0.3s;
			}

				.onglet3:hover {
					height: 5vw;
					bottom: 24vw;
				}
				.onglet3:hover ~ .menu3 {
					font-size: 1vw;
					height: 2.5vw;
					bottom: 20.5vw;
					left: 18.8vw;
				}
				#Jordan_Guiz:target {
					display: block;
				}

			.onglet4 {
				z-index: 2;
				height: 2vw;
				position: fixed;
				left: 17.6vw;
				bottom: 19vw;
				transition: all 0.3s;
			}

			.menu4 {
				z-index: 2;
				font-size: 0.65vw;
				line-height: 0.85;
				height: 0.8vw;
				position: fixed;
				left: 17.3vw;
				bottom: 17.2vw;
				transition: all 0.3s;
			}

				.onglet4:hover {
					height: 3vw;
					bottom: 18.5vw;
				}
				.onglet4:hover ~ .menu4 {
					font-size: 1vw;
					height: 1vw;
					bottom: 16.2vw;
					left: 17.2vw;
				}
				#contact:target {
					display: block;
					z-index: 2;
					position: fixed;
				}

			article {
				margin: 1% 0% 0% 3%;
				padding: 2% 4% 2% 4%;
				width: 43%;
				position: absolute;
				left: 0;
				background-color: #fdfcf5;
				box-shadow: 0px 0px 10px 0px grey;
				line-height: 1.4;
			}

				#iphone {display: none;}

				#intro2 {
					display: none;
				}

				.com {
					border-bottom: 1px dotted;
				}

			.comment {
				word-wrap: break-word;
				display: none;
				line-height: 1.5;
				margin: 0% 0% 0% 0%;
				padding: 0% 0% 0% 0%;
				width: 27.8vw;
				height: 31vw;
				position: fixed;
				right: 18.5vw;
				bottom: 13vw;
			}

				.mark {
					background-color: #b3c5d4;
				}

				.mark2 {
					background-color: #c6ed70;
				}

			.bioGC {
				display: none;
				position: absolute;
				width: 40vw;
				height: 35vw;
				bottom: 0.5vw;
				right: 5vw;
			}

				.macaron {
					height: 2em;
					float: left;
				}
					#biovoltaire .macaron {
						margin-top: 0.5em;
					}
					.relecture .macaron {
						margin-right: 0.5em;
					}

				#prezGC h2 a, .contact .relecture a[title='Authentification Voltaire'] {
					color: #686464;
					text-decoration: none;
					font-size: 90%;
					margin-left: 0.5em;
				}

			.bioNain {
				display: none;
				position: absolute;
				width: 40vw;
				height: 35vw;
				bottom: 0;
				left: 5vw;
			}

				.croix {
					z-index: 2;
					position: absolute;
					width: 2.5%;
					top: 13.5%;
					right: 21%;
				}

				.clicroix {display: none;
					z-index: 3;
				}

				.fenetre {
					position: absolute;
					width: 100%;
					height: 100%;
				}

				.ciel {
					position: absolute;
					width: 49%;
					height: 66%;
					top: 17%;
					left: 26%;
				}

				.bio {
					padding: 1% 2% 0% 2%;
					text-align: left;
					position: absolute;
					width: 45%;
					height: 64.9%;
					top: 17%;
					left: 26%;
					overflow-y: scroll;
					overflow-x: hidden;
				}

					h1 {
						font-size: 1.25em;
						text-align: center;
						line-height: 1;
					}

					h2 {
						font-size: 1em;
						font-weight: normal;
						text-align: center;
					}

				a {
					color: black;
				}

			@-webkit-keyframes noir {
				0% {left: 16.9vw;}
				100% {left: -150vw;}
			}
			@keyframes noir {
				0% {left: 16.9vw;}
				100% {left: -150vw;}
			}

			.noir {
				opacity: 0;
				background-color: black;
				height: 31.7vw;
				width: 66.2vw;
				position: absolute;
				bottom: 12.4vw;
				left: 16.9vw;
				z-index: -1;
				transition: opacity 0.00000001s 4.8s, z-index 0.00000001s 4.8s;
				-webkit-animation: noir 0.00001s 7s 1 forwards;
				-webkit-animation-play-state: paused;
				animation: noir 0.00001s 7s 1 forwards;
				animation-play-state: paused;
			}

			@-webkit-keyframes fulloptimise {
				0% {opacity: 0; z-index: -1;}
				0.0000001% {opacity: 1; z-index: 3;}
				20% {opacity: 0.3; z-index: 3;}
				40% {opacity: 1; z-index: 3;}
				60% {opacity: 0.3; z-index: 3;}
				80% {opacity: 1; z-index: 3;}
				99.999999% {opacity: 0.3; z-index: 3;}
				100% {opacity: 0; z-index: -1;}
			}
			@keyframes fulloptimise {
				0% {opacity: 0; z-index: -1;}
				0.0000001% {opacity: 1; z-index: 3;}
				20% {opacity: 0.3; z-index: 3;}
				40% {opacity: 1; z-index: 3;}
				60% {opacity: 0.3; z-index: 3;}
				80% {opacity: 1; z-index: 3;}
				99.999999% {opacity: 0.3; z-index: 3;}
				100% {opacity: 0; z-index: -1;}
			}

			#fullcss {
				font-size: 1.4vw;
				color: grey;
				position: absolute;
				bottom: 25vw;
				left: 60vw;
				opacity: 0;
				z-index: -1;
				-webkit-animation: fulloptimise 7s 1 linear forwards;
				-webkit-animation-play-state: paused;
				animation: fulloptimise 7s 1 linear forwards;
				animation-play-state: paused;
			}

			#optimise {
				font-size: 1.4vw;
				color: grey;
				position: absolute;
				bottom: 12.5vw;
				left: 19vw;
				opacity: 0;
				z-index: -1;
				-webkit-animation: fulloptimise 7s 0.7s 1 linear forwards;
				-webkit-animation-play-state: paused;
				animation: fulloptimise 7s 0.7s 1 linear forwards;
				animation-play-state: paused;
			}

			@-webkit-keyframes veille {
				0% {left: -100vw;}
				100% {left: 16.9vw;}
			}
			@keyframes veille {
				0% {left: -100vw;}
				100% {left: 16.9vw;}
			}

			.veille {
				opacity: 1;
				z-index: 3;
				height: 31.7vw;
				width: 66.2vw;
				position: absolute;
				bottom: 12.4vw;
				left: -100vw;
				transition: opacity 10000000s, z-index 10000000s;
				-webkit-animation: veille 0.00001s 420s 1 forwards;
				-webkit-animation-play-state: paused;
				animation: veille 0.00001s 420s 1 forwards;
				animation-play-state: paused;
			}

				.veille:active {
					opacity: 0;
					z-index: -1;
					transition: opacity 0.0000001s, z-index 0.0000001s;
				}

			.charge1 {
				position: absolute;
				bottom: 18vw;
				left: 40vw;
				height: 20vw;
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s, z-index 0.00001s, left 0.00001s 1s;
			}

			.charge2 {
				position: absolute;
				bottom: 18vw;
				left: 40vw;
				height: 20vw;
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s 1s, z-index 0.00001s 1s, left 0.00001s 2s;
			}

			.charge3 {
				position: absolute;
				bottom: 18vw;
				left: 40vw;
				height: 20vw;
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s 2s, z-index 0.00001s 2s, left 0.00001s 3s;
			}

			.charge4 {
				position: absolute;
				bottom: 18vw;
				left: 40vw;
				height: 20vw;
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s 3s, z-index 0.00001s 3s,left 0.00001s 4s;
			}

			.charge5 {
				position: absolute;
				bottom: 18vw;
				left: 40vw;
				height: 20vw;
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s 4s, z-index 0.00001s 4s,left 0.00001s 5s;
			}

			.charge6 {
				position: absolute;
				bottom: 18vw;
				left: 40vw;
				height: 20vw;
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s 5s, z-index 0.00001s 5s,left 0.00001s 6s;
			}

			.charge7 {
				position: absolute;
				bottom: 18vw;
				left: 40vw;
				height: 20vw;
				opacity: 0;
				z-index: -1;
				transition: opacity 0.00001s 6s, z-index 0.00001s 6s,left 0.00001s 7s;
			}

			@-webkit-keyframes touches {
				0% {transform: translate(0, 0);}
				100% {transform: translate(49.4vw, 0);}
			}
			@keyframes touches {
				0% {transform: translate(0, 0);}
				100% {transform: translate(49.4vw, 0);}
			}

			.touches2 {
				height: 6.3vw;
				z-index: 1;
				position: absolute;
				bottom: 2.7vw;
				left: -35vw;
				opacity: 0;
				transition: opacity 10s 7.5s;
				-webkit-animation: touches 0.00000001s 7.5s 1 forwards;
				-webkit-animation-play-state: paused;
				animation: touches 0.00000001s 7.5s 1 forwards;
				animation-play-state: paused;
			}

			.marchearret2 {
				opacity: 1;
				position: absolute;
				bottom: 8.1vw;
				left: 50%;
				width: 2.5vw;
				height: 1vw;
				z-index: 1;
			}

				.bouton2 {
					width: 2.5vw;
					height: 1vw;
					position: absolute;
					top: 0;
					left: 0;
					background: transparent;
					border-style: solid;
					border-color: #ffffff;
					border-radius: 2.5vw/1.25vw;
					box-shadow: 0px 0px 2px 0px #ffffff;
				}

				.boutonpoint2 {
					width: 0.4vw;
					height: 0;
					border-style: solid;
					border-color: #ffffff;
					border-radius: 3.12vw/1.87vw;
					box-shadow: 0px 0px 2px 0px #ffffff;
					position: absolute;
					top: 48%;
					left: 42.5%;
				}

			.marchearret3 {
				opacity: 0;
				position: absolute;
				bottom: 8.1vw;
				left: 50%;
				width: 2.5vw;
				height: 1vw;
				z-index: 1;
				transition: z-index 0.00001s, opacity 0.00001s 5s;
			}

				@-webkit-keyframes luit {
					from {box-shadow: 0px 0px 0.31vw 0.19vw #ffffff, inset 0px 0px 0.31vw 0.12vw #ffffff;}
					to {box-shadow: 0px 0px 0px 0px #ffffff, inset 0px 0px 0px 0px #ffffff;}
				}
				@keyframes luit {
					from {box-shadow: 0px 0px 0.31vw 0.19vw #ffffff, inset 0px 0px 0.31vw 0.12vw #ffffff;}
					to {box-shadow: 0px 0px 0px 0px #ffffff, inset 0px 0px 0px 0px #ffffff;}
				}

				.bouton3 {
					width: 2.5vw;
					height: 1vw;
					position: absolute;
					top: 0;
					left: 0;
					background: transparent;
					border-style: solid;
					border-color: #ffffff;
					border-radius: 2.5vw/1.25vw;
					box-shadow: 0px 0px 2px 0px #ffffff;
					-webkit-animation: luit 1.5s linear infinite alternate;
					animation: luit 1.5s linear infinite alternate;
				}

				.boutonpoint3 {
					width: 0.4vw;
					height: 0;
					border-style: solid;
					border-color: #ffffff;
					border-radius: 3.12vw/1.87vw;
					box-shadow: 0px 0px 2px 0px #ffffff;
					position: absolute;
					top: 48%;
					left: 42.5%;
					-webkit-animation: luit 1.5s linear infinite alternate;
					animation: luit 1.5s linear alternate;
				}

			.cache3 {
				opacity: 0;
				position: absolute;
				bottom: 7vw;
				left: 50%;
				width: 3vw;
				height: 2vw;
				z-index: 0;
				transition: z-index 0.00001s;
			}

		.clavier {
			border-bottom: 7.5vw solid #0c0d0d;
			border-left: 7vw solid transparent;
			border-right: 7vw solid transparent;
			width: 70vw;
			position: absolute;
			bottom: 1.9vw;
			border-radius: 15px/30px;
		}

			#ombrage {
				opacity: 1;
				z-index: 3;
				position: absolute;
				bottom: 1.9vw;
				border-radius: 0px 0px 20px 20px/0px 0px 30px 30px;
				width: 83.4vw;
				height: 0.5vw;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1c1c1c+18,595959+36,595959+36,474747+38,2c2c2c+41,2c2c2c+41,111111+49,2b2b2b+55,131313+87 */
				background: #1c1c1c; /* Old browsers */
				background: linear-gradient(to bottom,  #1c1c1c 18%,#595959 36%,#595959 36%,#474747 38%,#2c2c2c 41%,#2c2c2c 41%,#111111 49%,#2b2b2b 55%,#131313 87%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			}

			.touches1 {
				height: 6.3vw;
				position: absolute;
				top: 0.3vw;
				left: -0.6vw;
			}

			.marchearret {
				opacity: 0;
				position: absolute;
				top: 0.4vw;
				left: 50%;
				width: 2.5vw;
				height: 1vw;
				z-index: 1;
			}

				#on_off46:checked ~ #contact {
					display: block;
				}

				#on_off46:checked ~ .marchearret3 {
					z-index: -1;
				}

				#on_off46:checked ~ .cache3 {
					z-index: 3;
				}

				#on_off46:checked ~ .veille {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ .noir {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ #fullcss {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ #optimise {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ .charge1 {
					opacity: 1;
					z-index: 2;
					left: -100vw;
				}

				#on_off46:checked ~ .charge2 {
					opacity: 1;
					z-index: 2;
					left: -100vw;
				}

				#on_off46:checked ~ .charge3 {
					opacity: 1;
					z-index: 2;
					left: -100vw;
				}

				#on_off46:checked ~ .charge4 {
					opacity: 1;
					z-index: 2;
					left: -100vw;
				}

				#on_off46:checked ~ .charge5 {
					opacity: 1;
					z-index: 2;
					left: -100vw;
				}

				#on_off46:checked ~ .charge6 {
					opacity: 1;
					z-index: 2;
					left: -100vw;
				}

				#on_off46:checked ~ .charge7 {
					opacity: 1;
					z-index: 2;
					left: -100vw;
				}

				#on_off46:checked ~ .touches2 {
					opacity: 1;
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ .maj {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ .promo {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ #ici1 {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ #ici2 {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ #ici3 {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ .tache2 {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}

				#on_off46:checked ~ .tache3 {
					-webkit-animation-play-state: running;
					animation-play-state: running;
				}


@media screen and (min-device-width: 1101px) and (min-width: 1601px) {
  .postitdroite1 {font-size: 14px;}
  .postitdroite2 {font-size: 14px;}
  .postitdroite3 {font-size: 13.5px;}
  .postitdroite4 {font-size: 13.5px;}
  .postitdroite5 {font-size: 12px;}
  .postitgauche {font-size: 15px;}
  .com0 {font-size: 12px;}
  .intro {font: italic 13.5px courier;
		  text-align: center;
		  line-height: 1;}
  article {font-size: 20.8px;}
  .comment {font-size: 15px;}
  #c4 {font-size: 14px;}
  .bio {font-size: 15px;}
  .petit {font-size: 13.5px;}
  .insert {font-size: 17.5px;}
}

@media screen and (min-device-width: 1101px) and (max-width: 1600px) {
  .postitdroite1 {font-size: 0.85vw;}
  .postitdroite2 {font-size: 0.85vw;}
  .postitdroite3 {font-size: 0.8vw;}
  .postitdroite4 {font-size: 0.8vw;}
  .postitdroite5 {font-size: 0.7vw;}
  .postitgauche {font-size: 0.95vw;}
  .com0 {font-size: 0.7vw;}
  .intro {font: italic 0.8vw courier;
		  text-align: center;
		  line-height: 1;}
  article {font-size: 1.3vw;}
  .comment {font-size: 1vw;}
  .bio {font-size: 1vw;}
  .petit {font-size: 0.8vw;}
  .insert {font-size: 1.1vw;}
}

@media screen and (max-device-width: 1100px) {
	body {background: none;}

.sombre, .cachelapin, .etageres, .liste, .lampe1a, .lampe1b, .lampe2a, .lampe2b, .interrupteur1,
.interrupteur2, .neon, .table, .p6, .canardlapin, .cache2, .avion1, .avion2, .clapet1, .clapet2, .clapet3,.clapet4,
.scotchdechire, .menu2, .menu3, .menu4, .tache2, .tache3, .maj, .promo, .ici, #intro1, .noir, .veille, .charge1,
.charge2, .charge3, .charge4, .charge5, .charge6, .charge7, .touches2, .marchearret2, .marchearret3, .clavier,
#ombrage {display: none;}
	.com0 {font-size: 10px;}
	.intro {font: italic 1.9vmax courier;
			text-align: center;
			line-height: 1;}
	.comment {font-size: 2vmax;}
	.bio {font-size: 1vmax;}
	.petit {font-size: 0.8vmax;}
	.insert {font-size: 2vmax;}
	h1 {font-size: 2.5vmax;}
	.bio {font-size: 2vmax;}
	.petit {font-size: 1.5vmax;}
	#intro2 {display: inline-block;}
	.mobile {display: block;
			 z-index: 2;
			 background: #d0d1d3;
			 width: 6vmax;
			 height: 1vmax;
			 border-radius: 5px/5px;
			 position: absolute;
			 top: 3vh;
			 left: 45vw;}
	.blocnotemobile {display: block;
					 font-size: 13px;
					 position: absolute;
					 width: 260px;
					 height: 450px;
					 top: 3vh;
					 left: 15vw;
					 z-index: 2;
					 transition: z-index 10000000s;}
		#carnet2 {transform: rotate(-10deg)}
		#post2 {transform: rotate(-10deg)}
		.blocnotemobile:hover {z-index: -1;
							   transition: z-index 0.00001s;}
	.blocnote {font-size: 0.35vmax;
			   width: 8.9vw;
			   height: 12vw;
			   top: 9vh;
			   left: 87vw;
			   opacity: 1;
			   z-index: 1;
			   transition: all 0.01s;}
		.carnet {transform: rotate(-5deg)}
		.postitgauche {transform: rotate(-5deg)}
		.blocnote:hover, .blocnote:focus {font-size: 13px;
						 width: 260px;
						 height: 450px;
						 top: 6vh;
						 left: 15vw;}
	.postit1 {font-size: 0.35vmax;
			  bottom: 78vh;
			  right: 4.1vw;
			  width: 8.5vw;
			  height: 3vw;
			  opacity: 1;
			  z-index: 1;
			  transition: all 0.01s;}
		.postit1:hover, .postit1:focus {font-size: 2vmax;
						width: 30vmax;
						height: 8vmax;
						max-height: 8vmax;
						bottom: 75vh;
						right: 16vw;}
	.postit2 {font-size: 0.35vmax;
			  bottom: 72vh;
			  right: 4.1vw;
			  width: 8.5vw;
			  height: 3vw;
			  opacity: 1;
			  z-index: 1;
			  transition: all 0.01s;}
		.postit2:hover, .postit2:focus {font-size: 2vmax;
						width: 30vmax;
						height: 9vmax;
						max-height: 9vmax;
						bottom: 69vh;
						right: 16vw;}
	.postit3 {font-size: 0.3vmax;
			  bottom: 66vh;
			  right: 4.1vw;
			  width: 8.5vw;
			  height: 3.2vw;
			  opacity: 1;
			  z-index: 1;
			  transition: all 0.01s;}
		.postit3:hover, .postit3:focus {font-size: 2vmax;
						width: 30vmax;
						height: 9vmax;
						max-height: 9vmax;
						bottom: 63vh;
						right: 16vw;}
	.postit4 {font-size: 0.27vmax;
			  bottom: 60vh;
			  right: 4.1vw;
			  width: 8.5vw;
			  height: 3.8vw;
			  opacity: 1;
			  z-index: 1;
			  transition: all 0.01s;}
		.postit4:hover, .postit4:focus {font-size: 1.9vmax;
						width: 30vmax;
						height: 10vmax;
						max-height: 10vmax;
						bottom: 57vh;
						right: 16vw;}
	.postit5 {font-size: 0.27vmax;
			  bottom: 52vh;
			  right: 4.1vw;
			  width: 8.5vw;
			  height: 7vw;
			  opacity: 1;
			  z-index: 1;
			  transition: all 0.01s;}
		.postit5:hover, .postit5:focus {font-size: 1.8vmax;
						width: 32vmax;
						height: 25vmax;
						max-height: 25vmax;
						bottom: 41vh;
						right: 16vw;}
		.onglet1 {position: -webkit-fixed;
				  position: fixed;
				  opacity: 1;
				  z-index: 2;
				  height: 6vh;
				  left: 43vw;
				  bottom: 1vh;
				  transition: all 0.01s;}
			.onglet1:hover {height: 6vh;
							bottom: 1vh;}
		.onglet2 {position: -webkit-fixed;
				  position: fixed;
				  opacity: 1;
				  z-index: 2;
				  height: 6vh;
				  left: 13vw;
				  bottom: 1vh;
				  transition: all 0.01s;}
			.onglet2:hover {height: 6vh;
							bottom: 1vh;}
		.onglet3 {position: -webkit-fixed;
				  position: fixed;
				  opacity: 1;
				  z-index: 2;
				  height: 6vh;
				  left: 77vw;
				  bottom: 1vh;
				  transition: all 0.01s;}
			.onglet3:hover {height: 6vh;
					bottom: 1vh;}
		.onglet4 {opacity: 1;
				  z-index: 2;
				  height: 3vh;
				  left: 88vw;
				  bottom: 10vh;
				  transition: all 0.01s;}
			.onglet4:hover {height: 3vh;
							bottom: 10vh;}
			#contact:target {display: block;}
	.contact {font-size: 11px;}
	#contact {opacity: 1;
			  z-index: 2;
			  width: 73vw;
			  max-height: 80vh;
			  top: 10vh;
			  left: 7vw;}
	#contact .relecture, #contact .projet, #contact .nous {width: 95%;}
	#contact .php {width: 95%;
				   margin-bottom: 5px;}
	#contact .croix {left: 95%;}
	#contact .clicroix {display: block;
						position: fixed;
						z-index: 3;
						width: 25px;
						right: 13vw;
						top: 8vh;
						width: 9vmin;
						height: 9vmin;}
	.ecran {opacity: 1;
			width: 92vw;
			height: 84vh;
			top: 0;
			border-width: 8vh 4vw 8vh 4vw;}
		article {font-size: 2.5vmax;
				 margin: 1% 0% 0% 0%;
				 padding: 1% 1% 1% 1%;
				 width: 80%;
				 left: 8%;}
			.com {text-decoration: none;
				  padding-left: 0.1rem;
				  margin-left: -0.1rem;
				  box-shadow: inset 0 -0.7em 0 0px #f9f6bf;}
		.comment {height: 82vh;
				  overflow: scroll;
				  width: 50vw;
				  bottom: 9vh;
				  right: 42vw;
				  scrollbar-width: none;
				  -ms-overflow-style: none;}
		.comment::-webkit-scrollbar {width: 0;
				  height: 0;}
			mark {display: inline-block;
				  padding: 0 2px 2px 2px;
				  border-radius: 5px/5px;
				  border-width: 1px;
				  box-shadow: 0px 0px 5px 0px grey;}
				.mark {margin: 0 7px 2px 0;
					   background-color: #ffe7dc;}
				.mark2 {position: inherit;
						right: 0;
						margin: 0 0 2px 7px;
						background-color: #dcffdc;}
		.bioGC {position: absolute;
				left: 4vw;
				width: 95vmin;
				height: 85vmin;}
		.bioNain {position: absolute;
				  left: 4vw;
				  width: 95vmin;
				  height: 85vmin;}
			.bioGC .clicroix {display: block;
							  position: absolute;
							  width: 9vmin;
							  height: 9vmin;
							  top: 11.5%;
							  right: 20%;}
			.bioNain .clicroix {display: block;
								position: absolute;
								width: 9vmin;
								height: 9vmin;
								top: 11.5%;
								right: 20%;}
}

@media screen and (max-device-width: 1100px) and (orientation: landscape) {
	.ecran {width: 84vw;
			height: 92vh;
			border-width: 4vh 8vw 4vh 8vw;}
	.comment {height: 90vh;
			  bottom: 5vh;
			  right: 38vw;}
	.onglet1 {position: -webkit-fixed;
			  position: fixed;
			  height: 4vw;
			  left: 93vw;
			  bottom: 47vh;}
		.onglet1:hover {height: 4vw;
						bottom: 47vh;}
	.onglet2 {position: -webkit-fixed;
			  position: fixed;
			  height: 6vw;
			  left: 93vw;
			  bottom: 70vh;}
		.onglet2:hover {height: 6vw;
						bottom: 70vh;}
	.onglet3 {position: -webkit-fixed;
			  position: fixed;
			  height: 6vw;
			  left: 93vw;
			  bottom: 20vh;}
		.onglet3:hover {height: 6vw;
						bottom: 20vh;}
	.onglet4 {height: 4vw;
			  left: 86vw;
			  bottom: 6vh;}
		.onglet4:hover {height: 4vw;
						bottom: 6vh;}
	#contact {height: 85vh;
			  max-height: 85vh;
			  top: 7vh;
			  left: 10vw;
			  width: 70vw;}
	#contact .relecture, #contact .projet {width: 45%;}
	#contact .php {width: 80%;}
	#contact .croix {left: 97%;}
	#contact .clicroix {top: 5vh;
						right: 15vw;}
	.mobile {width: 1vmax;
			 height: 6vmax;
			 top: 45vh;
		     left: 3vw;}
	.com0 {font-size: 9.5px;
		   line-height: 1;}
	.blocnotemobile {font-size: 11.5px;
					 width: 330px;
					 height: 275px;
					 top: 0;
					 left: 25vw;}
		#carnet2 {transform: rotate(-1deg)}
		#post2 {transform: rotate(-1deg)}
	.blocnote {font-size: 0.5vmax;
			   width: 8vw;
			   height: 10vw;
			   top: 4vh;
			   left: 84vw;}
		.carnet {transform: rotate(-1deg)}
		.postitgauche {transform: rotate(-1deg)}
		.blocnote:hover, .blocnote:focus {font-size: 11.5px;
						 width: 330px;
						 height: 275px;
						 top: 0;
						 left: 25vw;}
	.postit1 {font-size: 0.45vmax;
			  bottom: 65vh;
			  right: 8.1vw;
			  width: 8vw;
			  height: 2.5vw;}
		.postit1:hover, .postit1:focus {font-size: 2vmax;
						width: 30vmax;
						height: 8vmax;
						max-height: 8vmax;
						bottom: 59vh;
						right: 20vw;}
	.postit2 {font-size: 0.45vmax;
			  bottom: 55vh;
			  right: 8.1vw;
			  width: 8vw;
			  height: 2.5vw;}
		.postit2:hover, .postit2:focus {font-size: 2vmax;
						width: 30vmax;
						height: 9vmax;
						max-height: 9vmax;
						bottom: 49vh;
						right: 20vw;}
	.postit3 {font-size: 0.4vmax;
			  bottom: 45vh;
			  right: 8.1vw;
			  width: 8vw;
			  height: 2.7vw;}
		.postit3:hover, .postit3:focus {font-size: 2vmax;
						width: 30vmax;
						height: 9vmax;
						max-height: 9vmax;
						bottom: 39vh;
						right: 20vw;}
	.postit4 {font-size: 0.4vmax;
			  bottom: 35vh;
			  right: 8.1vw;
			  width: 8vw;
			  height: 2.8vw;}
		.postit4:hover, .postit4:focus {font-size: 1.9vmax;
						width: 30vmax;
						height: 10vmax;
						max-height: 10vmax;
						bottom: 28vh;
						right: 20vw;}
	.postit5 {font-size: 0.35vmax;
			  bottom: 23vh;
			  right: 8.1vw;
			  width: 8vw;
			  height: 4vw;}
		.postit5:hover, .postit5:focus {font-size: 1.8vmax;
						width: 32vmax;
						height: 25vmax;
						max-height: 25vmax;
						bottom: 6vh;
						right: 20vw;}
	.bioGC {width: 110vmin;
			height: 95vmin;}
	.bioNain {width: 110vmin;
			  height: 95vmin;}
}


.insert {
	display: none;
	color: black;
}
#on_off25:checked ~ #insert1 {
  	display: inline;
}
#on_off25:checked ~ .deroule {
  	display: none;
}
#on_off25:hover ~ #insert1 {
  	display: inline;
}
#on_off25:hover ~ .deroule {
  	display: none;
}


#on_off26:checked ~ #insert2 {
  	display: inline;
}
#on_off26:checked ~ .deroule {
  	display: none;
}
#on_off26:hover ~ #insert2 {
  	display: inline;
}
#on_off26:hover ~ .deroule {
  	display: none;
}


#on_off27:checked ~ #insert3 {
  	display: inline;
}
#on_off27:checked ~ .deroule {
  	display: none;
}
#on_off27:hover ~ #insert3 {
  	display: inline;
}
#on_off27:hover ~ .deroule {
  	display: none;
}


#on_off28:checked ~ #insert4 {
  	display: inline;
}
#on_off28:checked ~ .deroule {
  	display: none;
}
#on_off28:hover ~ #insert4 {
  	display: inline;
}
#on_off28:hover ~ .deroule {
  	display: none;
}


#on_off29:checked ~ #insert5 {
  	display: inline;
}
#on_off29:checked ~ .deroule {
  	display: none;
}
#on_off29:hover ~ #insert5 {
  	display: inline;
}
#on_off29:hover ~ .deroule {
  	display: none;
}


#on_off30:checked ~ #insert6 {
  	display: inline;
}
#on_off30:checked ~ .deroule {
  	display: none;
}
#on_off30:hover ~ #insert6 {
  	display: inline;
}
#on_off30:hover ~ .deroule {
  	display: none;
}


#on_off31:checked ~ #insert7 {
  	display: inline;
}
#on_off31:checked ~ .deroule {
  	display: none;
}
#on_off31:hover ~ #insert7 {
  	display: inline;
}
#on_off31:hover ~ .deroule {
  	display: none;
}


#on_off32:checked ~ #insert8 {
  	display: inline;
}
#on_off32:checked ~ .deroule {
  	display: none;
}
#on_off32:hover ~ #insert8 {
  	display: inline;
}
#on_off32:hover ~ .deroule {
  	display: none;
}


#on_off33:checked ~ #insert9 {
  	display: inline;
}
#on_off33:checked ~ .deroule {
  	display: none;
}
#on_off33:hover ~ #insert9 {
  	display: inline;
}
#on_off33:hover ~ .deroule {
  	display: none;
}


#on_off34:checked ~ #insert10 {
  	display: inline;
}
#on_off34:checked ~ .deroule {
  	display: none;
}
#on_off34:hover ~ #insert10 {
  	display: inline;
}
#on_off34:hover ~ .deroule {
  	display: none;
}


#on_off35:checked ~ #insert11 {
  	display: inline;
}
#on_off35:checked ~ .deroule {
  	display: none;
}
#on_off35:hover ~ #insert11 {
  	display: inline;
}
#on_off35:hover ~ .deroule {
  	display: none;
}


#on_off36:checked ~ #insert12 {
  	display: inline;
}
#on_off36:checked ~ .deroule {
  	display: none;
}
#on_off36:hover ~ #insert12 {
  	display: inline;
}
#on_off36:hover ~ .deroule {
  	display: none;
}


#on_off37:checked ~ #insert13 {
  	display: inline;
}
#on_off37:checked ~ .deroule {
  	display: none;
}
#on_off37:hover ~ #insert13 {
  	display: inline;
}
#on_off37:hover ~ .deroule {
  	display: none;
}


#on_off38:checked ~ #insert14 {
  	display: inline;
}
#on_off38:checked ~ .deroule {
  	display: none;
}
#on_off38:hover ~ #insert14 {
  	display: inline;
}
#on_off38:hover ~ .deroule {
  	display: none;
}


#on_off39:checked ~ #insert15 {
  	display: inline;
}
#on_off39:checked ~ .deroule {
  	display: none;
}
#on_off39:hover ~ #insert15 {
  	display: inline;
}
#on_off39:hover ~ .deroule {
  	display: none;
}


#on_off40:checked ~ #insert16 {
  	display: inline;
}
#on_off40:checked ~ .deroule {
  	display: none;
}
#on_off40:hover ~ #insert16 {
  	display: inline;
}
#on_off40:hover ~ .deroule {
  	display: none;
}


#on_off41:checked ~ #insert17 {
  	display: inline;
}
#on_off41:checked ~ .deroule {
  	display: none;
}
#on_off41:hover ~ #insert17 {
  	display: inline;
}
#on_off41:hover ~ .deroule {
  	display: none;
}


#on_off42:checked ~ #insert18 {
  	display: inline;
}
#on_off42:checked ~ .deroule {
  	display: none;
}
#on_off42:hover ~ #insert18 {
  	display: inline;
}
#on_off42:hover ~ .deroule {
  	display: none;
}


/* Apparition des commentaires */

#on_off1:hover ~ #c1 {
	display: block;
}

#on_off2:hover ~ #c2 {
	display: block;
}

#on_off3:hover ~ #c3 {
	display: block;
}

#on_off4:hover ~ #c4 {
	display: block;
	line-height: 1.3;
}

#on_off5:hover ~ #c5 {
	display: block;
}

#on_off6:hover ~ #c6 {
	display: block;
}

#on_off7:hover ~ #c7 {
	display: block;
}

#on_off8:hover ~ #c8 {
	display: block;
}

#on_off9:hover ~ #c9 {
	display: block;
}

#on_off10:hover ~ #c10 {
	display: block;
}

#on_off11:hover ~ #c11 {
	display: block;
}

#on_off12:hover ~ #c12 {
	display: block;
}

#on_off13:hover ~ #c13 {
	display: block;
}

#on_off14:hover ~ #c14 {
	display: block;
}

#on_off15:hover ~ #c15 {
	display: block;
}

#on_off16:hover ~ #c16 {
	display: block;
}

#on_off17:hover ~ #c17 {
	display: block;
}

#on_off18:hover ~ #c18 {
	display: block;
}

#on_off19:hover ~ #c19 {
	display: block;
}

#on_off20:hover ~ #c20 {
	display: block;
}

#on_off21:hover ~ #c21 {
	display: block;
}

#on_off22:hover ~ #c22 {
	display: block;
}

#on_off23:hover ~ #c23 {
	display: block;
}

#on_off24:hover ~ #c24 {
	display: block;
}