/*************************
******* ACTUALITES *******
*************************/

#image1.actif, #image1.init {
	position : fixed;
	top : 60px;
	left : 100px;
	height: 325px;
	width : 200px;
	background: url(../images/img1.jpg) 0 0 no-repeat; 
	background-size : 100%;
	animation : anim-app-left200 3s;
	-webkit-animation : anim-app-left200 3s;
}
#image1.init {
	animation : anim-wait25-app-left200 4s;
	-webkit-animation : anim-wait25-app-left200 4s;
}
#texte1.actif, #texte1.init {
	position : absolute;
	top : 100px;
	left : 270px;
	margin-right : 50px;
	animation : anim-app-bottom50 3s;
	-webkit-animation : anim-app-bottom50 3s;
}
#texte1.init {
	animation : anim-wait25-app-bottom50 3s;
	-webkit-animation : anim-wait25-app-bottom50 3s;
}
#texte1.actif div, #texte1.init div {
	margin-bottom : 30px;
	padding : 10px;
	border-top : solid 1px #460000;
	border-left : solid 1px #460000;
}
@media (max-width:800px), (max-height:500px) {
	#image1.actif, #image1.init {	top:20px;	left:0;		}
	#texte1.actif, #texte1.init {	top:60px;	left:170px;	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio:1.5)
{
	#image1.actif, #image1.init, #texte1.init {
		display : none;
	}
	#texte1.actif {
		top : 0;
		left : 0;
		margin-right : 0;
		animation : none;
		-webkit-animation : none;
	}
	#texte1.actif div, #texte1.init div {
		margin : 1em;
		padding : 1em;
		border : solid 0.25em #460000;
	}
	
}


/******************************
******* AGNÈS BELLADONE *******
******************************/


#titre21.actif {
	text-align : center;
	padding : 0 100px 0 100px;
	animation : anim-app 5s ease-in;
	-webkit-animation : anim-app 5s ease-in;
}
#texte21.actif {
	padding : 30px 100px 0 100px;
	animation : anim-app-right100 5s ease-in;
	-webkit-animation : anim-app-right100 5s ease-in;}

@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#titre21.actif {
		margin : 1em;
		padding : 0;
		animation : none;
		-webkit-animation : none;
	}
	#texte21.actif {
		margin : 2em 1em 1em 1em;
		padding : 0;
		animation : none;
		-webkit-animation : none;
	}
}


/*************************
******* SUR LE FIL *******
*************************/


#menu22.actif {
	text-align : center;
	width : 400px;
	height : 100px;
	background : url(../images/menu22.png) 0 0 no-repeat; 
	background-size : 100%;
	position : fixed;
	left : 0px;
	bottom : 20px;
	font-weight : bold;
	animation : anim-app 5s;
	-webkit-animation : anim-app 5s;
}
#menu22.actif div.smenu {
	position : relative;
	top : 75px;
	width : 100%;
}
#menu22.actif div.smenu div {
	float : left;
	width : 25%;
	text-align : center;
}

#titre22.actif {
	margin-left : 50px;
	width : 200px;
	animation : anim-app 5s ease-in;
	-webkit-animation : anim-app 5s ease-in;
}

#texte22.actif {
	position : absolute;
	top : 0;
	left : 300px;
	padding-right : 50px;
	animation : anim-app-right100 5s ease-in;
	-webkit-animation : anim-app-right100 5s ease-in;
}

#image22.actif {
	width : 100%;
	position : fixed;
	bottom : 20px;
	left : 0px;
	animation : anim-app 5s ease-in;
	-webkit-animation : anim-app 5s ease-in;
}
#image22.actif div {
	background: url(../images/img22.jpg) 0 0 no-repeat; 
	background-size : 100%;
	opacity:.5;
	filter:alpha(opacity=50);
	height: 416px;
	width: 416px;
	position : relative;
	margin : auto;
}

#photo.actif222 {
	position : relative;
	margin : auto;
	animation : anim-app 0.5s;
	-webkit-animation : anim-app 0.5s;
}

#video.actif223 {
	position : relative;
	margin : auto;
	animation : anim-clign 0.3s;
	-webkit-animation : anim-clign 0.3s;
}

