.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
	}

	.clearfix {display: block;}
	html[xmlns] .clearfix {display: block;}
	* html .clearfix {height: 1%;}

	* {
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	       ms-box-sizing: border-box;
	          box-sizing: border-box;
	}

	a {
		text-decoration: none;
		color: #575858;
	}

	a:hover {
		color: #2a73f9;
	}

	.hidden {
		visibility: hidden;
	}


		
body {
	background: #CCC url(../img/texture.png);
	font-family: 'bitterregular';
}


/* COLORS

bleu gris clair : #e7f1f7
bleu gris foncé : #d5eaf7
bleu pétant : #2a73f9
gris : #575858



*/

.color-blue {
	color: #2a73f9;
}

.color-green {
	color: green;
}

.color-orange {
	color: darkorange;
}

.color-red {
	color: darkred;
}

.color-purple {
	color: mediumpurple;
}

.color-pink {
	color: hotpink;
}




/* NAV */

header {
	text-align: center;
	padding: 32px 0;
}

h1 {
	font-family: 'bitterbold';
	font-size: 100px;
	text-shadow: 2px 2px #EEE;		
}

h1.small {
	font-size: 20px;
	text-shadow: 1px 1px #EEE;
}

h4 span.small {
	font-size: 14px;
}

h1 span {
	display: inline-block;
	transform: rotate(180deg) translateY(-4px);
	-webkit-transform: rotate(180deg) translateY(-4px);
	-moz-transform: rotate(180deg) translateY(-4px);
	-o-transform: rotate(180deg) translateY(-4px);
	-ms-transform: rotate(180deg) translateY(-4px);
	text-shadow: -2px -2px #EEE;
}

/* maybe nav ? */

header nav {
	margin-top: 32px;
	position: relative;
	z-index: 1000;
	width: 100%;
	background: #e7f1f7;			
}

header nav ul {
	display: table;
	margin: auto;
}

header nav ul li {
	float: left;
	margin: 16px 8px;
}

header nav a {
	float: left;
	margin: 20px 5px;
}

header nav ul li a {
	text-decoration: none;
	padding: 8px;
	opacity: 0.7;
	color: #333;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
}

header nav ul li a:before, footer ul li a:before {
	content: '> ';
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
}

header nav ul li a:hover, header nav ul li a:hover:before, footer ul li a:hover:before, .current, .current:before {
	opacity: 1;
}



/* SOCIAL NAV */

#social {
	background: #fff;
	border-radius: 50px;
	width: 375px;
	height: 50px;
	margin: auto;
	padding: 2px 10px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2)
}

#social li {
	float: left;
}

#social a {
	display: block;
	opacity: 0.6;
	padding: 2px;
}

#social a:hover {
	opacity: 1;
}

#liens_fb {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 20px auto;
}

#liens_fb a {
	margin: 15px;
	opacity: 0.6;
}

#liens_fb a:hover {
	opacity: 1;
}


#sidebar {
	position: fixed;
	right: 16px;
	top: 66px;
	z-index: 3000;
}

#sidebar a {
	opacity: 0.6;
}

#sidebar a:hover {
	opacity: 1;
}


/* TYPO */		





h2 {
	font-family: 'bitterbold';
	font-size: 24px;
	margin: 10px 0;
}

h3 {
	font-family: 'bitterbold';
	font-size: 18px;
}

hr {
	background: #333;
	border: 1px solid #333;
	margin: 5px 0;
}

header hr {
	background: #333;
	border: 1px solid #333;
	width: 70px;
	display: inline-block;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
   	-moz-transform: translateY(5px);
   	-o-transform: translateY(5px);
   	-ms-transform: translateY(5px);
}


strong {
	font-family: 'bitterbold';
}

em {
	font-family: 'bitteritalic';
}


/* SAISON */

.weather {
	position: relative;
	height: 70px;
}

