html {font-size: 100%}
body {margin: 0; font-size: 1em;}

a {display: block;}


	/* Chargement */

	#loader {display: none}
	.avecJS #loader {position: fixed; width: 100px; height: auto; top: 50%; left: 50%; margin-top: -4.629%; margin-left: -2,604%; z-index: 1000; display: block;}

	#ensemble {display: block}
	.avecJS #ensemble {display: none}

	/* Menu Blanc Fermé */

	#menuferme {background-color: #ffffff; width: 6%; height: 17%; position: fixed; top: 50%; margin-top: -3%; left: 0px; z-index: 100;  cursor: pointer; background-size: 100% 100%; box-shadow: 5px 0px 15px 0px rgba(0,0,0,0.75);}

			#logo {width: 63.36805555%; height: auto; position: absolute; top: 13.5%; left: 20%; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
				#logo:hover {-webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -o-transform:rotate(-360deg); -ms-transform:rotate(-360deg); transform:rotate(-360deg);}
			#burger {width: 63.36805555%; height: auto; position: absolute; top: 56%; left: 20%;}
			#surcouche {background-color: #f5963c; width: 3.5%; height: 100%; position: absolute; top: 0%; left: 0px; z-index: 120}

	/* Menu Blanc Ouvert */

	#menuouvert {background-color: #2E3033; width: 22.3958333%; height: 100%; position: fixed; z-index: 200; left: 0px; display: none; background-size: 100% 100%; box-shadow: 5px 0px 15px 0px rgba(0,0,0,0.75);}

			#logoblanc {width: 3.80208333%; height: auto; position: fixed; top: 10%; left: 3.5%;}
			#fermeture{width: 2.8125%; height: auto; position: fixed; top: 85%; left: 3.5%; z-index: 210; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
				#fermeture:hover {-webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -o-transform:rotate(-360deg); -ms-transform:rotate(-360deg); transform:rotate(-360deg);}
			#surcouche2 {background-color: #f5963c; width: 8px; height: 100%; position: fixed; top: 0px; left: 0px}
			#traceur {height: 2.037037%; width: 0.5%; position: absolute; top: 37.2%; left: 12.5%; background-color: #f5963c; z-index: 210}

			.menulangue {top: 9.5%; position: fixed; height: 100%; font-family: 'Raleway', sans-serif; font-size: 0.8em; text-transform: uppercase; left: 14.8488372093%; list-style: none; color: #76859C; letter-spacing: 5px;}
						.menulangue li {height: 3%;}
					.menulangue li a {text-decoration: none; color: #76859C}
					.menulangue li a:hover {color: #f5963c;}

				#menutexte {top: 25%; position: fixed; height: 100%; font-family: 'Raleway', sans-serif; font-size: 1.2em; left: 1.5%; list-style: none; color: #ffffff; letter-spacing: 10px;}
					#menutexte ul {height: 100%; width: 70%;}
						#menutexte li {height: 7%;}
					#menutexte li a {text-decoration: none; color: #ffffff}

	#menuhome:hover {color: #76859C;}
	#menuabout:hover {color: #76859C;}
	#menuwork:hover {color: #76859C;}
	#menuservices:hover {color: #76859C;}
	#menuexperiments:hover {color: #76859C;}
	#menucontact:hover {color: #76859C;}

	.follow {font-family: 'Raleway', sans-serif; font-size: 0.7em; letter-spacing: 2px; position: fixed; top: 73%; left: 3.5%; text-transform: uppercase; color: #76859C;}
	.iconefollow {display: inline-block; position: fixed; top: 77%; left: 3.5%; width: 20%;}
		.facebook {width: 12%; height: auto; cursor: pointer; float: left;}
		.linkedin {width: 12%; height: auto; margin-left: 9%; cursor: pointer; float: left;}
		.behance {width: 12%; height: auto; margin-left: 9%; cursor: pointer; float: left;}
		.vimeo {width: 12%; height: auto; margin-left: 9%; cursor: pointer; float: left;}

	.retourligne {clear: both;}


	/* Page Home */

	#page {background-color: #ffffff; width: 100%; height: 100%; position: fixed; z-index: 1;  background-size: 100% 100%}

				#traitgauche {background-color: #f5963c; width: 20.83333333%; height: 1px; position: absolute; top: 29.62962963%; left: 0%; z-index: 25}

				
			#lettrec {height: 56px; width: 43px; position: absolute; left: 23.4375%; top: 26.851851851%; background-image: url('../Images/c.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
				#traithaut1 {background-color: #f5963c; width: 1px; height: 23.14814814%; position: absolute; top: 0%; left: 34.375%; z-index: 25}
			#lettrea {height: 59px; width: 56px; position: absolute; left: 32.8125%; top: 26.84%; background-image: url('../Images/a.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
			#lettrea:hover {-webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);}
				#traithaut2 {background-color: #f5963c; width: 1px; height: 18.51851851851%; position: absolute; top: 0%; left: 44.79166666666666%; z-index: 25}
			#lettrer {height: 54px; width: 36px; position: absolute; left: 43.75%; top: 22.08333333%; background-image: url('../Images/r.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 5.5s; animation-delay: 5.5s;}

			@keyframes bounce{
	        from {transform: translateY(0);}
	        50% {transform: translateY(10px);}
            to   {transform: translateY(0px);}
			}

				#traithaut3 {background-color: #f5963c; width: 1px; height: 23.14814814%; position: absolute; top: 0%; left: 55.729166666%; z-index: 25}
			#lettret {height: 54px; width: 40px; position: absolute; left: 54.6875%; top: 26.851851851%; background-image: url('../Images/t.png'); background-repeat: no-repeat; z-index: 30}
				#traithaut4 {background-color: #f5963c; width: 1px; height: 32.40744074%; position: absolute; top: 0%; left: 65.625%; z-index: 25}
			#lettreo {height: 56px; width: 57px; position: absolute; left: 64.0625%; top: 37.037037%; background-image: url('../Images/o.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}

				#traithautdroit {background-color: #f5963c; width: 20.83333333%; height: 1px; position: absolute; top: 29.62962963%; left: 79.16666666%; z-index: 25}
			#lettren {height: 61px; width: 48px; position: absolute; left: 73.4583333%; top: 26.84%; background-image: url('../Images/n.png'); background-repeat: no-repeat; z-index: 30}

				#traitbas1 {background-color: #f5963c; width: 1px; height: 31%; position: absolute; bottom: 0%; left: 24.4791666%; z-index: 25}
			#lettres {height: 56px; width: 35px; position: absolute; left: 23.69791666%; top: 55.87037037%; background-image: url('../Images/s.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
				#traitbas2 {background-color: #f5963c; width: 1px; height: 23.14814814%; position: absolute; top: 76.851851851%; left: 34.375%; z-index: 25}
			#lettret2 {height: 54px; width: 40px; position: absolute; left: 33.3333%; top: 63.8888%; background-image: url('../Images/t.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s;}
				#traitbas3 {background-color: #f5963c; width: 1px; height: 23.14814814%; position: absolute; top: 76.851851851%; left: 44.79166666666666%; z-index: 25}
			#lettree1 {height: 54px; width: 30px; position: absolute; left: 44.0104166%; top: 63.8888%; background-image: url('../Images/e.png'); background-repeat: no-repeat; z-index: 30}
				#traitbas4 {background-color: #f5963c; width: 1px; height: 23.14814814%; position: absolute; top: 76.851851851%; left: 55.729166666%; z-index: 25}
			#lettree2 {height: 54px; width: 30px; position: absolute; left: 54.6875%; top: 63.8888%; background-image: url('../Images/e.png'); background-repeat: no-repeat; z-index: 30;}
				#traitbas5 {background-color: #f5963c; width: 1px; height: 18.51851851%; position: absolute; top: 81.481481414%; left: 65.625%; z-index: 25}
			#lettrev {height: 58px; width: 49px; position: absolute; left: 64.4%; top: 71.296296%; background-image: url('../Images/v.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 6.5s; animation-delay: 6.5s;}
			#lettrey {height: 42px; width: 18px; position: absolute; left: 8%; top: 86%; background-image: url('../Images/y.png'); background-repeat: no-repeat; z-index: 31; display: block; opacity: 0; animation: opacity ; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; animation-duration: 7s;}

			@keyframes opacity{
				        from {opacity: 0;}
				        50% {opacity: 1;}
			            to   {opacity: 0;}
						}

				#traitbasdroit {background-color: #f5963c; width: 21.5%; height: 1px; position: absolute; top: 66.66666%; right: 0%; z-index: 25}
			#lettree3 {height: 54px; width: 30px; position: absolute; left: 73.9583333%; top: 63.88888%; background-image: url('../Images/e.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
			#lettree3:hover {-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg);}
				
				#graphic {background-image: url('../Images/graphic.png'); background-repeat: no-repeat; height: 29px; width: 296px; position: absolute; z-index: 22; top: 46.25%; left: 32.11458333%}
				#designer {background-image: url('../Images/designer.png'); background-repeat: no-repeat; height: 30px; width: 337px; position: absolute; z-index: 22; top: 50.75%; left: 50.520833%}


				#fondnoir {background-color: #242525; width: 94.79166667%; height: 90.74074074%; position: absolute; margin-right: auto; top: 4.62962963%; left: 2.60416667%; z-index: 20; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

			#contact {font-family: 'Raleway', sans-serif; font-size: 1.5em; position: absolute; top: 24%; margin-left: 60px; text-transform: uppercase; letter-spacing: 15px; color: #76859C; visibility: hidden; opacity: 0; margin-top: -100px}
			#about {font-family: 'Raleway', sans-serif; font-size: 1.5em; position: absolute; top: 0%; margin-top: 21px; margin-left: 70px; text-transform: uppercase; letter-spacing: 15px; color: #76859C; visibility: hidden; opacity: 0;}
			#services {font-family: 'Raleway', sans-serif; font-size: 1.5em; position: absolute; top: 0%; margin-left: 55px; text-transform: uppercase; letter-spacing: 15px; color: #76859C; visibility: hidden; opacity: 0; margin-top: 32px}
			#w {font-family: 'Raleway', sans-serif; font-size: 1.5em; position: absolute; top: 0%; margin-left: -43px; text-transform: uppercase; letter-spacing: 15px; color: #76859C; visibility: hidden; opacity: 0; margin-top: -28px}
			#rk {font-family: 'Raleway', sans-serif; font-size: 1.5em; position: absolute; top: 0%; margin-left: 75px; text-transform: uppercase; letter-spacing: 15px; color: #76859C; visibility: hidden; opacity: 0; margin-top: 28px}
			#experiments {font-family: 'Raleway', sans-serif; font-size: 1.5em; position: absolute; top: 0%; margin-top: 10px; margin-left: 47px; text-transform: uppercase; letter-spacing: 15px; color: #76859C; visibility: hidden; opacity: 0;}


	/* Menu Noir Fermé */

	#menufermenoir {background-color: #242525; width: 6%; height: 17%; position: fixed; top: 50%; margin-top: -3%; left: 0px; z-index: 100;  cursor: pointer; background-size: 100% 100%; box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.5);}

			#logoblancmenuferme {width: 63.36805555%; height: auto; position: absolute; top: 13.5%; left: 20%; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
				#logoblancmenuferme:hover {-webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -o-transform:rotate(-360deg); -ms-transform:rotate(-360deg); transform:rotate(-360deg);}
			#burgerblancmenuferme {width: 30.3819444%; height: auto; position: absolute; top: 70%; left: 36%;}


	/* Page Contact */

	#pagecontact {background-color: #ffffff; width: 100%; height: 100%; position: fixed; z-index: 1;  background-size: 100% 100%}

		#fondnoircontact {background-color: #242525; width: 55.208333%; height: 95.37037037%; position: absolute; top: 0%; left: 10.41666%; z-index: 20; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}
			#processus {position: absolute; top: 4.62962963%; left: 32.5%; width: 35%; height: auto; z-index: 50; }
				#traitgaucheprocessus {background-color: #ffffff; width: 28.30188679%; height: 1px; position: absolute; z-index: 50; top: 6.25%; left: 0%;}
				#traitdroitprocessus {background-color: #ffffff; width: 28.30188679%; height: 1px; position: absolute; z-index: 50; top: 6.25%; right: 0%;}
					#etape1 {position: absolute; top: 12.45283019%; left: 11.50943396%; width: 3.679245283%; height: auto; z-index: 50; }
					#etape2 {position: absolute; top: 12.45283019%; left: 30.18867925%; width: 3.679245283%; height: auto; z-index: 50; }
					#etape3 {position: absolute; top: 12.45283019%; left: 48.11320755%; width: 3.679245283%; height: auto; z-index: 50; }
					#etape4 {position: absolute; top: 12.45283019%; left: 66.50943396%; width: 3.679245283%; height: auto; z-index: 50; }
					#etape5 {position: absolute; top: 12.45283019%; left: 84.90566038%; width: 3.679245283%; height: auto; z-index: 50; }
						#cafe {position: absolute; top: 18.44660194%; left: 8%; width: 9.245283019%; height: auto; z-index: 50; }
						#loupe {position: absolute; top: 18.44660194%; left: 28%; width: 8.490566038%; height: auto; z-index: 50; }
						#compas {position: absolute; top: 18.44660194%; left:47%; width: 6.037735849%; height: auto; z-index: 50; }
						#developpement {position: absolute; top: 18.44660194%; left: 64%; width: 8.396226415%; height: auto; z-index: 50; }
						#livraison {position: absolute; top: 18.44660194%; left: 82.5%; width: 8.58490566%; height: auto; z-index: 50; }
							#briefing {position: absolute; top: 31.06796117%; left: 8%; width: 13%; height: 10%; z-index: 50; font-family: 'Raleway', sans-serif; font-size: 0.8em; text-transform: uppercase; color: #76859C; line-height: 18px}
							#reflexion {position: absolute; top: 31.06796117%; left: 27.75%; width: 13%; height: 10%; z-index: 50; font-family: 'Raleway', sans-serif; font-size: 0.8em; text-transform: uppercase; color: #76859C; line-height: 18px}
							#design {position: absolute; top: 31.06796117%; left: 46.5%; width: 13%; height: 10%; z-index: 50; font-family: 'Raleway', sans-serif; font-size: 0.8em; text-transform: uppercase; color: #76859C; line-height: 18px}
							#integration {position: absolute; top: 31.06796117%; left: 64%; width: 13%; height: 10%; z-index: 50; font-family: 'Raleway', sans-serif; font-size: 0.8em; text-transform: uppercase; color: #76859C; line-height: 18px}
							#champagne {position: absolute; top: 31.06796117%; left: 82.5%; width: 13%; height: 10%; z-index: 50; font-family: 'Raleway', sans-serif; font-size: 0.8em; text-transform: uppercase; color: #76859C; line-height: 18px}
								
								#paragrapheprincipalcontact {position: absolute; top: 38.5%; left: 7.075471698%; z-index: 60; width: 87%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #ffffff; line-height: 25px}

								#soulignementnom {background-color: #f5963c; position: absolute; top: 54.39805825%; left: 7.075471698%; z-index: 50; width: 85.8490566%; height: 1px;}
								#nom {position: absolute; top: 52%; left: 7.075471698%; z-index: 60; font-family: 'Raleway', sans-serif; font-size: 0.7em; color: #ffffff;}
								#soulignementobjet {background-color: #f5963c; position: absolute; top: 60.22330097%; left: 7.075471698%; z-index: 50; width: 85.8490566%; height: 1px;}
								#objet {position: absolute; top: 58%; left: 7.075471698%; z-index: 60; font-family: 'Raleway', sans-serif; font-size: 0.7em; color: #ffffff;}
								#soulignementemail {background-color: #f5963c; position: absolute; top: 66.04854369%; left: 7.075471698%; z-index: 50; width: 85.8490566%; height: 1px;}
								#email {position: absolute; top: 63.7%; left: 7.075471698%; z-index: 60; font-family: 'Raleway', sans-serif; font-size: 0.7em; color: #ffffff;}
								#contourmessage {border: 1px solid #f5963c; position: absolute; top: 71.04854369%; left: 7.075471698%; z-index: 50; width: 85.8490566%; height: 17.47572816%;}
								#message {position: absolute; top: 71.95%; left: 7.975471698%; z-index: 60; font-family: 'Raleway', sans-serif; font-size: 0.7em; color: #ffffff;}

								#boutonenvoyer {border: 1px solid #f5963c; position: absolute; top: 92.04854369%; left: 40.075471698%; z-index: 40; width: 18.86792453%; height: 2.854368932%; cursor: pointer; background-color: #242525; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c!important; text-transform: uppercase; letter-spacing: 5px; text-align: center;}

								.input {width: 85.8490566%; border: none; background-color: #242525; color: #000;}

								#message {height: 15.5%; width: 84%; resize: none;}

		#titrecontact {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #242525; z-index: 50; position: absolute; top: 22%; left: 71.3541666%;}	

		#traittitrecontact {background-color: #f5963c; height: 1px; width: 28.6458333%; position: absolute; z-index: 20; top: 29.62962963%; right: 0%;}

			#adresse {font-family: 'Montserrat', sans-serif; font-size: 1em; letter-spacing: 3px; position: absolute; top: 41%; left: 71.3541666%; z-index: 15;}
			#traitadresse {background-color: #f5963c; height: 1px; width: 2.6041666%; position: absolute; z-index: 15; top: 42.12962963%; left: 67.2291666%;}

				#paragraphecontact {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; z-index: 15; top: 46.222%; left: 71.3541666%; color: #878786 !important;}
				#paragraphecontact2 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; z-index: 15; top: 49.222%; left: 71.3541666%; color: #878786 !important;}
				#paragraphecontact3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; z-index: 15; top: 54.222%; left: 71.3541666%; color: #878786 !important;}
				#paragraphecontact4 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; z-index: 15; top: 57.222%; left: 71.3541666%; color: #878786 !important;}
				#paragraphecontact5 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; z-index: 15; top: 72.222%; left: 71.3541666%; color: #878786 !important;}
				#paragraphecontact6 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; z-index: 15; top: 75.222%; left: 71.3541666%; color: #878786 !important;}

			#coordonnees {font-family: 'Montserrat', sans-serif; font-size: 1em; letter-spacing: 3px; position: absolute; top: 66.911%; left: 71.3541666%; z-index: 15;}
			#traitcoordonnees {background-color: #f5963c; height: 1px; width: 2.6041666%; position: absolute; z-index: 15; top: 67.95%; left: 67.2291666%;}

			#mentionslegales {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 1px; text-transform: uppercase; color: #000000; z-index: 50; position: absolute; top: 94.25%; left: 71.3541666%;}

			
	/* Page Services */

	#pageservices {background-color: #ffffff; width: 100%; height: 100%; position: fixed; z-index: 1;  background-size: 100% 100%}

		#titreservices {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #242525; z-index: 50; position: absolute; top: 7.58518519%; left: 26%;}	
		#traittitreservices {background-color: #f5963c; height: 13.888888%; width: 1px; position: absolute; z-index: 20; top: 0%; left: 24.4791666%;}

			#creativite {position: absolute; top: 27%; left: 16.875%; width: 5.208333%; height: auto; z-index: 15; }
			#traitgauchecreativite {background-color: #f5963c; width: 2.6041666%; height: 1px; position: absolute; z-index: 15; top: 32.40740741%; left: 11.71875%;}

			#digital {position: absolute; top: 49%; left: 16%; width: 6.7708333%; height: auto; z-index: 15; }
			#traitgauchedigital {background-color: #f5963c; width: 2.6041666%; height: 1px; position: absolute; z-index: 15; top: 53.7037037%; left: 11.71875%;}

			#video {position: absolute; top: 72%; left: 16.875%; width: 5.208333%; height: auto; z-index: 15; }
			#traitgauchevideo {background-color: #f5963c; width: 2.6041666%; height: 1px; position: absolute; z-index: 15; top: 76.85185185%; left: 11.71875%;}

				#fondnoirservices {background-color: #242525; width: 75.5208333%; height: 78.7037037%; position: absolute; top: 16.666666%; right: 0%; z-index: 20; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}
					#traitdroitprint {background-color: #ffffff; width: 18.2291666%; height: 1px; position: absolute; z-index: 50; top: 2.941176471%; right: 0%;}
					#traitgaucheprint {background-color: #ffffff; width: 39.0625%; height: 1px; position: absolute; z-index: 50; top: 11.17647059%; left: 0%;}

					#direction {font-family: 'Raleway', sans-serif; font-size: 1.4em; letter-spacing: 5px; text-transform: uppercase; color: #f5963c; z-index: 50; position: absolute; top: 1%; left: 43.5%;}
					#print {font-family: 'Raleway', sans-serif; font-size: 1.2em; letter-spacing: 5px; color: #ffffff; z-index: 50; position: absolute; top: 8.25%; left: 47.5%;}

					#traitdroitcreativite {background-color: #f5963c; width: 3.448275862%; height: 1px; position: absolute; z-index: 50; top: 19.41176471%; left: 0%;}
						#artdirection {font-family: 'Raleway', sans-serif; font-size: 1em; position: absolute; top: 15.91176471%; left: 5%; color: #76859C; letter-spacing: 2px;}
							#paragrapheservices1 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 21.91176471%; left: 5%; color: #ffffff !important; letter-spacing: 1px; width: 58%; line-height: 20px;}

									.listehaut li {width: 20%; font-family: 'Raleway', sans-serif; font-size: 0.7em; letter-spacing: 2px; color: #f5963c; list-style-type:none; position: absolute; left: 5%; top: 32%;}
										#lh2 {top: 35%;}
										#lh3 {top: 38%;}
										#lh4 {left: 25%;}
										#lh5 {top: 35%; left: 25%;}
										#lh6 {top: 38%; left: 25%;}

					#traitdroitdigital {background-color: #f5963c; width: 3.448275862%; height: 1px; position: absolute; z-index: 50; top: 46.47058824%; left: 0%;}
						#webdesign {font-family: 'Raleway', sans-serif; font-size: 1em; position: absolute; top: 43.01176471%; left: 5%; color: #76859C; letter-spacing: 2px;}
							#paragrapheservices2 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 48.91176471%; left: 5%; color: #ffffff !important; letter-spacing: 1px; width: 58%; line-height: 20px;}

									.listemilieu li {width: 20%; font-family: 'Raleway', sans-serif; font-size: 0.7em; letter-spacing: 2px; color: #f5963c; list-style-type:none; position: absolute; left: 5%; top: 62%;}
										#lm2 {top: 65%;}
										#lm3 {top: 68%;}
										#lm4 {left: 25%;}
										#lm5 {top: 65%; left: 25%;}
										#lm6 {top: 68%; left: 25%;}

					#traitdroitvideo {background-color: #f5963c; width: 3.448275862%; height: 1px; position: absolute; z-index: 50; top: 75.88235294%; left: 0%;}
						#motiondesign {font-family: 'Raleway', sans-serif; font-size: 1em; position: absolute; top: 72.41176471%; left: 5%; color: #76859C; letter-spacing: 2px;}
							#paragrapheservices3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 78.01176471%; left: 5%; color: #ffffff !important; letter-spacing: 1px; width: 58%; line-height: 20px;}

									.listebas li {width: 20%; font-family: 'Raleway', sans-serif; font-size: 0.7em; letter-spacing: 2px; color: #f5963c; list-style-type:none; position: absolute; left: 5%; top: 88%;}
										#lb2 {top: 91%;}
										#lb3 {top: 94%;}
										#lb4 {left: 25%;}
										#lb5 {top: 91%; left: 25%;}
										#lb6 {top: 94%; left: 25%;}

	/* Page About */

		#pageabout {background-color: #ffffff; width: 100%; height: 100%; position: fixed; z-index: 1;  background-size: 100% 100%}

			#traittitreabout {background-color: #f5963c; width: 1px; height: 13.888888%; position: absolute; bottom: 0%; left: 34.375%; z-index: 25}
			#titreabout {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #242525; z-index: 50; position: absolute; bottom: 7.5%; left: 35.5%;}

				#fondnoirabout {background-color: #242525; width: 100%; height: 81%; position: absolute; top: 0%; left: 0%; z-index: 20; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

				#explicationclavier {width: 100%; height: auto; position: absolute; top: 0%; left: 0%; display: block; z-index: 500; margin-top: -50px;}

				#profil {font-family: 'Raleway', sans-serif; font-size: 1.7em; position: absolute; top: 5%; left: 30%; z-index: 100; letter-spacing: 3px; text-transform: uppercase; color: #f5963c}

					#personnage {width: 13.41666666%; height: 61.1428571429%; position: absolute; top: 29.7285714286%; left: 44.791666666%; z-index: 50; overflow: hidden;}

						#sprite {position: absolute; top:0%; left: 0%}
						#sprite2 {position: absolute; top:0%; left: 0%; display: none;}

					.rondtimeline {background-color: #f5963c; width: 1.041666666%; height: 1.85185185%; border-radius: 50%; position: absolute; bottom: 8%; left: 52%; display: inline-block; z-index: 50; visibility: hidden;}
					#rondtimeline2 {margin-left: 10%;}
					#rondtimeline3 {margin-left: 20%;}
					#rondtimeline4 {margin-left: 30%;}
					#rondtimeline5 {margin-left: 40%;}
					#traittimeline {background-color: #f5963c; width: 40%; height: 1px; position: absolute; bottom: 8.85%; left: 52.5%; z-index: 40; visibility: hidden;}

						#bac {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 10%; left: 50%; color: #242525; width: 13%; visibility: hidden;}
						#raisvida {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 46%; color: #76859C !important; width: 13%; visibility: hidden;}
						#lem {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 57.5%; color: #76859C !important; width: 13%; visibility: hidden;}
						#bts {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 10%; left: 65%; color: #242525; width: 15%; visibility: hidden;}
						#carrevip {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 71.5%; color: #76859C !important; width: 13%; visibility: hidden;}
						#bac3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 10%; left: 86%; color: #242525; width: 13%; visibility: hidden;}
						#webadn {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 85.5%; color: #76859C !important; width: 13%; visibility: hidden;}

							#diagonalepresentation1 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 16.481481%; left: 72.51041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
							#diagonaleligne1 {width: 13.2291666%; height: auto; position: fixed; top: 18.5185185%; left: 62.9791666%; display: none; z-index: 100;}
							#presentation1 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; position: fixed; top: 19.5185185%; left: 72.51041666%; z-index: 100; letter-spacing: 1px; display: none; width: 12%;}

							#diagonalepresentation2 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 35.481481%; left: 84.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
							#diagonaleligne2 {width: 24.4791666%; height: auto; position: fixed; top: 38.0185185%; left: 62.9791666%; display: none; z-index: 100;}
							#presentation2 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; position: fixed; top: 38.981481%; left: 84.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 8%;}

							#diagonalepresentation3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 67.081481%; left: 72.51041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
							#diagonaleligne3 {width: 13.2291666%; height: auto; position: fixed; top: 57.0185185%; left: 62.9791666%; display: none; z-index: 100;}
							#presentation3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; position: fixed; top: 71.481481%; left: 72.51041666%; z-index: 100; letter-spacing: 1px; display: none; width: 15%;}

							#diagonalepresentation1gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 16.481481%; left: 10.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
							#diagonaleligne1gauche {width: 24.4791666%; height: auto; position: fixed; top: 18.5185185%; left: 13.9791666%; display: none; z-index: 100;}
							#presentation1gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; position: fixed; top: 19.5185185%; left: 11.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 8%;}

							#diagonalepresentation2gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 40.481481%; left: 11.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
							#diagonaleligne2gauche {width: 24.4791666%; height: auto; position: fixed; top: 39.5185185%; left: 13.9791666%; display: none; z-index: 100;}
							#presentation2gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; position: fixed; top: 43.5185185%; left: 9.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 12%;}

							#diagonalepresentation3gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 60.481481%; left: 10.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
							#diagonaleligne3gauche {width: 24.4791666%; height: auto; position: fixed; top: 56.0185185%; left: 13.9791666%; display: none; z-index: 100;}
							#presentation3gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; position: fixed; top: 63.5185185%; left: 14.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 5%;}


	/* Page Work */

		#pagework {height: 100%; width: 100%;}

		#traitwork {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titrework {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirwork {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

			#next {width: 3.095238095%; height: auto; position: absolute; top: 3%; left: 48.45238095%; z-index: 20; cursor: pointer;}
				#nextproject {font-family: 'Raleway', sans-serif; font-size: 0.6em; z-index: 20; position: absolute; top: 3.5%; left: 53%; color: #f5963c; letter-spacing: 2px; display: none;}
			#previous {width: 3.095238095%; height: auto; position: absolute; top: 95%; left: 48.45238095%; z-index: 20; cursor: pointer;}
				#previousproject {font-family: 'Raleway', sans-serif; font-size: 0.6em; z-index: 20; position: absolute; top: 95.5%; left: 38.5%; color: #f5963c; letter-spacing: 2px; display: none;}

			#titreprojetwork {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 24.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

				.suiteprojet {width: 13.492063%; height: 14%; position: fixed; top: 40%; left: 7%; display: inline-block; background-color: #f5963c; cursor: pointer; background-size: 100% 100%;}
				#suiteprojet1 {background-image: url('../Images/projetwork1.png'); background-repeat: no-repeat;}
				#suiteprojet2 {margin-left: 14%; background-image: url('../Images/atlentis-presentation.jpg'); background-repeat: no-repeat;}
				#suiteprojet3 {margin-left: 28%; background-image: url('../Images/maya-presentation.jpg'); background-repeat: no-repeat;}
				#suiteprojet4 {margin-left: 42%; background-image: url('../Images/centex-presentation.jpg'); background-repeat: no-repeat;}
				#suiteprojet5 {top: 55%; background-image: url('../Images/lumiere-presentation.png'); background-repeat: no-repeat;}
				#suiteprojet6 {top: 55%; margin-left: 14%; background-image: url('../Images/bioderma-presentation.jpg'); background-repeat: no-repeat;}
				#suiteprojet7 {top: 55%; margin-left: 28%; background-image: url('../Images/webadn-presentation.png'); background-repeat: no-repeat;}
				#suiteprojet8 {top: 55%; margin-left: 42%; background-image: url('../Images/furygan-presentation.jpg'); background-repeat: no-repeat;}

			.infohautsuiteprojet {font-family: 'Raleway', sans-serif; font-size: 1em; position: absolute; top: 25%; left: 10%; color: #ffffff; letter-spacing: 2px; display: none}
			.infobassuiteprojet {font-family: 'Raleway', sans-serif; font-size: 1em; position: absolute; bottom: 25%; right: 10%; color: #f5963c; letter-spacing: 2px; display: none;}
			.suiteprojetopacite {width: 100%; height: 100%; background-color: #242525; display: none;} 

		#scrollicone {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}

		#scroll {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#blocopacite {width: 34.375%; height: 15%; position: fixed; bottom: 0%; left: 65.625%; z-index: 5; background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));}

			#partieblanchescroll {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}

				#titrepartieblanche {position: absolute; top: 3%; left: 33.5%; font-family: 'Raleway', sans-serif; font-size: 1.5em; color: #242525; letter-spacing: 7px; text-transform: uppercase; z-index: 20;}
				
					#traitthemegauche {background-color: #242525; height: 1px; width: 50%; position: absolute; top: 250px; left: 0%; z-index: 20;}
					#titretheme {position: absolute; top: 190px; left: 15%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
					#titrespecialisation {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}
					#traitthemedroit {background-color: #242525; height: 1px; width: 50%; position: absolute; top: 180px; right: 0%; z-index: 20;}

						#textedemande {position: absolute; top: 350px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
						#soulignementtextedemande {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 383px; left: 10%; z-index: 20;}
						#paragraphetextedemande {position: absolute; top: 385px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

						#texteconception {position: absolute; top: 537px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
						#soulignementtexteconception {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 570px; left: 10%; z-index: 20;}
						#paragraphetexteconception {position: absolute; top: 572px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

						#texteoutil {position: absolute; top: 710px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
						#soulignementtexteoutil {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 738px; left: 10%; z-index: 20;}
						#paragraphetexteoutil {position: absolute; top: 735px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

						#imagework1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
						#imagework2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
						#imagework3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
						#imagework4 {width: 80%; height: auto; position: absolute; top: 2000px; left: 10%;}
		
		/* Page Work - Projet 1 */

		#traitworkprojet1 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet1 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet1 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet1work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet1 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet1 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet1 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet1 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet1 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#videoprincipale {position: absolute; top: 36%; left: 23.0208333%;}

			#image-inception-1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
			#image-inception-2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
			#image-inception-3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
			#image-inception-4 {width: 80%; height: auto; position: absolute; top: 2000px; left: 10%;}

		/* Page Work - Projet 2 */

		#traitworkprojet2 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet2 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet2 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet2work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet2 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet2 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet2 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet2 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet2 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#texteoutil2 {position: absolute; top: 765px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
		#soulignementtexteoutil2 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 793px; left: 10%; z-index: 20;}
		#paragraphetexteoutil2 {position: absolute; top: 800px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

		#videoprincipale {position: absolute; top: 36%; left: 23.0208333%;}

			#image-artisanat1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
			#image-artisanat2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
			#image-artisanat3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
			#image-artisanat4 {width: 80%; height: auto; position: absolute; top: 2000px; left: 10%;}

		/* Page Work - Projet 3 */

		#traitworkprojet3 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet3 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet3 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet3work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet3 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet3 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet3 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet3 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet3 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#videoprincipale {position: absolute; top: 36%; left: 23.0208333%;}

			#image-maya1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
			#image-maya2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
			#image-maya3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
			#image-maya4 {width: 80%; height: auto; position: absolute; top: 2000px; left: 10%;}

		/* Page Work - Projet 4 */

		#traitworkprojet4 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet4 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet4 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet4work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet4 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet4 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet4 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet4 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet4 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#videoprincipale4 {position: absolute; top: 36%; left: 23.0208333%;}

			#image-centex1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
			#image-centex2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
			#image-centex3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
			#image-centex4 {width: 80%; height: auto; position: absolute; top: 2000px; left: 10%;}

			#texteoutil4 {position: absolute; top: 730px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
			#soulignementtexteoutil4 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 758px; left: 10%; z-index: 20;}
			#paragraphetexteoutil4 {position: absolute; top: 755px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

		/* Page Work - Projet 5 */

		#traitworkprojet5 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet5 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet5 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet5work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet5 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet5 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet5 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet5 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet5 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#videoprincipale {position: absolute; top: 36%; left: 23.0208333%;}

			#image-lumiere1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
			#image-lumiere2 {width: 80%; height: auto; position: absolute; top: 1750px; left: 10%;}
			#image-lumiere3 {width: 80%; height: auto; position: absolute; top: 2100px; left: 10%;}

		/* Page Work - Projet 6 */

		#traitworkprojet6 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet6 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet6 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet6work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet6 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet6 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet6 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet6 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet6 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#videoprincipale {position: absolute; top: 36%; left: 23.0208333%;}

			#image-bioderma1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
			#image-bioderma2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
			#image-bioderma3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
			#image-bioderma4 {width: 80%; height: auto; position: absolute; top: 2000px; left: 10%;}

			#texteoutil6 {position: absolute; top: 740px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
			#soulignementtexteoutil6 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 768px; left: 10%; z-index: 20;}
			#paragraphetexteoutil6 {position: absolute; top: 765px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

		/* Page Work - Projet 7 */

		#traitworkprojet7 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet7 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet7 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet7work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet7 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet7 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet7 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet7 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet7 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#videoprincipale {position: absolute; top: 36%; left: 23.0208333%;}

			#image-webadn1 {width: 80%; height: auto; position: absolute; top: 900px; left: 10%;}
			#image-webadn2 {width: 80%; height: auto; position: absolute; top: 1250px; left: 10%;}
			#image-webadn3 {width: 80%; height: auto; position: absolute; top: 1600px; left: 10%;}
			#image-webadn4 {width: 80%; height: auto; position: absolute; top: 1950px; left: 10%;}

			#texteoutil7 {position: absolute; top: 755px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
			#soulignementtexteoutil7 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 783px; left: 10%; z-index: 20;}
			#paragraphetexteoutil7 {position: absolute; top: 780px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

		/* Page Work - Projet 8 */

		#traitworkprojet8 {background-color: #f5963c; width: 1px; height: 100%; position: fixed; bottom: 0%; left: 65.625%; z-index: 50}
		#titreworkprojet8 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 86%;}

		#fondnoirworkprojet8 {background: #242525; width: 65.625%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 1; background-image: url('../Images/motif-fond.png'); background-repeat: repeat;}

		#titreprojet8work {font-family: 'Montserrat', sans-serif; font-size: 2em; position: absolute; top: 22.5%; left: 20%; z-index: 100; letter-spacing: 5px; color: #76859C;}

		#partieblanchescrollprojet8 {background-color: #ffffff; position: relative; z-index: 2; width: 34.375%; height: 2500px; left: 65.625%;}	

		#scrolliconeprojet8 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500;}

		#scrollprojet8 {font-family: 'Raleway', sans-serif; font-size: 0.6em; letter-spacing: 2px; position: fixed; color: #f5963c; z-index: 500; top: 88%; left: 81.7%;}

		#titrethemeprojet8 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1.2em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
		#titrespecialisationprojet8 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #76859C !important; letter-spacing: 3px; z-index: 20;}	

		#videoprincipale {position: absolute; top: 36%; left: 23.0208333%;}

						#texteoutil8 {position: absolute; top: 760px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
						#soulignementtexteoutil8 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 788px; left: 10%; z-index: 20;}
						#paragraphetexteoutil8 {position: absolute; top: 795px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #878786 !important; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

						#image-furygan1 {width: 80%; height: auto; position: absolute; top: 947px; left: 10%;}
						#image-furygan2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
						#image-furygan3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
						#image-furygan4 {width: 80%; height: auto; position: absolute; top: 2000px; left: 10%;}


	/* Responsive */

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

				/* Page About */

				#personnage {width: 13.41666666%; height: 61.1428571429%; position: absolute; top: 20%; left: 44.791666666%; z-index: 50; overflow: hidden;}
				#raisvida {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 41%; color: #242525; width: 13%; visibility: hidden;}
				#lem {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 56%; color: #242525; width: 13%; visibility: hidden;}
				#carrevip {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 71.5%; color: #242525; width: 13%; visibility: hidden;}
				#webadn {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; bottom: 1%; left: 85.5%; color: #242525; width: 13%; visibility: hidden;}
               
                #diagonalepresentation1 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 15.481481%; left: 72.51041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
				#diagonaleligne1 {width: 13.2291666%; height: auto; position: fixed; top: 18.5185185%; left: 62.9791666%; display: none; z-index: 100;}
				#presentation1 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 19.5185185%; left: 72.51041666%; z-index: 100; letter-spacing: 1px; display: none; width: 12%;}

				#diagonalepresentation2 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 35.481481%; left: 84.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
				#diagonaleligne2 {width: 24.4791666%; height: auto; position: fixed; top: 38.0185185%; left: 62.9791666%; display: none; z-index: 100;}
				#presentation2 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 38.981481%; left: 84.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 8%;}

				#diagonalepresentation3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 64.081481%; left: 72.51041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
				#diagonaleligne3 {width: 13.2291666%; height: auto; position: fixed; top: 57.0185185%; left: 62.9791666%; display: none; z-index: 100;}
				#presentation3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 71.481481%; left: 72.51041666%; z-index: 100; letter-spacing: 1px; display: none; width: 15%;}

				#diagonalepresentation1gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 15.481481%; left: 7.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
				#diagonaleligne1gauche {width: 24.4791666%; height: auto; position: fixed; top: 18.5185185%; left: 13.9791666%; display: none; z-index: 100;}
				#presentation1gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 19.5185185%; left: 11.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 8%;}

				#diagonalepresentation2gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 39.481481%; left: 6.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
				#diagonaleligne2gauche {width: 24.4791666%; height: auto; position: fixed; top: 39.5185185%; left: 13.9791666%; display: none; z-index: 100;}
				#presentation2gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 43.5185185%; left: 9.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 12%;}

				#diagonalepresentation3gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 59.481481%; left: 8.01041666%; text-transform: uppercase; letter-spacing: 1px; display: none; z-index: 100;}
				#diagonaleligne3gauche {width: 24.4791666%; height: auto; position: fixed; top: 56.0185185%; left: 13.9791666%; display: none; z-index: 100;}
				#presentation3gauche {font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #ffffff; position: fixed; top: 63.5185185%; left: 14.01041666%; z-index: 100; letter-spacing: 1px; display: none; width: 5%;}
				
                /* Page Services */

                #traitdroitprint {background-color: #ffffff; width: 8.2291666%; height: 1px; position: absolute; z-index: 50; top: 2.941176471%; right: 0%;}
                #paragrapheservices1 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 21.91176471%; left: 5%; color: #ffffff; letter-spacing: 1px; width: 90%; line-height: 20px;}
                #paragrapheservices2 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 48.91176471%; left: 5%; color: #ffffff; letter-spacing: 1px; width: 90%; line-height: 20px;}
                #paragrapheservices3 {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 78.01176471%; left: 5%; color: #ffffff; letter-spacing: 1px; width: 90%; line-height: 20px;}
                	#direction {font-family: 'Raleway', sans-serif; font-size: 1.2em; letter-spacing: 5px; text-transform: uppercase; color: #f5963c; z-index: 50; position: absolute; top: 1%; left: 44.5%;}
					#print {font-family: 'Raleway', sans-serif; font-size: 1em; letter-spacing: 3px; color: #ffffff; z-index: 50; position: absolute; top: 8.25%; left: 51.5%;}

				/* Page Work */

				#titrework {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 2%; left: 82%;}
				#previousproject {font-family: 'Raleway', sans-serif; font-size: 0.6em; z-index: 20; position: absolute; top: 95.5%; left: 35.5%; color: #f5963c; letter-spacing: 2px; display: none;}
				#titrepartieblanche {position: absolute; top: 3%; left: 32.5%; font-family: 'Raleway', sans-serif; font-size: 1.5em; color: #242525; letter-spacing: 7px; text-transform: uppercase; z-index: 20;}
				#titretheme {position: absolute; top: 190px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisation {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}

					#textedemande {position: absolute; top: 300px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
					#soulignementtextedemande {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 333px; left: 10%; z-index: 20;}
					#paragraphetextedemande {position: absolute; top: 335px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #242525; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

					#texteoutil {position: absolute; top: 740px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
					#soulignementtexteoutil {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 768px; left: 10%; z-index: 20;}
					#paragraphetexteoutil {position: absolute; top: 765px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #242525; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}

					#imagework1 {width: 80%; height: auto; position: absolute; top: 1050px; left: 10%;}
					#imagework2 {width: 80%; height: auto; position: absolute; top: 1350px; left: 10%;}
					#imagework3 {width: 80%; height: auto; position: absolute; top: 1650px; left: 10%;}
					#imagework4 {width: 80%; height: auto; position: absolute; top: 1950px; left: 10%;}

				/* Page Projet 1 */

				#titrethemeprojet1 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet1 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet1 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#image-inception-1 {width: 80%; height: auto; position: absolute; top: 900px; left: 10%;}
				#image-inception-2 {width: 80%; height: auto; position: absolute; top: 1200px; left: 10%;}
				#image-inception-3 {width: 80%; height: auto; position: absolute; top: 1500px; left: 10%;}
				#image-inception-4 {width: 80%; height: auto; position: absolute; top: 1800px; left: 10%;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#titreworkprojet1 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 82%;}

				/* Page Projet 2 */

				#titreworkprojet2 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 82%;}
				#titrethemeprojet2 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet2 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet2 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#texteoutil2 {position: absolute; top: 840px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
				#soulignementtexteoutil2 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 868px; left: 10%; z-index: 20;}
				#paragraphetexteoutil2 {position: absolute; top: 865px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #242525; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}
				#image-artisanat1 {width: 80%; height: auto; position: absolute; top: 1000px; left: 10%;}
				#image-artisanat2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
				#image-artisanat3 {width: 80%; height: auto; position: absolute; top: 1600px; left: 10%;}
				#image-artisanat4 {width: 80%; height: auto; position: absolute; top: 1900px; left: 10%;}

				/* Page Projet 3 */

				#titreworkprojet3 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 75%;}
				#titrethemeprojet3 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet3 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet3 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#image-maya1 {width: 80%; height: auto; position: absolute; top: 850px; left: 10%;}
				#image-maya2 {width: 80%; height: auto; position: absolute; top: 1150px; left: 10%;}
				#image-maya3 {width: 80%; height: auto; position: absolute; top: 1450px; left: 10%;}
				#image-maya4 {width: 80%; height: auto; position: absolute; top: 1750px; left: 10%;}
				#image-maya6 {width: 80%; height: auto; position: absolute; top: 2050px; left: 10%;}

				/* Page Projet 4 */

				#titreworkprojet4 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 80%;}
				#titrethemeprojet4 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet4 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet4 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#texteoutil4 {position: absolute; top: 840px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
				#soulignementtexteoutil4 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 868px; left: 10%; z-index: 20;}
				#paragraphetexteoutil4 {position: absolute; top: 865px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #242525; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}
				#image-centex1 {width: 80%; height: auto; position: absolute; top: 1000px; left: 10%;}
				#image-centex2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
				#image-centex3 {width: 50%; height: auto; position: absolute; top: 1550px; left: 30%;}
				#image-centex4 {width: 50%; height: auto; position: absolute; top: 1900px; left: 30%;}

				/* Page Projet 5 */

				#titreworkprojet5 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 80%;}
				#titrethemeprojet5 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet5 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet5 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#image-lumiere1 {width: 70%; height: auto; position: absolute; top: 900px; left: 15%;}
				#image-lumiere2 {width: 80%; height: auto; position: absolute; top: 1450px; left: 10%;}
				#image-lumiere3 {width: 80%; height: auto; position: absolute; top: 1750px; left: 10%;}

				/* Page Projet 6 */

				#titreworkprojet6 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 80%;}
				#titrethemeprojet6 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet6 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet6 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#texteoutil6 {position: absolute; top: 840px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
				#soulignementtexteoutil6 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 868px; left: 10%; z-index: 20;}
				#paragraphetexteoutil6 {position: absolute; top: 865px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #242525; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#image-bioderma1 {width: 80%; height: auto; position: absolute; top: 1000px; left: 10%;}
				#image-bioderma2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
				#image-bioderma3 {width: 80%; height: auto; position: absolute; top: 1600px; left: 10%;}
				#image-bioderma4 {width: 80%; height: auto; position: absolute; top: 1900px; left: 10%;}

				/* Page Projet 7 */

				#titreworkprojet7 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 80%;}
				#titrethemeprojet7 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet7 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet7 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#texteoutil7 {position: absolute; top: 840px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
				#soulignementtexteoutil7 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 868px; left: 10%; z-index: 20;}
				#paragraphetexteoutil7 {position: absolute; top: 865px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #242525; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#image-webadn1 {width: 80%; height: auto; position: absolute; top: 1000px; left: 10%;}
				#image-webadn2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
				#image-webadn3 {width: 80%; height: auto; position: absolute; top: 1600px; left: 10%;}
				#image-webadn4 {width: 80%; height: auto; position: absolute; top: 1900px; left: 10%;}

				/* Page Projet 8 */

				#titreworkprojet8 {font-family: 'Raleway', sans-serif; font-size: 2em; letter-spacing: 11px; text-transform: uppercase; color: #ffffff; z-index: 50; position: absolute; top: 3%; left: 80%;}
				#titrethemeprojet8 {position: absolute; top: 190px; left: 36.5%; font-family: 'Raleway', sans-serif; font-size: 1em; color: #f5963c; letter-spacing: 3px; z-index: 20;}
				#titrespecialisationprojet8 {position: absolute; top: 220px; left: 26.5%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #f5963c; letter-spacing: 3px; z-index: 20;}				
				#scrolliconeprojet8 {width: 2.083333%; height: auto; position: fixed; top: 90.74074%; left: 81.7708333%; z-index:500; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 3s; animation-delay: 3s;}
				#texteoutil8 {position: absolute; top: 840px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #242525; letter-spacing: 2px; z-index: 20;}
				#soulignementtexteoutil8 {background-color: #f5963c; height: 1px; width: 10%; position: absolute; top: 868px; left: 10%; z-index: 20;}
				#paragraphetexteoutil8 {position: absolute; top: 865px; left: 10%; font-family: 'Raleway', sans-serif; font-size: 0.8em; color: #242525; letter-spacing: 1px; z-index: 20; width: 80%; line-height: 20px;}
				#videoprincipale {position: absolute; top: 33%; left: 23.0208333%;}
				#image-furygan1 {width: 80%; height: auto; position: absolute; top: 1000px; left: 10%;}
				#image-furygan2 {width: 80%; height: auto; position: absolute; top: 1300px; left: 10%;}
				#image-furygan3 {width: 80%; height: auto; position: absolute; top: 1600px; left: 10%;}
				#image-furygan4 {width: 80%; height: auto; position: absolute; top: 1900px; left: 10%;}

				}

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

					/* Menu */

					#traceur {visibility: hidden;}

					/* Page About */

					#explicationclavier {visibility: hidden;}
					#personnage {visibility: hidden;}

						#diagonalepresentation1 {display: block; top: 20%; left: 45%; font-size: 1em;}
						#presentation1 {display: block; top: 23%; left: 45%; font-size: 1em;}

						#diagonalepresentation2 {display: block; top: 40%; left: 45%; font-size: 1em;}
						#presentation2 {display: block; top: 43%; left: 45%; font-size: 1em;}

						#diagonalepresentation3 {display: block; top: 57%; left: 45%; font-size: 1em;}
						#presentation3 {display: block; top: 60%; left: 45%; font-size: 1em;}

						#diagonalepresentation1gauche {display: block; top: 20%; left: 20%; font-size: 1em;}
						#presentation1gauche {display: block; top: 23%; left: 20%; font-size: 1em;}

						#diagonalepresentation2gauche {display: block; top: 40%; left: 20%; font-size: 1em;}
						#presentation2gauche {display: block; top: 43%; left: 20%; font-size: 1em;}

						#diagonalepresentation3gauche {display: block; top: 57%; left: 20%; font-size: 1em;}
						#presentation3gauche {display: block; top: 60%; left: 20%; font-size: 1em;}

						#bac {visibility: visible; font-size: 1em; top: 18.5%; left: 75%; z-index: 1000; color: #fff; text-transform: uppercase;}
						#bts {visibility: visible; font-size: 1em; top: 23%; left: 75%; z-index: 1000; color: #fff; text-transform: uppercase;}
						#bac3 {visibility: visible; font-size: 1em; top: 30%; left: 75%; z-index: 1000; color: #fff; text-transform: uppercase;}
						#raisvida {visibility: visible; font-size: 1em; top: 39.5%; left: 75%; z-index: 1000;}
						#lem {visibility: visible; font-size: 1em; top: 48.5%; left: 75%; z-index: 1000;}
						#carrevip {visibility: visible; font-size: 1em; top: 57.5%; left: 75%; z-index: 1000;}
						#webadn {visibility: visible; font-size: 1em; top: 66.5%; left: 75%; z-index: 1000;}

						/* Page Services */

						#direction {left: 41.5%;}
						#print {left: 48.5%;}

						/* Page Work */

						#texteoutil {top: 760px;}
						#soulignementtexteoutil {top: 788px;}
						#paragraphetexteoutil {top: 785px;}

				}

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

				/* Page Home */

				#lettrec {height: 37px; width: 29px; position: absolute; left: 23.4375%; top: 26.851851851%; background-image: url('../Images/c-tablette.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}	
				#lettrea {height: 39px; width: 37px; position: absolute; left: 32.8125%; top: 26.84%; background-image: url('../Images/a-tablette.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
				#lettrer {height: 36px; width: 24px; position: absolute; left: 43.75%; top: 22.08333333%; background-image: url('../Images/r-tablette.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 5.5s; animation-delay: 5.5s;}
				#lettret {height: 36px; width: 27px; position: absolute; left: 54.3875%; top: 26.851851851%; background-image: url('../Images/t-tablette.png'); background-repeat: no-repeat; z-index: 30}
				#lettreo {height: 37px; width: 38px; position: absolute; left: 63.8625%; top: 37.037037%; background-image: url('../Images/o-tablette.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
				#lettren {height: 41px; width: 32px; position: absolute; left: 72.9583333%; top: 26.84%; background-image: url('../Images/n-tablette.png'); background-repeat: no-repeat; z-index: 30}

				#lettres {height: 37px; width: 23px; position: absolute; left: 23.69791666%; top: 55.87037037%; background-image: url('../Images/s-tablette.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
					#traitbas1 {background-color: #f5963c; width: 1px; height: 31%; position: absolute; bottom: 0%; left: 24.4791666%; z-index: 25}
				#lettret2 {height: 36px; width: 27px; position: absolute; left: 33.111%; top: 63.8888%; background-image: url('../Images/t-tablette.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s;}
				#lettree1 {height: 36px; width: 20px; position: absolute; left: 44.0104166%; top: 63.8888%; background-image: url('../Images/e-tablette.png'); background-repeat: no-repeat; z-index: 30}
				#lettree2 {height: 36px; width: 20px; position: absolute; left: 54.6875%; top: 63.8888%; background-image: url('../Images/e-tablette.png'); background-repeat: no-repeat; z-index: 30;}
				#lettrev {height: 39px; width: 33px; position: absolute; left: 64.1%; top: 71.296296%; background-image: url('../Images/v-tablette.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 6.5s; animation-delay: 6.5s;}
				#lettree3 {height: 36px; width: 20px; position: absolute; left: 73.9583333%; top: 63.88888%; background-image: url('../Images/e-tablette.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
					#traitbasdroit {background-color: #f5963c; width: 21.5%; height: 1px; position: absolute; right: 0%; top: 66.66666%; z-index: 25}
				#lettrey {height: 27px; width: 12px; position: absolute; left: 8%; top: 86%; background-image: url('../Images/y-tablette.png'); background-repeat: no-repeat; z-index: 31; display: block; opacity: 0; animation: opacity ; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; animation-duration: 7s;}
				
				#graphic {background-image: url('../Images/graphic-tablette.png'); background-repeat: no-repeat; height: 19px; width: 197px; position: absolute; z-index: 22; top: 46.75%; left: 33.11458333%}
				#designer {background-image: url('../Images/designer-tablette.png'); background-repeat: no-repeat; height: 20px; width: 225px; position: absolute; z-index: 22; top: 50.25%; left: 50.520833%}

				#menutexte {top: 25%; position: fixed; height: 100%; font-family: 'Raleway', sans-serif; font-size: 0.9em; left: 1.1%; list-style: none; color: #ffffff; letter-spacing: 8px;}

				#contact {font-family: 'Raleway', sans-serif; font-size: 1.2em; position: absolute; top: 24%; margin-left: 42px; text-transform: uppercase; letter-spacing: 15px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: -100px}
				#about {font-family: 'Raleway', sans-serif; font-size: 1.2em; position: absolute; top: 0%; margin-top: 11px; margin-left: 52px; text-transform: uppercase; letter-spacing: 15px; color: #ffffff; visibility: hidden; opacity: 0;}
				#services {font-family: 'Raleway', sans-serif; font-size: 1.2em; position: absolute; top: 0%; margin-left: 37px; text-transform: uppercase; letter-spacing: 15px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: 0px}
				#w {font-family: 'Raleway', sans-serif; font-size: 1.2em; position: absolute; top: 0%; margin-left: -35px; text-transform: uppercase; letter-spacing: 15px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: -28px}
				#rk {font-family: 'Raleway', sans-serif; font-size: 1.2em; position: absolute; top: 0%; margin-left: 55px; text-transform: uppercase; letter-spacing: 15px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: 28px}
				#experiments {font-family: 'Raleway', sans-serif; font-size: 1.2em; position: absolute; top: 0%; margin-top: 7px; margin-left: 35px; text-transform: uppercase; letter-spacing: 15px; color: #ffffff; visibility: hidden; opacity: 0;}

				.follow {font-size: 0.6em; top: 73%; left: 3.5%;}
						.facebook {width: 11%;}
						.linkedin {width: 11%;}
						.behance {width: 11%;}
						.vimeo {width: 11%;}

				.menulangue {top: 9%;font-size: 0.7em;}

				/* Page Contact */

				#briefing {top: 31.06796117%; left: 8%; width: 14%; height: 10%; font-size: 0.7em; line-height: 18px}
				#reflexion {top: 31.06796117%; left: 27.75%; width: 12%; height: 10%; font-size: 0.7em; line-height: 18px}
				#design {top: 31.06796117%; left: 44.5%; width: 12%; height: 10%; font-size: 0.7em; line-height: 18px}
				#integration {top: 31.06796117%; left: 62%; width: 12%; height: 10%; font-size: 0.7em; line-height: 18px}
				#champagne {top: 31.06796117%; left: 81.5%; width: 12%; height: 10%; font-size: 0.7em; line-height: 18px}

				#titrecontact {font-size: 1.8em; top: 21%;}

				#paragrapheprincipalcontact {font-size: 0.75em; top: 39%;}

				/* Page About */

					#explicationclavier {visibility: hidden;}
					#personnage {visibility: hidden;}

					#profil {left: 20%;}

						#diagonalepresentation1 {display: block; top: 20%; left: 45%; font-size: 0.8em;}
						#presentation1 {display: block; top: 23%; left: 45%; font-size: 0.8em;}

						#diagonalepresentation2 {display: block; top: 40%; left: 45%; font-size: 0.8em;}
						#presentation2 {display: block; top: 43%; left: 45%; font-size: 0.8em;}

						#diagonalepresentation3 {display: block; top: 57%; left: 45%; font-size: 0.8em;}
						#presentation3 {display: block; top: 60%; left: 45%; font-size: 0.8em;}

						#diagonalepresentation1gauche {display: block; top: 20%; left: 20%; font-size: 0.8em;}
						#presentation1gauche {display: block; top: 23%; left: 20%; font-size: 0.8em;}

						#diagonalepresentation2gauche {display: block; top: 40%; left: 20%; font-size: 0.8em;}
						#presentation2gauche {display: block; top: 43%; left: 20%; font-size: 0.8em;}

						#diagonalepresentation3gauche {display: block; top: 57%; left: 20%; font-size: 0.8em;}
						#presentation3gauche {display: block; top: 60%; left: 20%; font-size: 0.8em;}

						#bac {visibility: visible; font-size: 0.8em; top: 18.5%; left: 75%; z-index: 1000; color: #fff; text-transform: uppercase;}
						#bts {visibility: visible; font-size: 0.8em; top: 23%; left: 75%; z-index: 1000; color: #fff; text-transform: uppercase;}
						#bac3 {visibility: visible; font-size: 0.8em; top: 30%; left: 75%; z-index: 1000; color: #fff; text-transform: uppercase;}
						#raisvida {visibility: visible; font-size: 0.8em; top: 39.5%; left: 75%; z-index: 1000;}
						#lem {visibility: visible; font-size: 0.8em; top: 48.5%; left: 75%; z-index: 1000;}
						#carrevip {visibility: visible; font-size: 0.8em; top: 57.5%; left: 75%; z-index: 1000;}
						#webadn {visibility: visible; font-size: 0.8em; top: 66.5%; left: 75%; z-index: 1000;}

						/* Page Services */

						#direction {font-size: 1em; left: 34.5%;}
						#print {font-size: 0.8em; left: 47.5%;}
						#artdirection {font-size: 0.9em;}
						#paragrapheservices1 {font-size: 0.7em; top: 20%;}
						#webdesign {font-size: 0.9em;}
						#paragrapheservices2 {font-size: 0.7em;}
						#motiondesign {font-size: 0.9em;}
						#paragrapheservices3 {font-size: 0.7em; top: 76%;}

						.listemilieu li {width: 30%;}
										#lm4 {left: 30%;}
										#lm5 {left: 30%;}
										#lm6 {left: 30%;}

						.listebas li {width: 30%;}
										#lb4 {left: 30%;}
										#lb5 {left: 30%;}
										#lb6 {left: 30%;}


						/* Page Work */

						#titrework {left: 75%;}

						#titrepartieblanche {left: 25%;}

						#titretheme {text-align: center; top: 185px;}
						#titrespecialisation {left: 15%; top: 225px;}

						#texteconception {top: 650px;}
						#soulignementtexteconception {top: 683px;}
						#paragraphetexteconception {top: 685px;}

						#texteoutil {top: 950px;}
						#soulignementtexteoutil {top: 983px;}
						#paragraphetexteoutil {top: 985px;}

						#imagework1 {top: 2250px;}

						/* Page Projet 1 */

						#titreworkprojet1 {left: 75%;}
						#videoprincipale {left: 17.5%; width: 500px; height: 280px; top: 40%;}
						#titrethemeprojet1 {text-align: center; left: 30%;}
						#titrespecialisationprojet1 {text-align: center; left: 10%;}
						#image-inception-1 {top: 2100px;}

						/* Page Projet 2 */

						#titreworkprojet2 {left: 75%;}
						#titrethemeprojet2 {text-align: center; left: 30%;}
						#titrespecialisationprojet2 {text-align: center; left: 10%;}
						#image-artisanat1 {top: 2200px;}

						#texteoutil2 {top: 1100px;}
						#soulignementtexteoutil2 {top: 1133px;}
						#paragraphetexteoutil2 {top: 1135px;}

						/* Page Projet 3 */

						#titreworkprojet3 {left: 75%;}
						#titrethemeprojet3 {text-align: center; left: 30%;}
						#titrespecialisationprojet3 {text-align: center; left: 10%;}
						#image-maya1 {top: 2350px;}

						/* Page Projet 4 */

						#titreworkprojet4 {left: 75%;}
						#titrethemeprojet4 {text-align: center; left: 30%;}
						#titrespecialisationprojet4 {text-align: center; left: 10%;}
						#image-centex1 {top: 2500px;}

						#texteoutil4 {top: 1100px;}
						#soulignementtexteoutil4 {top: 1133px;}
						#paragraphetexteoutil4 {top: 1135px;}

						/* Page Projet 5 */

						#titreworkprojet5 {left: 75%;}
						#titrethemeprojet5 {text-align: center; left: 30%;}
						#titrespecialisationprojet5 {text-align: center; left: 10%;}
						#image-lumiere1 {top: 1150px;}
						#image-lumiere2 {top: 1650px;}
						#image-lumiere3 {top: 1900px;}

						/* Page Projet 6 */

						#titreworkprojet6 {left: 75%;}
						#titrethemeprojet6 {text-align: center; left: 30%;}
						#titrespecialisationprojet6 {text-align: center; left: 10%;}

						#texteoutil6 {top: 1100px;}
						#soulignementtexteoutil6 {top: 1133px;}
						#paragraphetexteoutil6 {top: 1135px;}
						#image-bioderma1 {top: 2200px;}

						/* Page Projet 7 */

						#titreworkprojet7 {left: 75%;}
						#titrethemeprojet7 {text-align: center; left: 30%;}
						#titrespecialisationprojet7 {text-align: center; left: 10%;}

						#texteoutil7 {top: 1100px;}
						#soulignementtexteoutil7 {top: 1133px;}
						#paragraphetexteoutil7 {top: 1135px;}

						#image-webadn1 {top: 2200px;}

						/* Page Projet 8 */

						#titreworkprojet8 {left: 75%;}
						#titrethemeprojet8 {text-align: center; left: 30%;}
						#titrespecialisationprojet8 {text-align: center; left: 10%;}

						#texteoutil8 {top: 1100px;}
						#soulignementtexteoutil8 {top: 1133px;}
						#paragraphetexteoutil8 {top: 1135px;}

						#image-furygan1 {top: 2200px;}

				}

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

				/* Page Home */

				#lettrec {height: 28px; width: 22px; position: absolute; left: 23.4375%; top: 26.851851851%; background-image: url('../Images/c-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}	
				#lettrea {height: 29px; width: 28px; position: absolute; left: 32.8125%; top: 26.84%; background-image: url('../Images/a-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
				#lettrer {height: 27px; width: 18px; position: absolute; left: 43.75%; top: 22.08333333%; background-image: url('../Images/r-mobile.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 5.5s; animation-delay: 5.5s;}
				#lettret {height: 27px; width: 20px; position: absolute; left: 54.1875%; top: 26.851851851%; background-image: url('../Images/t-mobile.png'); background-repeat: no-repeat; z-index: 30}
				#lettreo {height: 28px; width: 29px; position: absolute; left: 63.5625%; top: 37.037037%; background-image: url('../Images/o-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
				#lettren {height: 31px; width: 24px; position: absolute; left: 72.9583333%; top: 26.84%; background-image: url('../Images/n-mobile.png'); background-repeat: no-repeat; z-index: 30}

				#lettres {height: 28px; width: 17px; position: absolute; left: 23.69791666%; top: 55.87037037%; background-image: url('../Images/s-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
				#lettret2 {height: 27px; width: 20px; position: absolute; left: 33.3333%; top: 63.8888%; background-image: url('../Images/t-mobile.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s;}
				#lettree1 {height: 27px; width: 15px; position: absolute; left: 44.0104166%; top: 63.8888%; background-image: url('../Images/e-mobile.png'); background-repeat: no-repeat; z-index: 30}
				#lettree2 {height: 27px; width: 15px; position: absolute; left: 54.6875%; top: 63.8888%; background-image: url('../Images/e-mobile.png'); background-repeat: no-repeat; z-index: 30;}
				#lettrev {height: 29px; width: 25px; position: absolute; left: 64.4%; top: 71.296296%; background-image: url('../Images/v-mobile.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 6.5s; animation-delay: 6.5s;}
				#lettree3 {height: 27px; width: 15px; position: absolute; left: 73.9583333%; top: 63.88888%; background-image: url('../Images/e-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
				#lettrey {height: 20px; width: 9px; position: absolute; left: 8%; top: 86%; background-image: url('../Images/y-mobile.png'); background-repeat: no-repeat; z-index: 31; display: block; opacity: 0; animation: opacity ; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; animation-duration: 7s;}
				
				#graphic {background-image: url('../Images/graphic-mobile.png'); background-repeat: no-repeat; height: 14px; width: 148px; position: absolute; z-index: 22; top: 46%; left: 31.11458333%}
				#designer {background-image: url('../Images/designer-mobile.png'); background-repeat: no-repeat; height: 16px; width: 169px; position: absolute; z-index: 22; top: 51%; left: 50.520833%}

				#menutexte {top: 25%; position: fixed; height: 100%; font-family: 'Raleway', sans-serif; font-size: 0.8em; left: 1%; margin-left: -10px; list-style: none; color: #ffffff; letter-spacing: 4px;}

				#menufermenoir {background-color: #242525; width: 8% !important; height: 17%; position: fixed; top: 50%; margin-top: -4% !important; left: 0px; z-index: 100;  cursor: pointer; background-size: 100% 100%}
				#menuferme {background-color: #ffffff; width: 8% !important; height: 17%; position: fixed; top: 50%; margin-top: -4% !important; left: 0px; z-index: 100;  cursor: pointer; background-size: 100% 100%}
				#menuouvert {background-color: #242525; width: 25%; height: 100%; position: fixed; z-index: 200; left: 0px; display: none; background-size: 100% 100%}

					#traceur {display: none;}

				#contact {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 24%; margin-left: 28px; text-transform: uppercase; letter-spacing: 7px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: -100px}
				#about {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-top: 11px; margin-left: 33px; text-transform: uppercase; letter-spacing: 7px; color: #ffffff; visibility: hidden; opacity: 0;}
				#services {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-left: 28px; text-transform: uppercase; letter-spacing: 7px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: 0px}
				#w {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-left: -25px; text-transform: uppercase; letter-spacing: 7px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: -28px}
				#rk {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-left: 40px; text-transform: uppercase; letter-spacing: 7px; color: #ffffff; visibility: hidden; opacity: 0; margin-top: 28px}
				#experiments {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-top: 7px; margin-left: 22px; text-transform: uppercase; letter-spacing: 7px; color: #ffffff; visibility: hidden; opacity: 0;}

				.follow {font-size: 0.5em; top: 73%; left: 5%;}
					.iconefollow {width: 23%; left: 5%;}
						.facebook {width: 12%;}
						.linkedin {width: 12%; margin-left: 7%}
						.behance {width: 12%; margin-left: 7%}
						.vimeo {width: 12%; margin-left: 7%}

				.menulangue {top: 8.75%;font-size: 0.6em; left: 14.5%;}

				/* Page About */

						#diagonalepresentation1 {left: 44%;}
						#presentation1 {left: 44%;}

						#diagonalepresentation2 {left: 44%;}
						#presentation2 {left: 44%;}

						#diagonalepresentation3 {left: 44%;}
						#presentation3 {left: 44%;}

						#diagonalepresentation1gauche {left: 13%;}
						#presentation1gauche {left: 13%;}

						#diagonalepresentation2gauche {left: 13%;}
						#presentation2gauche {left: 13%;}

						#diagonalepresentation3gauche {left: 13%;}
						#presentation3gauche {left: 13%;}

						#bac {left: 78%;}
						#bts {left: 78%;}
						#bac3 {left: 78%;}
						#raisvida {left: 78%;}
						#lem {left: 78%;}
						#carrevip {left: 78%;}
						#webadn {left: 78%;}

						/* Page Contact */

						#briefing {left: 2%; top: 28%;}
						#reflexion {left: 23%; top: 28%;}
						#design {left: 39%; top: 28%;}
						#integration {left: 58%; top: 28%;}
						#champagne {left: 83%; top: 28%;}

						#boutonenvoyer {width: 25%;}

						/* Page Services */

						.listehaut li {width: 40%;}
										#lh4 {left: 40%;}
										#lh5 {left: 40%;}
										#lh6 {left: 40%;}

						.listemilieu li {width: 40%;}
										#lm4 {left: 40%;}
										#lm5 {left: 40%;}
										#lm6 {left: 40%;}

						.listebas li {width: 40%;}
										#lb4 {left: 40%;}
										#lb5 {left: 40%;}
										#lb6 {left: 40%;}

						#creativite {top: 30%;}
						#digital {top: 52%;}
						#video {top: 75%;}

						/* Page Work */

						#titrework {left: 70%;}

						#titrepartieblanche {left: 15%;}

						#titretheme {left: 5%; top: 180px;}
						#titrespecialisation {left: 5%; text-align: center;}
						#traitthemedroit {top : 160px;}
						#traitthemegauche {top: 270px;}

						#texteconception {top: 700px;}
						#soulignementtexteconception {top: 740px;}
						#paragraphetexteconception {top: 735px;}

						#texteoutil {top: 1100px;}
						#soulignementtexteoutil {top: 1133px;}
						#paragraphetexteoutil {top: 1135px;}

						#imagework2 {top: 2550px;}

						#partieblanchescroll {height: 2800px;}

						#titreprojetwork {top: 10%;}

						.suiteprojet {width: 20%; height: 12%; top: 25%; left: 12.5%;}
	
							#suiteprojet2 {margin-left: 25%;}
							#suiteprojet3 {margin-left: 0%; top: 40%;}
							#suiteprojet4 {margin-left: 25%; top: 40%;}
							#suiteprojet5 {top: 55%; margin-left: 0%;}
							#suiteprojet6 {top: 55%; margin-left: 25%;}
							#suiteprojet7 {top: 70%; margin-left: 0%;}
							#suiteprojet8 {top: 70%; margin-left: 25%;}


							/* Page Projet 1 */

							#titreworkprojet1 {left: 70%;}
							#videoprincipale {left: 17.5%; width: 400px; height: 225px; top: 45%;}
							#image-inception-2 {top: 1250px;}

							/* Page Projet 2 */

							#titreworkprojet2 {left: 70%;}
							#texteoutil2 {top: 1250px;}
							#soulignementtexteoutil2 {top: 1283px;}
							#paragraphetexteoutil2 {top: 1285px;}
							#image-artisanat2 {top: 2500px;}

							/* Page Projet 3 */

							#titreworkprojet3 {left: 70%;}
							#texteoutil3 {top: 1150px;}
							#soulignementtexteoutil3 {top: 1183px;}
							#paragraphetexteoutil3 {top: 1185px;}
							#image-maya2 {top: 1225px;}

							/* Page Projet 4 */

							#titreworkprojet4 {left: 70%;}

							/* Page Projet 5 */

							#titreworkprojet5 {left: 70%;}
							#image-lumiere1 {top: 1275px;}

							/* Page Projet 6 */

							#titreworkprojet6 {left: 70%;}

							/* Page Projet 7 */

							#titreworkprojet7 {left: 70%;}

							#texteoutil7 {top: 1150px;}
							#soulignementtexteoutil7 {top: 1183px;}
							#paragraphetexteoutil7 {top: 1185px;}

							/* Page Projet 8 */

							#titreworkprojet8 {left: 70%;}

							#texteoutil8 {top: 1150px;}
							#soulignementtexteoutil8 {top: 1183px;}
							#paragraphetexteoutil8 {top: 1185px;}

					}


				/* ----------------------- Portable ----------------------- */
				

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

				/* Page Home */

				#lettrec {height: 28px; width: 22px; position: absolute; left: 17.4375%; top: 26.851851851%; background-image: url('../Images/c-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}	
					#traitgauche {background-color: #f5963c; width: 14.83333333%; height: 1px; position: absolute; top: 29.62962963%; left: 0%; z-index: 25}
				#lettrea {height: 29px; width: 28px; position: absolute; left: 32.8125%; top: 26.84%; background-image: url('../Images/a-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
				#lettrer {height: 27px; width: 18px; position: absolute; left: 43.75%; top: 22.08333333%; background-image: url('../Images/r-mobile.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 5.5s; animation-delay: 5.5s;}
				#lettret {height: 27px; width: 20px; position: absolute; left: 54.6875%; top: 26.851851851%; background-image: url('../Images/t-mobile.png'); background-repeat: no-repeat; z-index: 30}
				#lettreo {height: 28px; width: 29px; position: absolute; left: 64.0625%; top: 37.037037%; background-image: url('../Images/o-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
				#lettren {height: 31px; width: 24px; position: absolute; left: 76.9583333%; top: 26.84%; background-image: url('../Images/n-mobile.png'); background-repeat: no-repeat; z-index: 30}
					#traithautdroit {background-color: #f5963c; width: 14.83333333%; height: 1px; position: absolute; top: 29.62962963%; left: 87%; z-index: 25}

				#lettres {height: 28px; width: 17px; position: absolute; left: 17.69791666%; top: 55.87037037%; background-image: url('../Images/s-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer;}
					#traitbas1 {background-color: #f5963c; width: 1px; height: 31%; position: absolute; bottom: 0%; left: 18.4791666%; z-index: 25}
				#lettret2 {height: 27px; width: 20px; position: absolute; left: 33.3333%; top: 63.8888%; background-image: url('../Images/t-mobile.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s;}
				#lettree1 {height: 27px; width: 15px; position: absolute; left: 44.0104166%; top: 63.8888%; background-image: url('../Images/e-mobile.png'); background-repeat: no-repeat; z-index: 30}
				#lettree2 {height: 27px; width: 15px; position: absolute; left: 54.6875%; top: 63.8888%; background-image: url('../Images/e-mobile.png'); background-repeat: no-repeat; z-index: 30;}
				#lettrev {height: 29px; width: 25px; position: absolute; left: 64.4%; top: 71.296296%; background-image: url('../Images/v-mobile.png'); background-repeat: no-repeat; z-index: 30; animation: bounce 1.5s ease infinite; -webkit-animation-delay: 6.5s; animation-delay: 6.5s;}
				#lettree3 {height: 27px; width: 15px; position: absolute; left: 78.9583333%; top: 63.88888%; background-image: url('../Images/e-mobile.png'); background-repeat: no-repeat; z-index: 30; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
					#traitbasdroit {background-color: #f5963c; width: 13%; height: 1px; position: absolute; top: 66.66666%; right: 0%; z-index: 25}
				#lettrey {height: 20px; width: 9px; position: absolute; left: 8%; top: 86%; background-image: url('../Images/y-mobile.png'); background-repeat: no-repeat; z-index: 31; display: block; opacity: 0; animation: opacity ; -webkit-animation-delay: 6.5s; animation-delay: 6.5s; animation-duration: 7s;}
				
				#graphic {background-image: url('../Images/graphic-mobile.png'); background-repeat: no-repeat; height: 14px; width: 148px; position: absolute; z-index: 22; top: 45%; left: 21.11458333%}
				#designer {background-image: url('../Images/designer-mobile.png'); background-repeat: no-repeat; height: 16px; width: 169px; position: absolute; z-index: 22; top: 51%; left: 41.520833%}				

				#menufermenoir {background-color: #242525; width: 12% !important; height: 17%; position: fixed; top: 50%; margin-top: -8% !important; left: 0px; z-index: 100;  cursor: pointer; background-size: 100% 100%}
				#menuferme {background-color: #ffffff; width: 12% !important; height: 17%; position: fixed; top: 50%; margin-top: -8% !important; left: 0px; z-index: 100;  cursor: pointer; background-size: 100% 100%}

					#logo {width: 63.36805555%; height: 39.2156862745098%; position: absolute; top: 13.5%; left: 20%; -webkit-transition:-webkit-transform 0s; -moz-transition:-moz-transform 0s; -o-transition:-o-transform 0s; -ms-transition:-ms-transform 0s; transition:transform 0s;}
					#logo:hover {-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg);}

				#menuferme {background-color: #ffffff; width: 13% !important; height: 17%; position: fixed; top: 50%; margin-top: -1%; left: 0px; z-index: 100;  cursor: pointer; background-size: 100% 100%}
				#menuouvert {background-color: #242525; width: 50% !important; height: 100%; position: fixed; z-index: 200; left: 0px; display: none; background-size: 100% 100%}

				#menutexte {top: 25%; position: fixed; height: 100%; font-family: 'Raleway', sans-serif; font-size: 0.7em; left: 3%; margin-left: -10px; list-style: none; color: #ffffff; letter-spacing: 4px;}
					#logoblanc {width: 9%; height: 6.666666%; position: fixed; top: 10%; left: 7.5%;}
					#fermeture{width: 6%; height: 4.814814815%; position: fixed; top: 85%; left: 7.5%; z-index: 210; cursor: pointer; -webkit-transition:-webkit-transform .5s; -moz-transition:-moz-transform .5s; -o-transition:-o-transform .5s; -ms-transition:-ms-transform .5s; transition:transform .5s;}
						#fermeture:hover {-webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -o-transform:rotate(-360deg); -ms-transform:rotate(-360deg); transform:rotate(-360deg);}

						#traceur {display: none;}

				#contact {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 24%; margin-left: 28px; text-transform: uppercase; letter-spacing: 7px; color: #76859C; visibility: hidden; opacity: 0; margin-top: -100px}
				#about {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-top: 11px; margin-left: 33px; text-transform: uppercase; letter-spacing: 7px; color: #76859C; visibility: hidden; opacity: 0;}
				#services {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-left: 28px; text-transform: uppercase; letter-spacing: 7px; color: #76859C; visibility: hidden; opacity: 0; margin-top: 0px}
				#w {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-left: -25px; text-transform: uppercase; letter-spacing: 7px; color: #76859C; visibility: hidden; opacity: 0; margin-top: -28px}
				#rk {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-left: 40px; text-transform: uppercase; letter-spacing: 7px; color: #76859C; visibility: hidden; opacity: 0; margin-top: 28px}
				#experiments {font-family: 'Raleway', sans-serif; font-size: 0.8em; position: absolute; top: 0%; margin-top: 7px; margin-left: 22px; text-transform: uppercase; letter-spacing: 7px; color: #76859C; visibility: hidden; opacity: 0;}

				.follow {font-size: 0.5em; top: 72%; left: 10%;}
					.iconefollow {left: 10%; width: 40%;}
						.facebook {width: 14%;}
						.linkedin {width: 14%; margin-left: 5%;}
						.behance {width: 14%; margin-left: 5%;}
						.vimeo {width: 14%; margin-left: 5%;}

				.menulangue {top: 8.5%;font-size: 0.6em; left: 30%;}

				/* Page About */

				#titreabout {top: 3%; left: 40%;}
				#traittitreabout {height: 11%; top: 0%;}

				#fondnoirabout {top: 16%; height: 100%;}

				#profil {font-size: 1em; top: 3%;}

						#diagonalepresentation1 {display: none;}
						#presentation1 {display: none;}

						#diagonalepresentation2 {left: 25%; top: 32%;}
						#presentation2 {left: 25%; top: 34%;}

						#diagonalepresentation3 {left: 25%; top: 46%;}
						#presentation3 {left: 25%; top: 48%; width: 80%;}

						#diagonalepresentation1gauche {display: none;}
						#presentation1gauche {display: none;}

						#diagonalepresentation2gauche {display: none;}
						#presentation2gauche {display: none;}

						#diagonalepresentation3gauche {display: none;}
						#presentation3gauche {display: none;}

						#bac {left: 25%; top: 54%;}
						#bts {left: 40%; top: 54%;}
						#bac3 {left: 72%; top: 54%;}
						#raisvida {left: 25%; top: 69%; width: 60%;}
						#lem {left: 25%; top: 76%; width: 60%;}
						#carrevip {left: 25%; top: 83%; width: 60%;}
						#webadn {left: 25%; top: 90%; width: 60%;}

				/* Page Services */

				#titreservices {left: 28%;}
				#print {display: none;}
				#traitgaucheprint {top: 15%; width: 30%;}
				#paragrapheservices1 {display: none;}
				#paragrapheservices2 {display: none;}
				#paragrapheservices3 {display: none;}
				#artdirection {top: 15%; left: 10%;}
				#webdesign {top: 42%; left: 10%;}
				#motiondesign {top: 71%; left: 10%;}

				#fondnoirservices {width: 85%;}

						.listehaut li {width: 50%; top: 28%;}
										#lh2 {top: 32%;}
										#lh3 {top: 38%;}
										#lh4 {left: 55%;}
										#lh5 {left: 55%; top: 32%;}
										#lh6 {left: 55%; top: 38%;}

						.listemilieu li {width: 50%; top: 52%;}
										#lm2 {top: 57%;}
										#lm3 {top: 64%;}
										#lm4 {left: 55%;}
										#lm5 {left: 55%; top: 57%;}
										#lm6 {left: 55%; top: 64%;}

						.listebas li {width: 50%; top: 81%;}
										#lb2 {top: 88%;}
										#lb3 {top: 92%;}
										#lb4 {left: 55%;}
										#lb5 {left: 55%;top: 88%;}
										#lb6 {left: 55%;top: 92%;}

										#traitgauchecreativite {left: 2%;}
										#creativite {left: 7.17647059%;}

										#traitgauchedigital {left: 2%;}
										#digital {left: 7%;}

										#traitgauchevideo {left: 2%;}
										#video {left: 7.17647059%;}

					/* Page Contact */

					#formulaire {display: none;}

					#fondnoircontact {width: 100%; height: 50%; left: 0%;}
					#paragrapheprincipalcontact {top: 60%;}
						#briefing {left: 2%; top: 40%; font-size: 0.5em; text-align: center;}
						#reflexion {left: 23%; top: 40%; font-size: 0.5em; text-align: center;}
						#design {left: 39%; top: 40%; font-size: 0.5em; text-align: center;}
						#integration {left: 58%; top: 40%; font-size: 0.5em; text-align: center;}
						#champagne {left: 83%; top: 40%; font-size: 0.5em; text-align: center;}

						#mentionslegales {top: 96%; left: 7.5%;}

						#titrecontact {top: 49%; left: 25%; font-size: 1.5em;}
						#traittitrecontact {top: 58%; width: 77%;}

						#traitadresse{top: 67%; left: 9%;}
						#adresse {top: 66%; left: 13%;}
						#paragraphecontact {left: 13%; top: 72%;}
						#paragraphecontact2 {left: 13%; top: 75%;}
						#paragraphecontact3 {left: 13%; top: 80%;}
						#paragraphecontact4 {left: 13%; top: 83%;}

						#traitcoordonnees {top: 67%; left: 49%;}
						#coordonnees {top: 66%; left: 53%;}
						#paragraphecontact5 {left: 53%; top: 72%;}
						#paragraphecontact6 {left: 53%; top: 80%;}

					/* Page Work */

					#fondnoirwork {width: 100%; z-index: 50; height: 60%;}
					#traitwork {display: none;}
					#titrework {left: 60%;}
					#next {left: 50%;}
					#previous {left: 50%;}
					#titreprojetwork {left: 10%; top: 8%; font-size: 1.5em;}

						.suiteprojet {width: 30%; height: 9%; top: 15%; left: 20%;}
	
							#suiteprojet2 {margin-left: 31%;}
							#suiteprojet3 {margin-left: 0%; top: 25%;}
							#suiteprojet4 {margin-left: 31%; top: 25%;}
							#suiteprojet5 {top: 35%; margin-left: 0%;}
							#suiteprojet6 {top: 35%; margin-left: 31%;}
							#suiteprojet7 {top: 45%; margin-left: 0%;}
							#suiteprojet8 {top: 45%; margin-left: 31%;}

					#partieblanchescroll {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrollicone {width: 6%; top: 92%; left: 83.5%;}

						#titrepartieblanche {left: 25%; margin-top: 15px;}
						#titrespecialisation {left: 15%;}

						#blocopacite {width: 100%; overflow: hidden; left: 0px;}
						
						/* Page Projet 1 */

						#fondnoirworkprojet1 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet1 {display: none;}
						#titreworkprojet1 {left: 60%;}
						#titreprojet1work {left: 10%; top: 15%; font-size: 1.5em;}

						#videoprincipale {left: 50%; width: 300px; height: 168.5px; top: 38%; margin-left: -150px;}

						#partieblanchescrollprojet1 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet1 {width: 6%; top: 92%; left: 83.5%;}

						/* Page Projet 2 */

						#fondnoirworkprojet2 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet2 {display: none;}
						#titreworkprojet2 {left: 60%;}
						#titreprojet2work {left: 10%; top: 15%; font-size: 1.5em;}

						#partieblanchescrollprojet2 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet2 {width: 6%; top: 92%; left: 83.5%;}

						/* Page Projet 3 */

						#fondnoirworkprojet3 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet3 {display: none;}
						#titreworkprojet3 {left: 60%;}
						#titreprojet3work {left: 10%; top: 15%; font-size: 1.5em;}

						#partieblanchescrollprojet3 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet3 {width: 6%; top: 92%; left: 83.5%;}

						/* Page Projet 4 */

						#fondnoirworkprojet4 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet4 {display: none;}
						#titreworkprojet4 {left: 60%;}
						#titreprojet4work {left: 10%; top: 15%; font-size: 1.5em;}

						#partieblanchescrollprojet4 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet4 {width: 6%; top: 92%; left: 83.5%;}

						/* Page Projet 5 */

						#fondnoirworkprojet5 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet5 {display: none;}
						#titreworkprojet5 {left: 60%;}
						#titreprojet5work {left: 10%; top: 15%; font-size: 1.5em;}

						#partieblanchescrollprojet5 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet5 {width: 6%; top: 92%; left: 83.5%;}

						/* Page Projet 6 */

						#fondnoirworkprojet6 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet6 {display: none;}
						#titreworkprojet6 {left: 60%;}
						#titreprojet6work {left: 10%; top: 15%; font-size: 1.5em;}

						#partieblanchescrollprojet6 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet6 {width: 6%; top: 92%; left: 83.5%;}

						/* Page Projet 7 */

						#fondnoirworkprojet7 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet7 {display: none;}
						#titreworkprojet7 {left: 60%;}
						#titreprojet7work {left: 10%; top: 15%; font-size: 1.5em;}

						#partieblanchescrollprojet7 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet7 {width: 6%; top: 92%; left: 83.5%;}

						/* Page Projet 8 */

						#fondnoirworkprojet8 {width: 100%; z-index: 50; height: 60%;}
						#traitworkprojet8 {display: none;}
						#titreworkprojet8 {left: 60%;}
						#titreprojet8work {left: 10%; top: 15%; font-size: 1.5em;}

						#partieblanchescrollprojet8 {overflow: hidden; height: 2500px; left: 0px; width: 100%; top: 350px;}
						#scrolliconeprojet8 {width: 6%; top: 92%; left: 83.5%;}

				}