Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div id="site_container">


<a href="#cd-nav" class="cd-nav-trigger">Menu 
		<span class="cd-nav-icon"></span>

		<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
			<circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
		</svg>
	</a>
	
	<div id="cd-nav" class="cd-nav">
		<div class="cd-navigation-wrapper">
			<div class="cd-half-block">
				
       
				<nav>
					<ul class="cd-primary-nav">
						<li><a id="accueil-link" href="#0" class="selected stag">Accueil</a></li>
						<li><a href="http://www.agence-noddy.fr/services" class="stag">Agence Intéractive</a></li>
						<li><a href="" class="">Développement Web & Mobile</a></li>
						<li><a href="" class="stag">Equipe</a></li>
						<li><a href="" class="contact stag">Contact</a></li>
					</ul>
				</nav>
			</div><!-- .cd-half-block -->
			
			
			</div> <!-- .cd-navigation-wrapper -->
	</div> <!-- .cd-nav -->


<section id="accueil">
<div id="particles-js"> </div>

      <div class="inner">
         <div id="brand-holder" class="home-brand-holder">
          <header> 
	
<svg version="1.1" id="logo_left" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="150px" height="118px" viewBox="30 0 854.3 548.8" preserveAspectRatio="xMinYMid meet" shape-rendering="optimizeQuality" enable-background="new 0 0 854.3 548.8"
	 xml:space="preserve">

	<g id="brace_left">
	
	
	<path id="path_brace_left" style="display:none" d="M172.9,518.6c-5.4,0-10.8-0.7-16.1-1.4c-5.8-0.7-11.8-1.6-17.4-3.5
			c-9.8-3.2-18.2-11-23.9-19.4c-10.2-14.7-13.5-32.5-14.9-50c-1.7-21.7-1.4-43.5-1.7-65.2c-0.2-12.9-0.5-25.8-2.2-38.6
			c-1.3-10-3.6-20.7-10.8-28.3c-3.8-4.1-8.9-6.8-14.3-7.9c-3.9-0.8-7.8-0.8-11.8-0.9c-0.7,0-1.4,0-2.1-0.1c-0.3,0-0.9,0.1-0.9-0.2
			c0-0.5,0-1,0-1.5c0-1.5,0-3,0-4.5c0-11.8,0-23.6,0-35.5c0-4.4-0.6-9.2,2.6-12.7c1.8-2,4.3-2.9,6.8-3.5c2.9-0.7,5.7-1.2,8.5-2.1
			c2.5-0.8,5.2-1.7,7.5-3c2.2-1.3,4.1-3.3,5.6-5.4c7.1-9.2,8.6-21.4,9.6-32.7c1.1-12.7,1.4-25.5,1.5-38.2
			c0.2-12.9,0.2-25.9,0.5-38.8c0.3-12.7,0.7-25.6,3.4-38.1c2.4-11.1,6.3-22.2,12.6-31.8c5.8-8.7,13.9-15.4,23.7-19.3
			c10.7-4.2,22.4-5,33.8-5c2.5,0,5,0,7.6,0c3.6,0,7.2,0.7,9.6,3.7c2.9,3.6,2.2,8.4,2.2,12.7c0,1.7,0,3.4,0,5.1c0,6.2,0,12.4,0,18.6
			c0,1.9,0,3.8,0,5.8c0,3.5-1.5,6.7-4.4,8.7c-2.2,1.5-4.6,1.8-7.2,1.7c-2.6,0-5.2,0.1-7.8,0.6c-3,0.6-5.9,1.2-8.9,2
			c-1.3,0.4-2.6,0.7-3.9,1.2c-1.3,0.4-3.1,0.9-4.1,1.9c-0.8,0.8-1.3,2.2-1.7,3.3c-0.5,1.4-0.9,2.9-1.2,4.3c-0.6,2.8-0.9,5.6-1.2,8.4
			c-0.7,6.4-0.9,12.9-0.9,19.4c-0.1,12.1-0.1,24.3-0.3,36.4c-0.4,22.8-0.2,46-6.6,68.1c-3.1,10.8-7.9,21-15.3,29.7
			c-1.9,2.2-3.8,4.2-5.9,6.2c-1.1,1-2.2,2-3.3,2.9c-0.7,0.6-3.4,2-2.5,3.2c0.3,0.5,1,0.9,1.5,1.3c0.5,0.4,1,0.9,1.5,1.3
			c1.1,0.9,2.1,1.9,3.1,2.9c2,1.9,3.8,4,5.6,6.1c7.2,8.8,12.3,19.1,15.4,30.1c3.5,12.1,5.1,24.8,6,37.3c1.4,20.6,0.8,41.3,1.1,61.9
			c0.1,6.5,0.3,13.1,0.5,19.6c0.2,5.6,0.5,11.3,2.4,16.7c0.8,2.3,2,4.6,3.9,6.2c2.2,1.9,5.3,2.5,8,3c3,0.5,6.1,0.7,9.1,0.7
			c2.8,0,5.6-0.3,8.3,0.1c5,0.7,8.6,4.9,8.7,9.9c0.1,1.9,0,3.8,0,5.8c0,6,0,12.1,0,18.1c0,1.7,0,3.5,0,5.2c0,4.5,0.8,9.7-2.2,13.4
			c-2.5,3.1-6,3.8-9.7,3.8C177.9,518.6,175.4,518.6,172.9,518.6z"/>
	
	</g>
	<g id="logo_nod">
	
	<path id="n" d="M414.8,374.3c-4.5,0-8.8-2.4-11.2-6.1c-3-4.6-2.3-10.2-2.3-15.5c0-13.3,0-26.6,0-39.8
			c0-6.6,0-13.2,0-19.8c0-6.5,0.2-13.1-0.1-19.6c-0.1-3.2-0.5-6.4-0.8-9.6c-0.3-2.9-0.7-5.9-1.8-8.7c-1.8-4.4-5.2-7.9-9.2-10.4
			c-8.6-5.2-19.7-6.3-29.4-4.2c-5.3,1.2-10.3,3.5-14.6,6.9c-4,3.2-6.6,7.5-7.9,12.4c-1.4,5.6-0.8,11.6-0.8,17.3c0,6.6,0,13.3,0,19.9
			c0,13.2,0,26.5,0,39.7c0,6.5,0,13.1,0,19.6c0,3,0.2,6.2-0.9,9.1c-0.9,2.2-2.3,4.2-4.2,5.7c-4.8,3.8-11,3-16.7,3
			c-6.5,0-13.1,0-19.6,0c-2.8,0-5.6-0.1-8.2-1.4c-2-1-3.7-2.5-5-4.3c-3.1-4.5-2.6-9.9-2.6-15.2c0-13.2,0-26.4,0-39.6
			c0-6.6,0-13.2,0-19.8c0-6.6-0.1-13.2,0-19.8c0.4-12.5,3-24.8,7.3-36.6c4-11,9.5-22.5,18.6-30.3c9-7.7,19.8-13.4,31.1-17
			c21.5-6.9,45.7-6.7,67,0.7c20.9,7.2,39.8,21.7,48.6,42.3c5,11.6,6.4,24,6.4,36.6c0.1,13.2,0,26.5,0,39.7c0,13.3,0,26.6,0,39.8
			c0,3.2,0,6.5,0,9.7c0,2.5-0.2,4.8-1.2,7c-1.8,4-5.6,7.1-9.9,7.9c-2.4,0.4-4.8,0.2-7.2,0.2c-2.8,0-5.6,0-8.3,0
			C426.1,374.3,420.4,374.3,414.8,374.3z"/>	
	
		<path id="d1" d="M749.8,378.8c-20,0-40.5-4.6-57.3-15.9c-18-12.1-30.6-30.9-36.5-51.6c-6.5-22.7-5.4-47.8,3.9-69.6
			c8.1-19.2,22.6-35.5,41.2-45.1c21-10.8,45.4-12.4,68.4-8.3c6.3,1.1,12.6,2.7,18.7,4.6c1,0.3,4.7,2.2,4.7,0.1c0-0.2,0-0.4,0-0.6
			c0-2.9,0-5.9,0-8.8c0-11.8,0-23.7,0-35.5c0-11.5,0-22.9,0-34.4c0-2.5,0-4.9,0-7.4c0-3.7-0.3-7.5,0.4-11.2c0.9-4.9,4.1-8.9,9-10.2
			c2.9-0.8,6-0.6,9-0.6c1.8,0,3.6,0,5.4,0c2.8,0,5.6,0,8.5,0c4.7,0,9.4-0.5,14.1-0.1c5.1,0.4,10.9,2.1,13.4,7.1
			c1.3,2.6,1.4,5.5,1.5,8.4c0.1,2.8,0.2,5.5,0.2,8.3c0,6.5-0.3,13-0.4,19.5c0,1.7,0,3.3,0,5c0,8.8,0,17.6,0,26.4
			c0,12.9,0,25.8,0,38.7c0,11.9,0,23.7,0,35.6c0,5.7,0,11.5,0,17.2c0,10.7,0.4,21.3-0.3,32c-0.7,10-2.5,19.9-5.5,29.5
			c-3,9.7-7.2,19.1-12.9,27.6c-6.1,9-14,16.3-23.3,22C793.4,373,771.6,378.8,749.8,378.8z M753.3,237.5c-10.8,0-21.8,3.6-29.9,11
			c-7.8,7.2-12.1,17.5-12.3,28c-0.2,10.9,3.6,22.2,11.1,30.3c7.2,7.8,17.4,11.8,28,11.8c19.7,0,39.7-13.5,42.9-33.7
			c1.8-11.3,0.4-23.2-6.5-32.5c-6.4-8.6-16.4-13.3-26.8-14.5C757.5,237.6,755.4,237.5,753.3,237.5z"/>
		<path id="o" d="M553.3,378.5c-22.1,0-44.2-6.5-61.5-20.6c-18.4-15-31.8-36.6-35.8-60.2c-3.9-23,0.9-46.9,13.3-66.6
			c11.4-18.2,28.7-32.6,49-39.8c21.1-7.5,45-7.8,66.4-1.1c20.4,6.4,38.1,19.6,50.2,37.3c12.6,18.6,18.1,41,16.6,63.3
			c-0.8,12-3.4,24-8.8,34.8c-5,10.1-12.6,18.5-21,26c-8.5,7.6-17.7,14.6-28.3,19c-11.2,4.7-23.3,7.2-35.4,7.7
			C556.6,378.5,554.9,378.5,553.3,378.5z M522.6,316.6c8.8,7.5,20,10.9,31.4,10.7c10.7-0.1,21.2-3.4,29.3-10.6
			c14.2-12.9,18.2-34.9,10.9-52.4c-4-9.6-11.5-17.8-21-22.1c-10.3-4.7-23-5.3-33.8-2.3c-10.4,2.9-19,9.8-24.8,18.8
			c-5.9,9.2-8.1,20.3-6.4,31.2c1,6.1,3.2,12.1,6.5,17.3c1.2,2,2.6,3.9,4.1,5.6c0.9,1,1.9,2,2.8,2.9
			C521.8,316,522.2,316.5,522.6,316.6C529.2,322.2,522.2,316.5,522.6,316.6z"/>
		
			</g>