#oteppe, #laPlante {
	position: absolute;
	transition: all 1s;
	-webkit-transition: all 1s;
	overflow: hidden;
	padding-top: 5px;
	top: 0px;

}

#oteppe {
	left:280px;
	visibility: hidden;
	width: 100%;
}

#saison #weather {
	overflow: hidden;
}

#saison, .todo {
	margin: 16px auto 64px;
}

#saison img#theme {
	width: 175px;
	height: 175px;
	border-radius: 50%;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.8);
	margin: 0 50px;
}

#saison img#weather_icon {
	width: 35px;
	height: 35px;
	background-color: lightskyblue;
	border-radius: 50%;
	transform: translateY(10px);
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	-o-transform: translateY(10px);
	-ms-transform: translateY(10px);
}

#saison span {
	display: block;
	font-family: 'bitterbold';
}

#saison p:first-of-type {
	margin-top: -10px;
}

#saison p.small, .todo p.small {
	font-size: 13px;
}

#saison ul {
	display: flex;
	justify-content: flex-start;
	margin-top: -5px;
}

#saison ul li {
	padding: 0 5px;
	margin-right: 5px;
	font-family: 'bitterbold';
	font-size: 12px;
}

#saison ul li.actif {
	text-decoration: underline #575858;
	-webkit-text-decoration: underline #575858;
}

#saison progress {
	width: 50px;
}

#saison progress:hover:after {
	content: attr(title);
	position: absolute;
	left: 5px;
	top: -15px;
	color: #666;
	font-size: 12px;
	font-family: 'bitterregular';
}

#saison	progress[value] {
		position: relative;
	}

#saison, .todo, .news {
	position: relative;
	width: 300px;
	padding: 10px;
	text-align: center;
	text-shadow: 1px 1px #DDD;
	font-family: 'bitteritalic';
	line-height: 150%;
}

p#annif {
	color: red;
	font-size: 13px;
}

p#collecte {
	font-family: 'bitterbold';
	font-size: 12px;
}

p#collecte img {
	transform: translateY(5px);
}

#yt_moon {
	display: none;
}

.news {
	float: left;
	margin: 10px;
}

#saison,
#saison:after, 
#saison:before,
.todo,
.todo:after,
.todo:before,
.news,
.news:after,
.news:before {
	background: #fff;  
	box-shadow: -1px 1px 10px rgba(0,0,0,0.2);  
}  

#saison:after, 
.todo:after,
.news:after {
	position: absolute;  
	top: 5px; right:5px; bottom:-5px; left:-5px;  
	content: "";  
	z-index: -10;  
	/* définit le centre de transformation */  
	transform-origin: 100% 0; 
	-webkit-transform-origin: 100% 0; 
	-moz-transform-origin: 100% 0; 
	-o-transform-origin: 100% 0; 
	-ms-transform-origin: 100% 0;  
}  

#saison:after, 
.todo:after,
.news:after {
	transform: rotate(-0.6deg);
	-webkit-transform: rotate(-0.6deg);
	-moz-transform: rotate(-0.6deg);
	-o-transform: rotate(-0.6deg);
	-ms-transform: rotate(-0.6deg);  
}

.todo {
	display: none;
	text-align: left;
}

.todo h3 {
	text-decoration: solid underline;
	text-decoration-color: black;
	padding-top: 5px;
}

.todo h3:first-of-type {
	padding-top: 0px;
}

.todo p.small {
	color: darkcyan;
	padding-left: 30px;
	margin-top: -10px;
	font-size: 10px;
}

.todo label {
	font-size: 15px;
	font-family: 'bitterregular';
}

.todo input[type=submit].first {
	background: forestgreen;
}

.todo input[type=submit]{
	width: 100%;
	border-radius: 5px;
	padding: 10px;
	border: none;
	background: tomato;
	color: white;
	font-family: 'bitteritalic';
	margin-top: 10px;
	cursor: context-menu;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	-webkit-transition: all ease 1s;
	transition: all ease 1s;
}