#media.actif224 {
	position : relative;
	margin : auto;
	width : 570px;
}
#playlist.actif224 {
	position : relative;
	top : 0;
	float : left;
	animation : anim-up600 0.5s ease-out;
	-webkit-animation : anim-up600 0.5s ease-out;
}
#audio.actif224 {
	position : relative;
	top : 0;
	float : right;
	animation : anim-wait50-up600 1s ease-out;
	-webkit-animation : anim-wait50-up600 1s ease-out;
}
#audio.actif224 #audio-titre {
	background-image : url(../images/audio224.jpg);
}

@media (max-width:800px), (max-height:500px) {
	#titre22.actif {
		position : static;
		width : 100%;
		top : 0;
	}
	#titre22.actif div.encadre {
		margin-right : 100px;
	}
	#menu22.actif {
		width : 300px;
		height : 75px;
		position : static;
		margin : 10px auto 20px auto;
		font-size : 0.9em;
	}
	#menu22.actif div.smenu {
		top : 60px;
	}
	#texte22.actif {
		position : static;
		padding : 0 50px 0 50px;
	}
	#image22.actif div {
		height: 200px;
		width: 200px;
	}
	#media.actif224 {
		width : 400px;
	}
}

@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#titre22.actif {
		margin : 0;
		width : 100%;
		animation : none;
		-webkit-animation : none;
	}
	#titre22.actif div.encadre {
		margin : 1em;
	}

	#menu22.actif {
		background : none;
		position : static;
		padding-top : 0em;
		width : 100%;
		height : 0;
		font-weight : bold;
		animation : none;
		-webkit-animation : none;
	}
	#menu22.actif div.smenu {
		position : static;
	}
	#menu22.actif div.smenu div {
		background-color : white;
		width : 24%;
		text-align : center;
		margin : 0 0.5% 0 0.5%;
	}
	#menu22.actif div.smenu div a {
		color : black;
	}
	
	#texte22.actif {
		position : static;
		margin : 1em;
		padding : 2em 0 0 0;
		animation : none;
		-webkit-animation : none;
	}
	#image22.actif {
		display : none;
	}
	#closebox.actif222 {
		position : fixed;
	}
}


/*******************
******* RSDB *******
*******************/


#menu23.actif {
	position : fixed;
	left : 10px;
	bottom : 0px;
	background: url(../images/menu23.png) 0% 100% no-repeat; 
	width : 150px;
	height : 330px;
	padding-left : 20px;
	font-weight : bold;
	animation : anim-app 5s;
	-webkit-animation : anim-app 5s;
}
#menu23.actif div.smenu div {
	height : 40px;
}
#smenu23B {
	display : none;
}

#image23.actif {
	width : 100%;
	position : fixed;
	bottom : 0px;
	left : 0px;
	animation : anim-app 5s ease-in;
	-webkit-animation : anim-app 5s ease-in;
}
#image23.actif div {
	background: url(../images/img23.jpg) 0 0 no-repeat; 
	background-size : 100%;
	height: 360px;
	width: 600px;
	position : relative;
	margin : auto;
	opacity:.5;
	filter:alpha(opacity=50);
}

#titre23.actif {
	position : relative;
	text-align : center;
	padding : 0 50px 0 150px;
	animation : anim-app 5s ease-in;
	-webkit-animation : anim-app 5s ease-in;
}
#texte23.actif {
	padding : 30px 50px 0 150px;
	animation : anim-app-right100 5s ease-in;
	-webkit-animation : anim-app-right100 5s ease-in;
}

#photo.actif232 {
	position : relative;
	margin : auto;
	animation : anim-app 0.5s;
	-webkit-animation : anim-app 0.5s;
}

#video.actif235 {
	position : relative;
	margin : auto;
	animation : anim-clign 0.3s;
	-webkit-animation : anim-clign 0.3s;
}

#media.actif233 {
	width : 570px;
	position : relative;
	margin : auto;
}
#playlist.actif233 {
	position : relative;
	top : 0px;
	float : left;
	animation : anim-up600 0.5s ease-out;
	-webkit-animation : anim-up600 0.5s ease-out;
}
#audio.actif233 {
	position : relative;
	top : 0px;
	float : right;
	animation : anim-wait50-up600 1s ease-out;
	-webkit-animation : anim-wait50-up600 1s ease-out;
}
#audio.actif233 #audio-titre {
	background-image : url(../images/audio233.jpg);
}