</svg>


<svg version="1.1" id="logo_right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="122px" height="118px" viewBox="0 0 695.7 548.8" preserveAspectRatio="xMinYMid meet" shape-rendering="optimizeQuality" enable-background="new 0 0 695.7 548.8"
	 xml:space="preserve">

<g id="brace_right">
	
		<path id="Brace_right" style="display:none" d="M513.2,518.6c-4.9,0-9.2-3.7-9.9-8.5c-0.2-1.8-0.1-3.7-0.1-5.5c0-5.8,0-11.6,0-17.4
			c0-4.4,0-8.8,0-13.2c0-1.9,0-3.9,0.8-5.7c0.9-2.1,2.6-3.9,4.7-4.9c2.4-1.2,5-1.1,7.7-1.1c2.9,0,5.8-0.6,8.7-1.2
			c3-0.6,6-1.3,8.9-2.3c2.3-0.8,4.9-1.4,6.1-3.8c1.3-2.6,1.9-5.5,2.4-8.3c0.6-3.1,1-6.1,1.2-9.2c0.5-6,0.5-12.1,0.6-18.1
			c0-6.5,0.1-13,0.1-19.5c0.1-12.5,0.2-25,0.7-37.5c0.5-12.9,1.4-25.8,4.4-38.4c2.7-11.1,6.6-22.1,13-31.7c3.2-4.8,7-9.2,11.2-13.1
			c1-1,2.1-1.9,3.2-2.8c0.5-0.4,1.2-0.8,1.6-1.3c0.5-0.8-0.2-1.3-0.7-1.8c-2.2-1.8-4.3-3.8-6.4-5.8c-7.8-7.9-14-17.2-18-27.6
			c-4-10.5-6-21.8-7.3-32.9c-2.4-21.3-1.8-42.8-1.9-64.2c0-6.6-0.1-13.1-0.3-19.7c-0.2-6.3-0.1-12.7-0.9-18.9
			c-0.4-2.8-1.1-5.6-2.2-8.2c-1-2.3-2.4-4.4-4.6-5.6c-2.4-1.4-5.4-1.8-8.1-2.2c-3.1-0.4-6.2-0.5-9.3-0.5c-3,0-6.2,0.4-9.1-0.7
			c-2.3-0.9-4.2-2.7-5.3-4.9c-1-2-1.1-4.1-1.1-6.3c0-5.8,0-11.5,0-17.3c0-4.4,0-8.9,0-13.3c0-2.5-0.1-5.2,0.8-7.6
			c0.8-2.2,2.6-4.1,4.7-5.1c3-1.4,6.5-1.1,9.7-1.1c9.3,0,18.5,1,27.6,2.5c5.7,1,11.2,2.3,16.2,5.2c4.6,2.6,8.8,6,12.4,9.9
			c11.5,12.3,17.1,29.2,19.1,45.6c3.1,24.2,2.4,48.8,2.7,73.2c0.2,12.8,0.4,25.8,1.9,38.5c1.2,10.4,3.1,21.6,9.9,29.9
			c2.6,3.2,6,5.8,9.8,7.4c4,1.7,8.3,2.3,12.7,2.3l7.9,0.1v47c0,2.6-0.6,4.7-1.8,6.5c-1.2,1.7-2.9,3-4.8,3.7c-2.8,1-5.8,1.3-8.7,2.1
			c-2.8,0.8-5.6,1.7-8.3,2.9c-4.8,2.1-8,6.2-10.4,10.7c-5.8,10.9-6.5,23.9-7.3,36c-1.6,25.7-0.7,51.5-1.7,77.2
			c-0.5,12.3-1.5,24.6-4.7,36.5c-2.9,10.7-7.4,21.3-14.4,30c-6.3,7.8-14.6,13.4-24.2,16.3c-10.8,3.3-22.2,3.7-33.5,3.6
			C517,518.6,515.1,518.6,513.2,518.6z"/></g>
			
