/* make keyframes that tell the start state and the end state of our object */

	@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
	@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
	@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
	
	body {
		overflow-x: hidden;
	}

	#effectif .fade-in {
	    opacity:0;  /* make things invisible upon start */
	    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	    -moz-animation:fadeIn ease-in 1;
	    animation:fadeIn ease-in 1;

	    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	    -moz-animation-fill-mode:forwards;
	    animation-fill-mode:forwards;
	}

	/* Delay */

	#effectif .fade-in.delay_025 {
		-webkit-animation-delay: 0.25s;
		-moz-animation-delay: 0.25s;
		animation-delay: 0.25s;
	}

	#effectif .fade-in.delay_050 {
		-webkit-animation-delay: 0.5s;
		-moz-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}

	#effectif .fade-in.delay_075 {
		-webkit-animation-delay: 0.75s;
		-moz-animation-delay: 0.75s;
		animation-delay: 0.75s;
	}

	#effectif .fade-in.delay_100 {
		-webkit-animation-delay: 1.0s;
		-moz-animation-delay:1.0s;
		animation-delay: 1.0s;
	}

	#effectif .fade-in.delay_125 {
		-webkit-animation-delay: 1.25s;
		-moz-animation-delay:1.25s;
		animation-delay: 1.25s;
	}

	#effectif .fade-in.delay_150 {
		-webkit-animation-delay: 1.5s;
		-moz-animation-delay: 1.5s;
		animation-delay: 1.5s;
	}

	/* Duration */

	#effectif .fade-in.duration_050 {
	    -webkit-animation-duration:0.5s;
	    -moz-animation-duration:0.5s;
	    animation-duration:0.5s;
	}

	#effectif .fade-in.duration_075 {
	    -webkit-animation-duration:0.75s;
	    -moz-animation-duration:0.75s;
	    animation-duration:0.75s;
	}

	#effectif .fade-in.duration_100 {
	    -webkit-animation-duration:1s;
	    -moz-animation-duration:1s;
	    animation-duration:1s;
	}

	#effectif .fade-in.duration_125 {
	    -webkit-animation-duration:1.25s;
	    -moz-animation-duration:1.25s;
	    animation-duration:1.25s;
	}

	#effectif .fade-in.duration_150 {
	    -webkit-animation-duration:1.5s;
	    -moz-animation-duration:1.5s;
	    animation-duration:1.5s;
	}

	/* Elements */

	#effectif {
		display: block;
		position: relative;
		width: 100%;
		top: 45px;
		margin: 0 auto;
	}

	@media screen and ( max-width: 980px ) {

		#effectif {
			display: none;
		}


	}

	#effectif div {
		background-image: url('http://www.portailrh.org/Ressources/images2016/effectif.png');
		background-repeat: no-repeat;
		background-size: cover;
		width: 234px;
		height: 60px;
		position: absolute;
	}

	/* Element color */

	#effectif .effectif_gray_01 {
		background-position: 0 0;
	}

	#effectif .effectif_gray_02 {
		background-position: 0 11.111%;
	}

	#effectif .effectif_gray_03 {
		background-position: 0 22.222%;
	}

	#effectif .effectif_black {
		background-position: 0 33.333%;
	}

	#effectif .effectif_blue {
		background-position: 0 44.444%;
	}
	
	/* Barre */
	
	#effectif .effectif_gray_01_b {
		background-position: 0 55.555%;
	}

	#effectif .effectif_gray_02_b {
		background-position: 0 66.666%;
	}

	#effectif .effectif_gray_03_b {
		background-position: 0 77.777%;
	}

	#effectif .effectif_black_b {
		background-position: 0 88.888%;
	}

	#effectif .effectif_blue_b {
		background-position: 0 100%;
	}


	/* Position of the elements */
	/* Left */
	#effectif_l01 { left: -119px; top: 40px; }
	#effectif_l02 { left: -80px; top: 82px; }
	#effectif_l03 { left: -175px; top: 80px; }
	#effectif_l04 { left: -142px; top: 105px; }
	#effectif_l05 { left: 7px; top: 132px; }
	#effectif_l06 { left: -102px; top: 162px; }
	#effectif_l07 { left: -45px; top: 172px; }
	#effectif_l08 { left: -132px; top: 195px; }
	#effectif_l09 { left: -32px; top: 207px; }
	#effectif_l10 { left: -187px; top: 232px; }
	#effectif_l11 { left: -86px; top: 231px; }
	#effectif_l12 { left: 37px; top: 282px; }
	#effectif_l13 { left: -132px; top: 275px; }
	#effectif_l14 { left: -40px; top: 277px; }
	#effectif_l15 { left: -100px; top: 307px; }
	#effectif_l16 { left: -19px; top: 321px; }
	#effectif_l17 { left: -138px; top: 335px; }
	#effectif_l18 { left: -57px; top: 355px; }
	#effectif_l19 { left: -138px; top: 375px; }
	#effectif_l20 { left: -101px; top: 402px; }
	#effectif_l21 { left: -42px; top: 415px; }
	#effectif_l22 { left: -131px; top: 438px; }
	#effectif_l23 { left: -27px; top: 457px; }
	#effectif_l24 { left: -84px; top: 473px; }
	#effectif_l25 { left: 40px; top: 495px; }
	#effectif_l26 { left: -130px; top: 516px; }
	#effectif_l27 { left: -40px; top: 525px; }
	#effectif_l28 { left: -91px; top: 552px; }

	/* Right */
	#effectif_r01 { right: -35px; top: 40px; }
	#effectif_r02 { right: -62px; top: 82px; }
	#effectif_r03 { right: -2px; top: 80px; }
	#effectif_r04 { right: -97px; top: 105px; }
	#effectif_r05 { right: -182px; top: 132px; }
	#effectif_r06 { right: -55px; top: 162px; }
	#effectif_r07 { right: -157px; top: 172px; }
	#effectif_r08 { right: -41px; top: 195px; }
	#effectif_r09 { right: -127px; top: 207px; }
	#effectif_r10 { right: -4px; top: 232px; }
	#effectif_r11 { right: -128px; top: 231px; }
	#effectif_r12 { right: -211px; top: 282px; }
	#effectif_r13 { right: -32px; top: 275px; }
	#effectif_r14 { right: -132px; top: 277px; }
	#effectif_r15 { right: -57px; top: 307px; }
	#effectif_r16 { right: -157px; top: 321px; }
	#effectif_r17 { right: -54px; top: 335px; }
	#effectif_r18 { right: -187px; top: 355px; }
	#effectif_r19 { right: -9px; top: 375px; }
	#effectif_r20 { right: -58px; top: 402px; }
	#effectif_r21 { right: -160px; top: 415px; }
	#effectif_r22 { right: -46px; top: 438px; }
	#effectif_r23 { right: -132px; top: 457px; }
	#effectif_r24 { right: -132px; top: 473px; }
	#effectif_r25 { right: -199px; top: 495px; }
	#effectif_r26 { right: -40px; top: 516px; }
	#effectif_r27 { right: -148px; top: 525px; }
	#effectif_r28 { right: -55px; top: 552px; }

	/* element size */

	
	#effectif .effectif_47 { width: 47px; height: 11.75px; }
	#effectif .effectif_58 { width: 58.5px; height: 15px; }
	#effectif .effectif_76 { width: 76px; height: 19px; }
	#effectif .effectif_92 { width: 92px; height: 23px; }
	#effectif .effectif_102 { width: 102px; height: 25.5px; }
	#effectif .effectif_117 { width: 117px; height: 30px; }
	#effectif .effectif_122 { width: 122px; height: 30.5px; }
	#effectif .effectif_144 { width: 144px; height: 36px; }
	
	#effectif .effectif_94 { width: 94px; height: 23.5px; }
	#effectif .effectif_117 { width: 117px; height: 30px; }
	#effectif .effectif_152 { width: 152px; height: 38px; }
	#effectif .effectif_184 { width: 184px; height: 46px; }
	#effectif .effectif_204 { width: 204px; height: 51px; }
	#effectif .effectif_234 { width: 234px; height: 60px; }
	#effectif .effectif_244 { width: 244px; height: 61px; }
	#effectif .effectif_288 { width: 288px; height: 72px; }