#video.actif234 {
	position : relative;
	margin : auto;
	animation : anim-clign 0.3s;
	-webkit-animation : anim-clign 0.3s;
}
#player.actif234 {
	position : relative;
	top : 0px;
	width : 240px;
	margin : 30px auto;
	animation : anim-wait50-up250 1s ease-out;
	-webkit-animation : anim-wait50-up250 1s ease-out;
}

@media (max-width:800px), (max-height:500px) {
	#titre23.actif {
		padding : 0 50px 0 50px;
	}
	#menu23.actif {
		position : static;
		left : 0;
		padding-left : 0;
		background : none;
		width : 240px;
		height : 69px;
		font-size : 0.9em;
		margin : 10px auto 10px auto;
	}
	#menu23.actif div.smenu {
		float : left;
		height : 100%;
	}
	#smenu23A {
		text-align : right;
	}
	#smenu23B {
		display : block;
		margin : 0 10px 0 10px;
	}
	#smenu23C {
		text-align : left;
	}
	#elem230 {
		background : url(../images/menu23.png) 0% 0% no-repeat;
		background-size : 100%;
		width : 75px;
		height : 69px;
	}
	#elem231, #elem233 {
		top : 0;
	}
	#elem232, #elem234 {
		bottom : 0;
	}
	#elem231, #elem232, #elem235 {
		height : 20px;
	}
	#texte23.actif {
		padding : 10px 50px 0 50px;
	}
	#image23.actif div {
		height: 180px;
		width: 300px;
	}
	#media.actif233 {
		width : 400px;
	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#titre23.actif {
		margin : 0;
		padding : 0;
		width : 100%;
		animation : none;
		-webkit-animation : none;
	}
	#titre23.actif div.encadre {
		margin : 1em;
	}

	#menu23.actif {
		background : none;
		position : static;
		margin : 0;
		padding : 0;
		width : 100%;
		height : 69px;
		font-size : 0.9em;
		font-weight : bold;
		animation : none;
		-webkit-animation : none;
	}
	#menu23.actif div.smenu {
		position : relative;
		float : left;
		width : 100%;
		height : auto;
		padding : 0;
	}
	#menu23.actif #smenu23B {
		display : block;
		margin : 0;
	}
	#menu23.actif #elem235 {
		display : none;
	}
	
	#menu23.actif div.smenu div {
		float : left;
		width : 48%;
		height : auto;
		text-align : center;
		margin : 1%;
		padding : 0.5em 0 0.5em 0;
		background-color : white;
	}
	#menu23.actif div.smenu #elem230 {
		background-image : none;
		width : 98%;
		height : auto;
	}
	#menu23.actif div.smenu div a {
		color : black;
	}
	#menu23.actif #smenu23C {
		margin-bottom : 1em;
	}
	#texte23.actif {
		position : static;
		margin : 1em;
		padding : 1em 0 0 0;
		animation : none;
		-webkit-animation : none;
	}
	#image23.actif {
		display : none;
	}
	#closebox.actif232 {
		position : fixed;
	}

}


/***********************
******* TIAMAT *********
***********************/

#titre51.actif {
	position : relative;
	text-align : center;
	padding : 0 50px 0 250px;
	animation : anim-app 5s ease-in;
	-webkit-animation : anim-app 5s ease-in;
}
#texte51.actif {
	padding : 30px 50px 100px 250px;
	animation : anim-app-right100 5s ease-in;
	-webkit-animation : anim-app-right100 5s ease-in;
}

#image51.actif {
	position : fixed;
	left : 0px;
	bottom : 0px;
	animation : anim-app 3s;
	-webkit-animation : anim-app 3s;
}
#image51.actif div {
	position : absolute;
	left : 0px;
	bottom : 0px;
	background : url(../images/img51.jpg) 0 0 no-repeat; 
	background-size : 100%;
	width : 277px;
	height : 600px;
	opacity:.8;
	filter:alpha(opacity=80);
}
#menu51.actif {
	position : fixed;
	right : 250px;
	bottom : 0px;
	background : url(../images/menu51.png) 0 100% no-repeat; 
	background-size : 100%;
	width : 200px;
	height : 132px;
	font-weight : bold;
	animation : anim-app 3s;
	-webkit-animation : anim-app 3s;
}
#menu51.actif div {
	text-align : center;
	margin-bottom : 10px;
}

#photo.actif511 {
	position : relative;
	margin : auto;
	animation : anim-app 0.5s;
	-webkit-animation : anim-app 0.5s;
}