.todo input[type=submit]:hover {
	background: black;
}

#todo {
	padding: 5px;
}



	  .checkbox-wrapper-19 {
		  box-sizing: border-box;
		  --background-color: #fff;
		  --checkbox-height: 20px;
		  margin: 5px;
		  margin-bottom: 0px;
	  }

	@-moz-keyframes dothabottomcheck-19 {
		0% {
			height: 0;
		}
		100% {
			height: calc(var(--checkbox-height) / 2);
		}
	}

	@-webkit-keyframes dothabottomcheck-19 {
		0% {
			height: 0;
		}
		100% {
			height: calc(var(--checkbox-height) / 2);
		}
	}

	@keyframes dothabottomcheck-19 {
		0% {
			height: 0;
		}
		100% {
			height: calc(var(--checkbox-height) / 2);
		}
	}

	@keyframes dothatopcheck-19 {
		0% {
			height: 0;
		}
		50% {
			height: 0;
		}
		100% {
			height: calc(var(--checkbox-height) * 1.2);
		}
	}

	@-webkit-keyframes dothatopcheck-19 {
		0% {
			height: 0;
		}
		50% {
			height: 0;
		}
		100% {
			height: calc(var(--checkbox-height) * 1.2);
		}
	}

	@-moz-keyframes dothatopcheck-19 {
		0% {
			height: 0;
		}
		50% {
			height: 0;
		}
		100% {
			height: calc(var(--checkbox-height) * 1.2);
		}
	}

	.checkbox-wrapper-19 input[type=checkbox] {
		display: none;
	}

	.checkbox-wrapper-19 .check-box {
		height: var(--checkbox-height);
		width: var(--checkbox-height);
		background-color: transparent;
		border: calc(var(--checkbox-height) * .1) solid #000;
		border-radius: 5px;
		position: relative;
		display: inline-block;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-moz-transition: border-color ease 0.2s;
		-o-transition: border-color ease 0.2s;
		-webkit-transition: border-color ease 0.2s;
		transition: border-color ease 0.2s;
		cursor: pointer;
		bottom: -3px;
	}
	.checkbox-wrapper-19 .check-box::before,
	.checkbox-wrapper-19 .check-box::after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		position: absolute;
		height: 0;
		width: calc(var(--checkbox-height) * .2);
		background-color: #34b93d;
		display: inline-block;
		-moz-transform-origin: left top;
		-ms-transform-origin: left top;
		-o-transform-origin: left top;
		-webkit-transform-origin: left top;
		transform-origin: left top;
		border-radius: 5px;
		content: " ";
		-webkit-transition: opacity ease 0.5;
		-moz-transition: opacity ease 0.5;
		transition: opacity ease 0.5;
	}
	.checkbox-wrapper-19 .check-box::before {
		top: calc(var(--checkbox-height) * .72);
		left: calc(var(--checkbox-height) * .41);
		box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
		-moz-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		-o-transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
	.checkbox-wrapper-19 .check-box::after {
		top: calc(var(--checkbox-height) * .37);
		left: calc(var(--checkbox-height) * .05);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
	.checkbox-wrapper-19 .check-box.checked {
		border-color: #34b93d;
		bottom: -5px;
	}
	.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
	.checkbox-wrapper-19 .check-box.checked::after {
		height: calc(var(--checkbox-height) / 2);
		-moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
		-o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
		-webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
		animation: dothabottomcheck-19 0.2s ease 0s forwards;
	}
	.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
	.checkbox-wrapper-19 .check-box.checked::before {
		height: calc(var(--checkbox-height) * 1.2);
		-moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
		-o-animation: dothatopcheck-19 0.4s ease 0s forwards;
		-webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
		animation: dothatopcheck-19 0.4s ease 0s forwards;
	}


/* RSS */

#rss h2 {
	display: block;
	max-width: 400px;
	margin: 32px auto 16px;
	background: #d5eaf7;
	padding: 5px 10px;
	cursor: zoom-in;
}

#rss h2 span {
	display: inline-block;
	transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg); 
}