<g id="logo_dy">
			
		<path id="y" d="M297.7,507.7c0-6.5-0.9-13-1.5-19.4c-0.6-6.5-0.5-13.1-0.5-19.6c0-3.1-0.2-6.3,0.6-9.3
			c0.7-2.5,2-4.7,3.8-6.6c1.8-1.9,4-3.4,6.4-4.2c2.9-1,6.2-1,9.2-1.4c3-0.4,6-0.9,8.9-1.6c2.6-0.6,5.4-1.5,7.6-3
			c3.7-2.4,5.6-6.6,6.5-10.8c1.1-4.9,0.9-10,0.9-15c0-6.6,0-13.3,0-19.9c0-3.3,0-6.6,0-9.9c0-1.6,0-3.1,0-4.7c0-1.5,0.2-3.2-0.1-4.6
			c-0.5-2.7-3.6-1.3-5.3-0.9c-2.9,0.7-5.9,1.3-8.9,1.7c-11.6,1.7-23.6,1.4-35.1-0.6c-11.5-2.1-22.7-6-33.1-11.5
			c-10.2-5.4-19.5-12.6-26.2-22.1c-6.9-9.8-10.6-21.3-12.1-33.1c-0.8-6.1-1-12.3-1-18.5c0-6.6,0-13.2,0-19.8c0-13.2,0-26.5,0-39.7
			c0-6.6,0-13.2,0-19.9c0-3.3,0-6.6,0-9.9c0-2.3,0.5-4.6,1.5-6.6c2-4.1,5.7-7.2,10.2-8.3c3-0.7,6.3-0.4,9.4-0.4c3.3,0,6.7,0,10,0
			s6.7,0,10,0c3.1,0,6.2-0.2,9.1,0.9c4.9,1.8,8.8,6.1,9.7,11.3c0.5,2.9,0.3,6,0.3,9c0,3.3,0,6.6,0,9.8c0,6.6,0,13.2,0,19.8
			c0,13.2,0,26.4,0,39.5c0,6.6,0,13.1,0.8,19.6c0.3,3,0.6,6,1.6,8.8c0.9,2.6,2.4,4.9,4.3,6.8c8.2,8.2,21.7,10,32.7,7.8
			c5.5-1.1,11-3.5,15.2-7.4c4.2-3.9,6.5-9.1,7-14.8c0.5-6.4,0.1-13,0.1-19.5c0-6.7,0-13.3,0-20c0-13.3,0-26.7,0-40c0-3.3,0-6.7,0-10
			c0-2.9-0.3-5.9,0.1-8.8c0.6-4.4,3.2-8.4,7-10.8c4.7-2.9,10.2-2.3,15.5-2.3c6.6,0,13.2,0,19.9,0c2.9,0,5.7,0.1,8.4,1.2
			c2.5,1,4.6,2.7,6.2,4.8c1.5,2,2.5,4.4,2.9,6.9c0.4,3,0.1,6.2,0.1,9.3c-0.1,26.4-0.2,52.9-0.3,79.3c-0.1,26.5-0.2,53-0.3,79.6
			c-0.1,13.3-0.1,26.5-0.2,39.8c0,6.5-0.2,13-0.9,19.4c-0.7,6.4-1.9,12.8-3.4,19.1c-2.8,11.8-6.5,24.2-13.5,34.2
			c-6.8,9.8-18.5,15.6-29.6,19.2C334.2,506.6,315.9,507.7,297.7,507.7C297.7,498.1,313.9,507.7,297.7,507.7z"/>
		<path id="d2" d="M104.8,376.8c-20,0-40.5-4.6-57.3-15.9c-18-12.1-30.6-30.9-36.5-51.6c-6.5-22.7-5.4-47.8,3.9-69.6
			c8.1-19.2,22.6-35.5,41.2-45.1c21-10.8,45.4-12.4,68.4-8.3c6.3,1.1,12.6,2.7,18.7,4.6c1,0.3,4.7,2.2,4.7,0.1c0-0.2,0-0.4,0-0.6
			c0-2.9,0-5.9,0-8.8c0-11.8,0-23.7,0-35.5c0-11.5,0-22.9,0-34.4c0-2.5,0-4.9,0-7.4c0-3.7-0.3-7.5,0.4-11.2c0.9-4.9,4.1-8.9,9-10.2
			c2.9-0.8,6-0.6,9-0.6c1.8,0,3.6,0,5.4,0c2.8,0,5.6,0,8.5,0c4.7,0,9.4-0.5,14.1-0.1c5.1,0.4,10.9,2.1,13.4,7.1
			c1.3,2.6,1.4,5.5,1.5,8.4c0.1,2.8,0.2,5.5,0.2,8.3c0,6.5-0.3,13-0.4,19.5c0,1.7,0,3.3,0,5c0,8.8,0,17.6,0,26.4
			c0,12.9,0,25.8,0,38.7c0,11.9,0,23.7,0,35.6c0,5.7,0,11.5,0,17.2c0,10.7,0.4,21.3-0.3,32c-0.7,10-2.5,19.9-5.5,29.5
			c-3,9.7-7.2,19.1-12.9,27.6c-6.1,9-14,16.3-23.3,22C148.4,371,126.6,376.8,104.8,376.8z M108.3,235.5c-10.8,0-21.8,3.6-29.9,11
			c-7.8,7.2-12.1,17.5-12.3,28c-0.2,10.9,3.6,22.2,11.1,30.3c7.2,7.8,17.4,11.8,28,11.8c19.7,0,39.7-13.5,42.9-33.7
			c1.8-11.3,0.4-23.2-6.5-32.5c-6.4-8.6-16.4-13.3-26.8-14.5C112.6,235.6,110.4,235.5,108.3,235.5z"/>
	</g>