#audio.actif512 {
	position : relative;
	top : 100px;
	margin : auto;
	animation : anim-up600 1s ease-out;
	-webkit-animation : anim-up600 1s ease-out;
}
#audio.actif512 #audio-titre {
	background-image : url(../images/audio512.jpg);
}

@media (max-width:800px), (max-height:500px) {
	#titre51.actif {
		padding : 0 50px 0 150px;
	}
	#texte51.actif {
		padding : 30px 50px 100px 150px;
	}
	#image51.actif div {
		width : 185px;
		height : 400px;
	}
	#menu51.actif {
		width : 150px;
		height : 112px;
		right : 200px;
	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#titre51.actif {
		margin : 1em;
		padding : 0;
		animation : none;
		-webkit-animation : none;
	}
	#menu51.actif {
		position : static;
		background : none; 
		margin : 0 1em 0 1em;
		width : auto;
		height : auto;
		animation : none;
		-webkit-animation : none;
	}
	#menu51.actif div {
		background-color : white;
		position : static;
		padding-top : 0em;
		animation : none;
		-webkit-animation : none;
	}
	#menu51.actif div a {
		color : black;
	}

	#texte51.actif {
		margin : 1em 1em 1em 1em;
		padding : 0;
		animation : none;
		-webkit-animation : none;
	}
	#image51.actif {
		display : none;
	}
	#closebox.actif511 {
		position : fixed;
	}
}

/**************************
******* PÉDAGOGIE *********
**************************/


#texte3.actif {
	margin : 0 -100px 0 100px;
	padding-right : 200px;
	animation : anim-app-left200 1s;
	-webkit-animation : anim-app-left200 1s;
}
#texte3.actif ul li {
	margin : 0 0 20px 10px;
}

#image3.actif {
	position : fixed;
	left : 0px;
	bottom : 0px;
	animation : anim-app 3s;
	-webkit-animation : anim-app 3s;
}
#image3.actif div {
	position : absolute;
	left : 0px;
	bottom : 0px;
	background : url(../images/img3.jpg) 0 0 no-repeat; 
	background-size : 100%;
	width : 450px;
	height : 300px;
	opacity:.5;
	filter:alpha(opacity=50);
}
@media (max-width:800px), (max-height:500px) {
	#texte3.actif {
		margin : 0 -50px 0 50px;
		padding-right : 100px;
	}
	#image3.actif div {
		width : 300px;
		height : 200px;
	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#texte3.actif {
		margin : 1em;
		padding : 0;
		animation : none;
		-webkit-animation : none;
	}
	#texte3.actif ul li {
		margin : 0 0 1em 0.5em;
	}

	#image3.actif {
		display : none;
	}
}

/********************************
******* QUI SOMMES NOUS *********
********************************/


#texte41.actif {
	padding : 0 50px 0 250px;
	margin : 0;
	animation : anim-app-right200 1s;
	-webkit-animation : anim-app-right200 1s;
}
#image41.actif {
	position : fixed;
	top : 0;
	left : 50px;
	animation : anim-app-up100 5s ease-out;
	-webkit-animation : anim-app-up100 5s ease-out;
}
#image41.actif div {
	background: url(../images/img41.jpg) 0 0 no-repeat; 
	height: 436px;
	width: 275px;
	opacity:.8;
	filter:alpha(opacity=80);
}
@media (max-width:800px), (max-height:500px) {
	#texte41.actif {
		padding : 50px 50px 0 140px;
	}
	#image41.actif {
		left : 0;
		opacity:.5;
		filter:alpha(opacity=50);
	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#texte41.actif {
		margin : 1em;
		padding : 0;
		animation : none;
		-webkit-animation : none;
	}
	#image41.actif {
		display : none;
	}
}

/****************************
******* LES MEMBRES *********
****************************/


#image42.actif {
	position : fixed;
	bottom : 50px;
	left : 20px;
	animation : anim-app-left500 0.5s;
	-webkit-animation : anim-app-left500 0.5s;
}
#image42.actif .membres-ligne {
}
#image42.actif .membres-portrait {
	margin : 1px;
	width : 75px;
}
#image42.actif .membres-type {
	float : left;
	margin : 1px;
	height : 100px;
	width : 100px;
	background-color : black;
	text-align : center;
	border-top : solid 1px #460000;
	transform : rotate(-90deg);
	-webkit-transform : rotate(-90deg);
}