#rss h2.active span {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); 
}

#rss .container {
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

#rss .news span.remove {
	position: absolute;
	right: -15px;
	font-size: 20px;
	font-family: 'bitterbold';
	z-index: 9999;
	color: red;
	/*background-image: url('/web/20221130185630im_/http://www.actionscitoyennes.site/img/icons/new.png');
	background-repeat: no-repeat;
	background-size: contain;*/
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: all 0.5s;
}

#rss .news span.remove:hover {
	cursor: pointer;
	font-size: 30px;
	transform: rotate(10deg);
}

#rss p.no_news {
	text-align: center;
	font-family: 'bitteritalic';
	font-size: 12px;
}

#liens_fb {
	border-top: 40px solid transparent;
	border-image: url('../img/decoline.png') 50 space;
	padding-top: 5px;
	max-width: 500px;
}



	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/*body {
		background-color: #fef9f2;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		overflow: hidden;
	}*/

	.container-slide {
		position: relative;
		width: 60vw;
		height: 120vh;
	}

	.img-container-before,
	.img-container-after {
		position: absolute;
		width: 60vw;
		height: 120vh;
	}

	.img-container-before {
		width: 30vw;
		overflow: hidden;
	}

	.container-slide img {
		width: 60vw;
		height: 120vh;
		object-fit: cover;
	}

	.slider {
		width: 0.5rem;
		background: white;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		pointer-events: none;
	}



/* Joies du code */

.joies_code {
	display: table;
	max-width: 400px;
	margin: 50px auto;
	position: relative;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

.joies_code h2 {
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 0;
	margin: 0;
	font-size: 16px;
	border-radius: 0 0 10px 10px;
	transition: all 1s;
	-webkit-transition: all 1s;
}

.joies_code:hover h2 {
	font-size: 10px;
}

.joies_code p {
	display: table;
	margin: 7px;
	max-width: 500px;
}

	.joies_code p video {
		max-width: 400px;
	}


#plaques-voitures {
	position: absolute;
	left: 23%;
	top: 43%;
}


	.voiture {
		border: 3px solid red;
		width: fit-content;
		padding: 5px;
		border-radius: 10px;
		margin: 10px auto;
		color: red;
		background: white;
		padding-left: 20px;
		font-family: sans-serif;
		font-weight: 600;
		position: relative;
	}

	.voiture:before {
		content: 'B';
		background: blue;
		width: 18px;
		height: 50%;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 10px;
		color: white;
		border-radius: 6px 0 0 6px;
		text-align: center;
		padding-top: 14px;
		font-weight: 300;
	}

	.voiture:after {
		content: '';
		position: absolute;
		width: 9px;
		height: 9px;
		border: 1px dotted yellow;
		top: 2px;
		left: 3px;
		border-radius: 50%;
	}

/* XP Free Time */

.free_time {
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 25px auto;
}

.free_time .xp {
	width: 250px;
	height: 200px;
	background: #333;
	margin: 10px;
	border-radius: 5px;
	color: #EEE;
}

.free_time .xp div {
	height: 15px;
	border-radius: 5px 5px 0 0;
}

.free_time .xp p:first-of-type {
	text-decoration: underline wavy 2px;
	-webkit-text-decoration: 2px;
	-webkit-text-decoration-style: wavy;
	-webkit-text-decoration-line: underline;
	font-family: 'bitterbold';
}

.free_time .xp .red {
	background: red;
}

.free_time .xp .red + p {
	text-decoration-color: red;
	-webkit-text-decoration-color: red;
}

.free_time .xp .green {
	background: green;
}

.free_time .xp .green + p {
	text-decoration-color: green;
	-webkit-text-decoration-color: green;
}

.free_time .xp .yellow {
	background: yellow;
}