</svg>

    <a href="http://www.agence-noddy.fr" title="Agence Digitale" alt="Agence Digitale" target="_blank">Agence Digitale</a>               

 <!--   <span itemprop="description">
                       <p>Labor<span style="color: #f5f5f5">@</span>toire Nu#érique</p>                                      
                       <p>Communication Digitale</p>
                       </span>-->                        
                   </header> 
                  
<!--<canvas id="canvas" style="position:absolute; top:0; left:0;"></canvas>
	  <div id="buffer" style="display:none;"></div>-->
                  
        </div>



</div>

</section>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!--CDN link for the latest TweenMax-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js"></script>
              
            
!

CSS

              
                /* ==========================================================================
   Accueil (Home)
   ========================================================================== */

#accueil {
    
    display: table;
    overflow:hidden;
    position: relative;    
    width: 100%;    
    height: 100%;
    min-height: 100%;    
    background-color: #333;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
            
   -webkit-transition: all 0.5s ease-in-out;
           transition: all 0.5s ease-in-out;      
    }
    
#accueil .inner {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 40px;
    }

#accueil .home-brand-holder {
    width: ;
    text-align: center;
    cursor: default;
    position: relative;
    z-index: 1;
    margin: 0 auto;
	display: block;
	
	}
	
#brand-holder svg {
    overflow: visible;
    margin: -5px;
    }