#texte42.actif {
	position : relative;
	top : 50px;
	width : 60%;
	margin : 0 auto 50px auto;
	border : solid 2px white;
	background-color : black;
	min-height : 220px;
}
#texte42.actif div.actif {
	padding : 10px;
}
#texte42.actif div.actif div {
	width : 100%;
	text-align : left;
}
#texte42.actif div.actif img {
	float : left;
	width : 150px;
	margin : 0 10px 5px 0;
}

@media (max-width:800px), (max-height:500px) {
	#image42.actif {
		position : absolute;
		top : 0;
	}
	#image42.actif .membres-ligne {
		float : left;
		width : 80px;
	}
	#image42.actif .membres-type {
		width : 75px;
		transform : none;
		-webkit-transform : none;
	}
	#image42.actif .membres-portrait {
		float : none;
	}
}

@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#image42.actif {
		margin : 1em;
		position : static;
		animation : none;
		-webkit-animation : none;
	}
	#image42.actif .membres-ligne {
		float : none;
		width : 100%;
		text-align : center;
	}
	#image42.actif .membres-portrait {
		float : none;
		margin : 1em auto 0 auto;
		width : 50%;
		max-width : 6em;
	}

	#image42.actif .membres-type {
		float : none;
		width : auto;
		height : auto;
		margin : 2em 0 0 0;
		border : solid 0.25em #460000;
		transform : none;
		-webkit-transform : none;
	}

	#texte42.actif {
		top : 0;
		width : auto;
		margin : 0.5em;
		border : solid 0.25em white;
		background-color : black;
	}
	#texte42.actif div.actif {
		padding : 0.5em;
	}
	#texte42.actif div.actif img {
		float : left;
		width : 5em;
		margin : 0 0.25em 0.1em 0;
	}
	#closebox.actif4201, #closebox.actif4202, #closebox.actif4203, #closebox.actif4204, #closebox.actif4205, #closebox.actif4206, #closebox.actif4207, #closebox.actif4208, #closebox.actif4209 {
		position : absolute;
		top : 0.5em;
		right : 0.75em;
	}

	
}

/*******************************
******* NOUS CONTACTER *********
*******************************/

#texte6.actif {
	margin : auto;
	text-align : center;
	animation : anim-wait30-app 2s;
	-webkit-animation : anim-wait30-app 2s;
}
#texte6.actif div.texte6-section {
	position : relative;
	width : 380px;
	margin : auto;
}
#texte6.actif div.smallpadding {
	padding : 0.5em 0 0.5em 0;
}
#texte6.actif div.nopadding {
	padding : 0;
}
#texte6.actif iframe {
	overflow : hidden;
}
#texte6.actif img {
	height : 14px;
}

#image6.actif {
	position : fixed;
	bottom : 0px;
	left : 0px;
	width : 100%;
}
#image6.actif img {
	height : 8px;
}
#image6_img {
	background : url(../images/img43.jpg) 0 100% no-repeat; 
	width : 400px;
	height : 300px;
	position : relative;
	padding-right : 220px;
	margin : auto;
	animation : anim-app 2s;
	-webkit-animation : anim-app 2s;
}
#image6_txt1, #image6_txt2 {
	position : absolute;
	font-size : 0.6em;
	bottom : 5px;
	opacity:.3;
	filter:alpha(opacity=30);
	transform-origin : left bottom;
	-webkit-transform-origin : left bottom;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
}
#image6_txt1 {
	left : 0;
}
#image6_txt2 {
	left : 427px;
}

@media (max-width:800px), (max-height:500px) {
	#texte6.actif div.texte6-section {
		width : 320px;
	}
	#image6_img {
		opacity:.2;
		filter:alpha(opacity=20);
		padding-right : 110px;
		width : 300px;
		background-size : 60%;
	}
	#image6_txt1, #image6_txt2 {
		opacity:.6;
		filter:alpha(opacity=60);
	}
	#image6_txt2 {
		left : 272px;
		width : 180px;
	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#texte6.actif {
		margin : 1em;
		animation : none;
		-webkit-animation : none;
	}
	#texte6.actif div.texte6-section {
		position : relative;
		width : 100%;
	}
	#texte6.actif div.encadre {
	}
	#texte6.actif img {
		height : 1em;
	}
	#image6 {
		display : none;
	}
}