.free_time .xp .yellow + p {
	text-decoration-color: yellow;
	-webkit-text-decoration-color: yellow;
}

.free_time .xp .cyan {
	background: cyan;
}

.free_time .xp .cyan + p {
	text-decoration-color: cyan;
	-webkit-text-decoration-color: cyan;
}

.free_time .xp p, .free_time .xp a {
	text-align: center;
	margin: 20px 0;
	display: block;
	color: white;
	
}

.free_time .xp p + p {
	font-size: 12px;
	padding: 0 15px;
}

.free_time .xp a:hover {
	color: grey;
}


.free_time .xp img {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

.free_time .xp img:hover {
	margin-top: 5px;
	cursor: help;
}

.free_time .xp .done img:hover {
	margin-top: 0px;
	cursor: not-allowed;
}

/* SCRATCH */

#scratch h2 {
	text-align: center;
	margin: 0 auto;
	background :white;
	display: table;
	width: 300px;
	padding: 10px;
	border-radius: 15px 15px 0 0;
}

#js-container {
  border: 3px solid black;
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  -o-user-select: none;
	user-select: none;
	cursor: url(../img/scratch/coin_scratch.png), pointer;
}

.canvas {
  position: absolute;
	top: -3px;
	left: -3px;
}

#js-container img {
	visibility: hidden;
	width: 294px;
  height: 294px;
}

#js-form {
	display: block;
	width: 300px;
	margin: auto;
	background: white;
	padding: 10px 0;
	border-radius: 0 0 15px 15px;
}

#js-form label {
	text-align: center;
	display: block;
	padding: 5px;
	font-family: 'bitteritalic';
	font-size: 20px;
	margin-top: 10px;
	font-weight: 800;
	text-shadow: 1px 1px #DDD;		

}

#answer {
	border-radius: 8px;
	padding: 3px 0;
	display: table;
	background: #ddd;
	margin: auto;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	border: #bbb solid 1px;
	text-align: center;
}

#js-form input[type=submit]{
	text-align: center;
	display: block;
	margin: 10px auto;
	border: none;
	color: white;
	padding: 10px;
	background: rgb(30,173,223);
	background: linear-gradient(135deg, rgba(30,173,223,1) 0%, rgba(223,7,233,1) 100%);
	font-family: 'bitterregular';
	cursor: pointer;
	transition: all 1s;
	-webkit-transition: all 1s;
	border-radius: 2px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);

}

#js-form input[type=submit]:hover{
	/* background: linear-gradient(135deg, rgba(223,7,233,1) 0%, rgba(30,173,223,1) 100%); */
	/* font-family: 'bitterbold';
	padding: 8px; */
	color: #ddd;
}

#result_scratch {
	text-align: center;
}

#prct {
	display: none;
}



/* jeux memo*/

	#jeux-memo {
		display:none;
		/*display: flex;*/
		justify-content: center;
		width: 300px;
		flex-wrap: wrap;
		margin: auto;
	}

	#jeux-memo a {
		padding: 2px;
	}

	#jeux-memo a img {
		border-radius: 8px;
	}





	/*JUKEBOX*/

	#jukebox {
		width: 144px;
		background: url('../img/jukebox/jukebox.png');
		background-size: cover;
		padding: 70px 30px 40px 30px;
		position: absolute;
		left: 30%;
		bottom: 4%;
	}

	#jukebox img {
		margin: 0;
	}

/* MERCI */

#remerciements {
	margin: 10px auto;
	max-width: 500px;
}

/* CONTACT */
#contact p {
	text-align: center;
	line-height: 32px;
	margin: 32px 0;
}

#contact progress {
	margin: 5px auto;
	display:block;
}

#contact hr {
	margin-bottom: 64px;
	width: 320px;
}

#conversation {
	width: 312px;
	margin: 64px auto;
}

/* Blocs qui apparaitront au fur et à mesure de la conversation */
.display-none {
	display: none;
}