#accueil svg:not(:root) {
    overflow: visible;
    }
    
#accueil .home-brand-holder h1 {
    margin: 0 auto 15px auto;
    }

#accueil .home-brand-holder h2, h3, p {
    margin: 0 auto;
    line-height: 1.4;
    font-size: 14px;
    }

#accueil .home-brand-holder p, span{
    color: #fcfcfc;
    text-transform: uppercase;  
    }

#accueil .home-brand-holder p:first-child {
    letter-spacing: 0.2px;
    }

#accueil .home-brand-holder img {
    width: 183px;
    height: auto;
    }

    
@media only screen and (max-width : 992px) {
    
     #accueil .home-brand-holder img {
     width: 173px;
     height: auto; 
     }
     
    #accueil .home-brand-holder h2, h3, p {
    font-size: 13px;
    }
}

@media only screen and (max-width : 768px) {
   
     #accueil .home-brand-holder img {
     width: 163px;
     height: auto;
     }
     
     #accueil .home-brand-holder h2, h3, p {
     font-size: 13px;
    }
}

@media only screen and (max-width : 480px) {
 
     #accueil .home-brand-holder img {
     width: 120px;
     height: auto;
     }  

     #accueil .home-brand-holder h2, h3, p {
     font-size: 11px;
     line-height: 1.3;
     }
}

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

    #logo_left {
        width: 93px;
        height: 73px;
        }
    
    #logo_right {
        width: 76px;
        height: 73px;
        }
} 