#conversation .text {
	margin: 16px 0;
	width: 320px;
	height: 30px;
	text-align: left;
}


#conversation input[type=text] {

	margin: 16px 0;
	width: 320px;
	height: 40px;
	border: none;
	font-family: 'cicle_gordita';
	letter-spacing: 1px;
	font-size: 16px;
	font-size: 1.6rem;
}

#conversation textarea {
	margin: 16px 0;
	width: 320px;
	height: 200px;
	border: none;
	font-family: 'cicle_gordita';
	letter-spacing: 1px;
	font-size: 16px;
	font-size: 1.6rem;
}

#conversation textarea:focus, #conversation textarea:hover {
	outline: 0;
}

#conversation input:focus, #conversation input:hover { 
	outline: 0;
}

#conversation input[type=submit] {

	width: 320px;
	height: 51px;
	
	border: none;
	background: #EEE;
	font-family: 'cicle_gordita';
	letter-spacing: 1px;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: left;
	cursor: pointer;
}

#conversation input[type=submit]:hover {
	border: 1px solid #333;
}

.top_link {
	border-style:solid;
	border-width: 0 15px 20px 15px ;
	border-color: transparent transparent #333 transparent;

	position: fixed;
	bottom: 16px;
	right: 16px;
	display: none;
	opacity: 0.8;
}

.top_link:hover {
	opacity: 1;
}

/* LOULOUS */

.animals ul {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content : center;
}

.animals li {
	width: 300px;
	height: 300px;
	margin: 50px;
	position: relative;
	border-radius: 10px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}

.animals li img {
	border-radius: 10px;
}

.animals li > div {
	background-color: rgba(255,255,255,0.75);
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 300px;
	padding: 15px 0;
	border-radius: 0 0 10px 10px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	overflow: hidden;
}

.animals li div .details {
	text-align: center;
	position: absolute;
	bottom: -75px;
	left: 0;
	width: 300px;
	padding-top: 25px;
	padding-bottom: 20px;
	color: transparent;
	font-size: 12px;

	transition: all 1s;
	-webkit-transition: all 1s;
}

.animals li:hover > div {
	padding-bottom: 120px;
}

.animals li:hover div .details {
	color: #333;
	bottom: 0;
}

.animals li div .details audio {
	margin-top: 5px;
	margin-bottom: -15px;
	height: 15px;
}

.animals li span.emoji {
	border-radius: 50%;
	padding: 16px 13px;
	font-size: 24px;
	position: absolute;
	top: 0;
	right: 0;
	margin: -15px;
	background: #16a085;
	text-align: center;
	color: #fff;
	opacity: 0.9;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
	border-right: 2px solid #15977e;
	transform : rotate(7deg);
	-webkit-transform : rotate(-7deg);
}

/* ANIMATIONS ROOM */

#morpion {
	margin: auto;
	width: 100px;
	height: 100px;
	animation: jeu-morpion 6s infinite ease-in-out;
}

@keyframes jeu-morpion {
	0% {
		background: url('../img/room/morpion_1.png');
		background-size: contain;
	}
	25% {
		background: url('../img/room/morpion_2.png');
		background-size: contain;
	}
	50% {
		background: url('../img/room/morpion_3.png');
		background-size: contain;
	}
	75% {
		background: url('../img/room/morpion_4.png');
		background-size: contain;
	}
	90% {
		background: url('../img/room/morpion_5.png');
		background-size: contain;
	}
	100% {
		background: url('../img/room/morpion_5.png');
		background-size: contain;
	}
}



#memo {
	position: relative;
	width: 200px;
	margin: auto;
}

#memo img {
	width: 200px;
}

#memo img:first-of-type {
	position: absolute;
	animation: carte-memo 6s infinite ease-in-out;
}

@keyframes carte-memo {
	0% {
		transform: translateX(-10px);
	}
	70% {
		transform: translateX(-100px) translateY(5px);
	}
	100% {
		transform: translateX(-10px) translateY(0px);
	}
}


#checklist {
	width: 50px;
	height: 75px;
	background: #ded;
	position: relative;
	margin: 0 auto;
	top: 30%;
	animation: wind 4s infinite ease-in-out;

}


#checklist:hover {
	background: #DED;
}

#checklist::after {
	content: '';
	position: absolute;
	display: block;
	width: 7px;
	height: 7px;
	background: saddlebrown;
	border-radius: 50%;
	left: 45%;
	top: 10px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

#checklist:hover::before {
	background: #ffffff;
}

#checklist::before {
	content: '';
	position: absolute;
	display: block;
	z-index: -1000;
	width: 53px;
	height: 78px;
	background: #ffffff;
	transform: rotate(6deg);
}

#checklist p {
	text-align: center;
	transform: rotate(6deg);

}


@keyframes wind {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(6deg);
	}
	100% {
		transform: rotate(0deg);
	}
}




#free_time img {
	height: 100px;
	animation: zen 4s infinite ease-in-out;
}

#free_time img:first-of-type, #free_time img:last-of-type{
	height: 80px;
	animation-delay: 2s;
	transform: translateY(10px);
}


@keyframes zen {
	0% {
		transform: translateY(10px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(10px);
	}
}

#carlist, #carinfos {
	width: 350px;
	margin: 0 auto;
	display: none;
}

#carlist h4 {
	font-family: 'bitterbold';
	margin: 15px 0;
}

#carlist ul {
	font-size: 14px;
	list-style: circle;
	padding-left: 20px;
}


/* DIV NEWS */

/*



.container figure {
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 300px;
	text-align: center;

}

.container figure:after {
	content: "";
	display: block;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right: 0;
	background: linear-gradient(221deg, rgb(0 0 0 / 75%) 5%, rgb(255 255 255 / 0%) 50%);
}

.container figure img {
	height: 100%;
	width: 100%; /* 	position: absolute; */