/* ==========================================================================
   Logo     light-yellow: #fdf49b   
   ========================================================================== */

#logo_left {
fill: #fff;
}

#logo_right {
fill: #fff;
}


/* -------------------------------- 

Main Components 

-------------------------------- */
main {
  
  min-height: 100%;
  height: 100%; /* cross-browser */
  width: 100%;
  display: block; 
  /* Force Hardware Acceleration in WebKit
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); */
  
  }

/*.navigation-is-open main {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}*/

.contact-is-open main {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}



.cd-nav-trigger {
  position: fixed;
  z-index: 30;
  left: 5%;
  top: 20px;
  height: 54px;
  width: 54px;
  background-color: transparent;
  border-radius: 50%;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}
.cd-nav-trigger .cd-nav-icon {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 22px;
  height: 2px;
  background-color: #ffffff;
}
.cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after {
  /* upper and lower lines of the menu icon */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
  -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
  transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
  top: 2px;
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
  top: -2px;
}
.cd-nav-trigger svg {
  position: absolute;
  top: 0;
  left: 0;
}
.cd-nav-trigger circle {
  /* circle border animation */
  -webkit-transition: stroke-dashoffset 0.4s 0s;
  -moz-transition: stroke-dashoffset 0.4s 0s;
  transition: stroke-dashoffset 0.4s 0s;
}
.navigation-is-open .cd-nav-trigger {
  /* rotate trigger when navigation becomes visible */
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  /* animate arrow --> from hamburger to arrow */
  width: 50%;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s;
  -moz-transition: -moz-transform 0.5s, width 0.5s;
  transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before {
  top: 0;
}
.navigation-is-open .cd-nav-trigger circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.4s 0.3s;
  -moz-transition: stroke-dashoffset 0.4s 0.3s;
  transition: stroke-dashoffset 0.4s 0.3s;
}
@media only screen and (min-width: 1170px) {
  .cd-nav-trigger {
    top: 40px;
  }
}