/*	top:0;
	bottom:0;
	left:0;
	right: 0;
	object-fit: cover;
/*	transform: translateX(-25%); */
/*}

.new,
.container,  
.container:after,  
.container:before {  
	background: #fff;  
	box-shadow: -1px 1px 10px rgba(0,0,0,0.2);  
}  

.container:after { 
	position: absolute;  
	top: 5px; right:5px; bottom:-5px; left:-5px;  
	content: "";  
	z-index: -10;  
	/* définit le centre de transformation */  
	/*transform-origin: 100% 0; 
	-webkit-transform-origin: 100% 0; 
	-moz-transform-origin: 100% 0; 
	-o-transform-origin: 100% 0; 
	-ms-transform-origin: 100% 0;  
}  

.container:after {  
	transform: rotate(-0.6deg);
	-webkit-transform: rotate(-0.6deg);
	-moz-transform: rotate(-0.6deg);
	-o-transform: rotate(-0.6deg);
	-ms-transform: rotate(-0.6deg);  
}  

.container:target:before,
.container:target:after,
.container:target {
	background: rgb(222, 238, 247);  
	box-shadow: -1px 1px 10px rgba(2, 116, 110, 0.657);
}

.container img.flag  {
	width: 100%;
	border-radius: 50%;
	border: 1px solid #fff;
}

.container .tag {
	width: 75px;
	height: 75px;
	position: absolute;
	top: -15px;
	right: -15px;
}
.container .text {
	text-align: center;
	margin: 20px auto;
	max-width: 360px;
}

.container .text p {
	text-align: justify;
	padding: 5px;
}

.container .text h2 {
	text-shadow: 1px 1px #DDD;
}

.container .text .button {
	background: #05944c;
	padding: 10px;
	border-radius: 8px;
	margin: 20px 10px;
	display: block;
	color: #FFF;
}

.container .text .button.red {
	background: #e90c0c;
}

.container .text .button.yellow {
	background: #fad103;
	color: #333;
}

.container .text .button.blue {
	background: #255df7;
}

.container .text .button:hover {
	background: #04743c;
}

.container .text .button.red:hover {
	background: #bb0a0a;
}

.container .text .button.yellow:hover {
	background: #e9c306;
}

.container .text .button.blue:hover {
	background: #1824cf;
}

span.new {
	position: absolute;
	right: -25px;
	font-size: 10px;
	z-index: 9999;
	background-image: url('/web/20221130185630im_/http://www.actionscitoyennes.site/img/icons/new.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: all 0.5s;

}

span.new a {
	color: transparent;
	display: block;
	height: 100%;
	text-indent: 99999;
}

span.new:hover {
	width: 60px;
	height: 60px;
	margin: 39px 5px;
}


/* DIV SLIDES */
 /*








#apropos {
	background: url(../img/bckgr2.png) center no-repeat fixed;
	background-size: cover;
	padding: 32px 0;
	line-height: 32px;
}

#apropos #avatar {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	margin: auto;
	display: block;
	border: 5px solid #111;
}


#apropos ul, #apropos h2 {
	width: 500px;
	margin: 32px auto;
}

#apropos h2 {
	background: #d5eaf7;
	padding: 5px 10px;
}

#apropos li {
	list-style: circle;
	margin-left: 32px;
}





#origins {
	display: none;
}




#travaux {
	padding: 32px 0;
	text-align: center;
	background: url(../img/travail.jpg) center no-repeat fixed;
	background-size: cover;
}

		#travaux h2 {
			color: #EEE;
		}





		#travaux ul {
			display: table;
			margin: 32px auto;
		}

		#travaux ul li {
			padding: 8px;
			margin: 4px 0;
			float: left;
		}

		#travaux a {
			text-decoration: none;
			color: #333;
			
		}

		#travaux ul li a {
			width: 200px;
			height: 200px;
			display: block;
			overflow: hidden;
		}

		#travaux ul li a p {
			margin-top: -300px;
			background-color: #CCC;
			position: relative;
			z-index: 200;
			padding: 16px;
			opacity: 0.9;
			transition: margin 0.5s;
			-webkit-transition: margin 0.5s;
			-moz-transition: margin 0.5s;
			-o-transition: margin 0.5s;
			-ms-transition: margin 0.5s;
		}

		#travaux ul li a:hover p {
			margin-top: -100px;
		}

		#travaux ul li:nth-child(4n) {
			clear: both;
		}



		#travaux a#carnet {
			border: 1px solid #333;
			padding: 8px;
			margin: 64px 0;
			display: inline-block;
			background: #DDD;
			opacity: 0.7;
		}


		#travaux a:hover, #travaux a#carnet:hover {
			opacity: 1;
		}


		#contact {
			background: #e7f1f7;
			padding: 32px 0;
			text-align: center;
		}




/* SLIDESHOW */
	
/*
		.slideshow {  
		   width: 100%;  
		   height: 400px;  
		   overflow: hidden; 
		   margin-bottom: 128px;
		   border: 2px solid #333;
		   border-width: 4px 0 4px 0;
		}  
		.slideshow ul {  
		    /* 4 images donc 4 x 100% */   /*
		   width: 300%;  
		   height: 400px;  
		   padding:0; margin:0;  
		   list-style: none;  
		   
		}  

		.slideshow li:hover .detail {
			margin-top: -500px;
		}

		.slideshow li {
			float: left;
			width: 34%;
		}


		.slideshow li .detail {
			background: rgba(255,255,255, 0.9);
			position: relative;
			z-index: 200;
			padding: 32px;
			color: #333;
			transition: margin 0.5s;
			-webkit-transition: margin 0.5s;
			-moz-transition: margin 0.5s;
			-o-transition: margin 0.5s;
			-ms-transition: margin 0.5s;
		}

.parallax {
	position: relative;
	overflow: hidden;

	height: 400px;

} /*