.cd-nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.7s;
  -moz-transition: visibility 0s 0.7s;
  transition: visibility 0s 0.7s;
  
  background-color: rgba(93,95,94,0.0);  
}
.cd-nav .cd-navigation-wrapper {
  /* all navigation content */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 5% 40px calc(5% + 80px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
   -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.navigation-is-open .cd-nav {
z-index: 10;
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
  
  }
.navigation-is-open .cd-nav .cd-navigation-wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}
.cd-nav h2 {
  position: relative;
  margin-bottom: 1.7em;
  
  font-weight: 800;
  color: #080b0f;
  text-transform: uppercase;
}
.cd-nav h2::after {
  /* bottom separation line */
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  height: 1px;
  width: 60px;
  background-color: currentColor;
}
.cd-nav .cd-primary-nav {
  margin-top: 60px;
}
.cd-nav .cd-primary-nav li {
  margin: 1.6em 0;
}
.cd-nav .cd-primary-nav a {

  color: rgba(255, 255, 255, 0.3);
  display: inline-block;
}
.cd-nav .cd-primary-nav a.selected {
  color: rgba(255,245,137,1);
}
.no-touch .cd-nav .cd-primary-nav a:hover {
  color: rgba(255,245,137,1);
}
.cd-nav .cd-contact-info {
  margin-top: 80px;
}
.cd-nav .cd-contact-info li {
  
  margin-bottom: 1.5em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.3);
}
.cd-nav .cd-contact-info a {
  color: #ffffff;
}
.cd-nav .cd-contact-info span {
  display: block;
}
.cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
  
}


  .cd-nav .cd-primary-nav a {
  font-family: "ProximaNova-Xbold", "Raleway", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 20px;
  }


.cd-nav .cd-navigation-wrapper::after {
    clear: both;
    content: "";
    display: table;
  }
  .cd-nav .cd-half-block {
    width: 100%;
    
    
  }
  
    .cd-nav .cd-half-block nav {
padding-top: 130px;
    text-align: center;
  }  




    
    @media only screen and (min-width: 1170px) {
  .cd-nav .cd-navigation-wrapper {
    padding: ;
  }
  .cd-nav .cd-navigation-wrapper::after {
    clear: both;
    content: "";
    display: table;
  }
  .cd-nav .cd-half-block {
    width: 100%;
    
    
  }
  
    .cd-nav .cd-half-block nav {
padding-top: 130px;
    text-align: center;
  }  
  
  
  
  .cd-nav .cd-primary-nav {
    margin-top: 0;
  }
  .cd-nav h2 {
    font-size: ;
    margin-bottom: 5.6em;
  }
  
   ul {
    margin-left: -50px!important;
  }  
  
  .cd-nav .cd-primary-nav li {
    margin: 2em 0;
  }
  .cd-nav .cd-primary-nav a {
  font-family: "ProximaNova-Xbold", "Raleway", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 20px;
  }
  .cd-nav .cd-contact-info {
    margin-top: 120px;
    text-align: right;
  }
  .cd-nav .cd-contact-info li {
    margin-bottom: 2.4em;
  }
  .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
    font-size: ;
  }
}

.no-js main {
  height: auto;
  overflow: visible;
}

.no-js .cd-nav {
  position: static;
  visibility: visible;
}
.no-js .cd-nav .cd-navigation-wrapper {
  height: auto;
  overflow: visible;
  padding: 100px 5%;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}




              
            
!

JS

              
                /* SVG MORPHEUS Logo Morph Innit & Config */

var lml = 0;
var LogoLeft = new SVGMorpheus('#logo_left');

    function logoMorphL() {
    
	    if (lml++ % 2 == 0) {
	    	
	        LogoLeft.to('brace_left', {duration: 900, easing: 'elastic-in-out', rotation: 'none'});

	    } else {

	        LogoLeft.to('logo_nod', {duration: 900, easing: 'elastic-in-out', rotation: 'none'});
	    }
};

var lmr = 0;
var LogoRight = new SVGMorpheus('#logo_right');

    function logoMorphR() {
    
	    if (lmr++ % 2 == 0) {
	    	
	        LogoRight.to('brace_right', {duration: 900, easing: 'elastic-in-out', rotation: 'none'});

	    } else {

	        LogoRight.to('logo_dy', {duration: 900, easing: 'elastic-in-out', rotation: 'none'});
	    }
};


function LogoMorph() {
    logoMorphL();
    logoMorphR();
}

/* Tween Stuffs */


TweenMax.staggerFrom('.stag', 2, {alpha:0, yPercent:-100, scale:0.4, force3D:false, ease:Elastic.easeOut},0.2);

TweenMax.to($('.cd-nav-trigger'), 0.6,{repeat:2, yoyo:true, ease:Linear.easeNone});

$('.stag').click(function(){
 TweenMax.staggerTo(".stag", 0.5, {opacity:0, y:-100, ease:Back.easeIn}, 0.1);
});

$('.cd-nav-trigger').click(function(){
  TweenMax.set(".stag", {clearProps:"all"})
  TweenMax.staggerFrom('.stag', 2, {alpha:0, yPercent:-100, scale:0.4, force3D:false, ease:Elastic.easeOut},0.2);
})

$('.stag').mousedown(function(){
  TweenMax.to($(this), 1, {scale:0.8, ease:Elastic.easeOut});
});

$('.stag').mouseenter(function(){
  TweenMax.to($(this), 1, {scale:1.2, ease:Elastic.easeOut});
  TweenMax.to($(''), 1, {scale:1, ease:Elastic.easeOut});  
  
});

$('.stag').mouseleave(function(){
  TweenMax.to($(this), 1, {scale:1, ease:Elastic.easeOut});
  TweenMax.to($(''), 5, {scale:1, ease:Elastic.easeOut});  
  
})


function LogoOpen() {
         LogoMorph()
         TweenMax.to($('#logo_left'), 1, {css:{width:"300px", ease:Elastic.easeOut}});
         TweenMax.to($('#logo_right'), 1, {css:{width:"300px", ease:Elastic.easeOut}});                  
}


function LogoClose() {
         TweenMax.to($('#logo_left'), 1, {css:{width:"150px", ease:Elastic.easeOut}});
         TweenMax.to($('#logo_right'), 1, {css:{width:"122px", ease:Elastic.easeOut}});         
         setTimeout(LogoMorph , 200)         
                             
}


$('.cd-nav-trigger').click(function () {

    if ($('body').hasClass('navigation-is-open') === true) {        
    LogoClose()
    }  
    else { 
    LogoOpen()        
    }
});



$('.stag').click(function () {

    if ($('body').hasClass('navigation-is-open') === true) {
       TweenMax.to($('#brand-holder'), 1, {scale:1, ease:Elastic.easeOut});
       setTimeout(LogoClose , 200)
       } 

    
    else {
      setTimeout(LogoOpen , 1000)
       }

});



/* Navigation Innit & Config */

jQuery(document).ready(function($){
	var isLateralNavAnimating = false;
	
	//open/close lateral navigation
	$('.cd-nav-trigger').on('click', function(event){
		event.preventDefault();
		//stop if nav animation is running 
		if( !isLateralNavAnimating ) {
			if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; 
			
			$('body').toggleClass('navigation-is-open');
			$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
				//animation is over
				isLateralNavAnimating = false;
			});
		}
	});
	
	
	//open/close lateral navigation
	$('.stag').on('click', function(event){
		event.preventDefault();
		//stop if nav animation is running 
		if( !isLateralNavAnimating ) {
			if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; 
			
			$('body').toggleClass('navigation-is-open');
			$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
				//animation is over
				isLateralNavAnimating = false;
			});
		}
	});
	
//open/close contact
	$('.contact').on('click', function(event){
		event.preventDefault();
		//stop if nav animation is running 
		if( !isLateralNavAnimating ) {
			if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; 
			
			$('body').toggleClass('contact-is-open');
			$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
				//animation is over
				isLateralNavAnimating = false;
			});
		}
	});
	
});

              
            
!
999px

Console