/*------------------------------------------------------------------------------
  SUMMARY
--------------------------------------------------------------------------------

1    licence
2    reset CSS by Eric Meyer

3    global
4    header
5    content
6    footer

7    class

--------------------------------------------------------------------------------
1  LICENCE
--------------------------------------------------------------------------------

@author        Arnaud Tanielian for default
@date          2010
@license       MIT (http://opensource.org/licenses/mit-license.php)
@contact       arno.tanielian@gmail.com


/*------------------------------------------------------------------------------
2 RESET CSS BY ERIC MEYER meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded
------------------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, figure, footer, header, hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }



table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
 
body, select, input, textarea { color:#000; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; }
html { -webkit-font-smoothing: antialiased; }
a:hover, a:active { outline: none; }
ul { margin:0px; list-type:none;}
ol { margin:30px; list-style-type: decimal; }
small { font-size:85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align:top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }

input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 

a:link { -webkit-tap-highlight-color: #FF5E99; } 
a img { 
  border: none; 
} 

html { overflow-y: scroll; }
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; }


/*------------------------------------------------------------------------------
CLASS
------------------------------------------------------------------------------*/

/* Alpha */
	.hidden {display:none; visibility:hidden;}
	.visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
	.invisible { visibility: hidden; }
	.opacity-none {
		filter : alpha(opacity=0);
		-moz-opacity : 0;
		opacity : 0;
	}

/* Display */
	.inline{display:inline;}
	.block{display:block;}

/* Flux */
	.left{float:left;}
	.right{float:right;}
	.clear-right {clear:right;}
	.clear-right {clear:right;}
	.cleaner {clear:both;}
	.clearfix { display: inline-block; }
	* html .clearfix { height: 1%; }
	.clearfix { display: block; }
	.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Text */
	.bold {font-weight:bold;}
	.italic {font-style: italic;}
	.normal{font-weight:normal;}

	.red{color:#FF0000;}
	.green{color:#57ab26;}
	.blue{color:#1e98d1;}
	.orange{color:#ee7d09;}
	.purple{color:#65457a;}



/*------------------------------------------------------------------------------
3  GLOBAL
------------------------------------------------------------------------------*/

*
{
    margin:0;
    padding:0;
}

html{font-size: 100%;}
html.has-js {overflow:hidden;}

html.scroll {overflow-x:scroll;}
html.scroll-y {overflow-y:scroll;}

html.brown   {background:#764c24;}

body { 
	font-size: .8em; /*10px*/ 
	font-family:Verdana, Tahoma, Arial;
	line-height:1.22; 
	/*background-color:#FFF;*/
	/*background:#3cb959;*/
	/*background:url('../img/fond-degrade.jpg') repeat-x;*/
	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30b7ff', endColorstr='#FFFFFF') repeat-x;  /*for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#30b7ff), to(#FFF)) repeat-x; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #30b7ff,  #FFF) repeat-x; /* for firefox 3.6+ */
	
	
	*font-size:small; *font:x-small; 
	
	
}

div#wrapper
{	
	height:100%;
	width:4095px;
	
	color:#333333;
	
	background-image:url('../img/trame.png') ;
	background-position:0 0;
	background-repeat: repeat;
}


a img {border:none;}

@font-face { 
    font-family: 'Helvetica'; 
	
    src: url('fonts/helveticalt55roman-webfont.eot');
    src: url('fonts/helveticalt55roman-webfont.eot?iefix') format('eot'),
         url('fonts/helveticalt55roman-webfont.woff') format('woff'),
         url('fonts/helveticalt55roman-webfont.ttf') format('truetype'),
         url('fonts/helveticalt55roman-webfont.svg#webfont4EJMbzoP') format('svg');
		 
} 

/* Loading */


html.has-js #container, html.has-js header, #loader, html.has-js canvas#bg
{
	display:none;
}

html.has-js #loader
{
	display:block;
	
	background-image:url('../img/hello-chargement.png'),url('../img/background-prez.png'),url('../img/soleil.png') ;
	background-position:232px 125px, 0 0, 210px 0 ;
	background-repeat:no-repeat, no-repeat, no-repeat;
	
	width:700px;
	height:488px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-240px 0 0 -300px;
}

#loader p#description{
	margin: 40px 0 0 250px;
	font-family: "Helvetica", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, sans-serif;
	font-size:1.35em;
	width:270px;
	text-align:center;
	
}

#loader p#type-loading {
	margin:0 0 0 260px;
	width:250px;
	text-align:center;
	font-size:1.1em;
	font-weight:bold;
	font-family: "Helvetica", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, sans-serif; 
}

#loading
{
	margin: 270px 0 0 230px;
	padding:10px 12px;
	background:url('../img/loading.png') no-repeat;
	width:272px;
	height:43px;
}

#progress-bar
{
	background-color:#22a1db;
	width:0%;
	height:23px;
	text-indent:-5000px;
	opacity:0.5;
}

/*------------------------------------------------------------------------------
4  HEADER
------------------------------------------------------------------------------*/

header
{
	background:url('../img/fond_menu.png') no-repeat;
	width:347px;
	height:118px;
	position: fixed;
	top:0px;
	z-index:2;
}
header nav {
	position: absolute;
	z-index:2;
	left: 45px;
	top: 50px;
	font-family: Tahoma, "Trebuchet MS", Arial, sans-serif; 
	font-size:1.4em;
	
}
	
	header nav ul li 
	{
		display:inline;
		margin: 0;
		list-style: none;
	}
	
	header nav a {
		text-decoration:none;
		padding:5px 9px 4px 9px;
		border-bottom: 5px solid;
		color:#FFF;
		background:none;  
		
		-webkit-transition: background  200ms ease-in;  
		-moz-transition: background   200ms ease-in;  
		-o-transition: background   200ms ease-in;  
		transition: background  200ms ease-in; 
	}
	
	header nav a:focus{outline:none;}
	
	header nav a.home:hover {background:#0084ce;}
	header nav a.portfolio:hover {background:#b4e409;}
	header nav a.blog:hover {background:#b4e409;}
	header nav a.contact:hover {background:#ff4e0f;}
	
	header nav a.home {border-color:#0084ce;}
	header nav a.portfolio {border-color:#b4e409;}
	header nav a.blog {border-color:#b4e409;}
	header nav a.contact {border-color:#ff4e0f;}




/*------------------------------------------------------------------------------
5  CONTENT
------------------------------------------------------------------------------*/

canvas#bg{
	position:absolute; 
	left:0; 
	top:0; 
	/*
	width:4095px;
	height:800px;
	*/
	width: 100%;
}

a#cda-nominee
{
	display:block;
	position:fixed;
	right:0;
	top:40%;
	z-index:15;
}

a#awwward-nominee
{
	display:block;
	position:fixed;
	right:0;
	top:0;
	z-index:15;
}

#container
{
	position:relative;
	top:0;
	left:0;
	background-image:url('../img/soleil.png'),url('../img/xwing.png'),url('../img/etagere-licorne.png'),url('../img/hills_top.png'),url('../img/hills_bottom.jpg'),url('../img/marron-pixel.jpg');
	background-position:155px 155px, 2000px 0px, 3326px 10px, 0 387px, 0 718px, 0 1600px;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-x;
	font-family: "Helvetica", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, sans-serif; 
	
	-webkit-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -o-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

	-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

	#container section.page
	{
		z-index:1;
		position:relative;
		display:inline-block;
		height:932px;
		width:1130px;
		margin:0;
	}



	/* PAGE ACCUEIL
	------------------------------------------------------------------------------*/

	div#container-accueil
	{
		position:relative;
		left:50%;
		margin:0 0 0 -600px;
	}
	
	#presentation
	{
		position:absolute;
		left:0px;
		top:143px;
		background:url('../img/background-prez.png') no-repeat;
		width:552px;
		height:488px;
		
		-webkit-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-moz-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-o-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

		-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}
	
		#presentation p
		{
			margin: 10px 0 0 270px;
			padding: 0 25px 0 0;
			font-size:1.1em;
		}
		
		#twitter-link{
			text-decoration:none;
			color:#199fc2;
			font-weight:bold;
		}

		#prez-link-contact{
			text-decoration:none;
			color:#ff4e0f;
			font-weight:bold;
		}
		
		a#cv{
			background:url('../img/cv.png') no-repeat;
			width:35px;
			padding:50px 10px 0 15px;
			margin:10px 15px 0 270px;
			display:block;
			cursor:pointer;
			text-decoration:none;
			color:#000;
			font-weight:bold;
			float:left;
		}
		
		iframe#like-fb
		{
			float:left;
			
			display:block;
		}
		
		#presentation h2 {margin: 0 0 0 270px;font-size:1.2em;}
		#presentation h1 {margin: 120px 0 0 270px; font-size:1.7em;}

	section#home-projet
	{
		position:absolute;
		left:655px;
		top:109px;
		padding:0;
	}
	
	#home-projet section.home-projet
	{
		background:url('../img/bg_bloc_home.png') no-repeat;
		width:443px;
		height:196px;
		
		position:absolute;
		
		padding:50px 0 0 0;
		clear:left;
		
		-webkit-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-moz-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-o-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

		-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		-o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
		transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}
	/*
	#home-projet section.animate{
		-webkit-animation-name: rotatebox;
		-webkit-animation-duration:0.4s;
		-webkit-animation-iteration-count:1;
		-webkit-animation-timing-function:linear ;
	}
	
	@-webkit-keyframes rotatebox{
		0%{-webkit-transform:rotate(-12deg);-webkit-animation-timing-function: ease-out;}
		50%{-webkit-transform:rotate(8deg);-webkit-animation-timing-function: ease-in;}
		100%{-webkit-transform:rotate(0deg); }
	}
	*/
		
	
				
	#home-projet section.home-projet:first-child 
	{
		top:0px;
	}
	
	#home-projet section.home-projet:last-child 
	{
		top:280px;
	}
	
		#home-projet section.home-projet h3
		{
			position:relative;
			z-index:4;
			left:-20px;
			
			font-family: Tahoma, "Trebuchet MS", Arial, sans-serif; 
			
			background:#ffed00;
			padding:4px 6px; 
			text-transform: uppercase;
			width:296px;
			-moz-box-shadow: 2px 2px 2px #888;
			-webkit-box-shadow: 2px 2px 2px #888;
			box-shadow: 2px 2px 2px #888;
			
			-moz-transform: rotate(-02deg);
			-webkit-transform: rotate(-02deg);
			-o-transform: rotate(-02deg);
			-ms-transform:rotate(-02deg);

		}
		
		#home-projet section.home-projet:last-child  h3{background:#b4e409;}

		#home-projet section.home-projet figure
		{
			float:left;
			width:226px;
			height:155px;
			position:relative;
			z-index:3;
			overflow: hidden;
		}
		
			#home-projet > section.home-projet > figure > img.bg
			{
				position:absolute;
				z-index:2;
				pointer-events:none;
				cursor:pointer;

			}
			
				#home-projet section.home-projet figure>a
				{
					position:absolute;
					z-index:1;
					top:16px;
					left:14px;
					
					width:194px;
					height:128px;
					
					text-decoration:none;
					fond-weight:bold;
					font-size:1.3em;
					
					-webkit-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-moz-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-o-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

					-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
				}
				
				html.cssanimations #home-projet section.home-projet figure>a:hover
				{
					top:-112px;
				}
				
				.hover-miniature{top:-112px;}
				
				#home-projet section.home-projet figure>a img, #home-projet section.home-projet figure>a p
				{
					display:block;
				}
				
				#home-projet section.home-projet figure>a p
				{
					width:194px;
					height:128px;
					background :#ffed00;
					text-align:center;
					padding: 50px 0 0 0;
				}
				
				#home-projet section.home-projet:last-child figure>a p{background:#b4e409;}
				
		#home-projet section.home-projet article
		{
			float:left;
			width:174px;
			margin:10px 0 0 10px;
			height:155px;
		}
		
		#home-projet section.home-projet article p{margin:0 0 10px 0;}
		
	/* PAGE PORTFOLIO
	------------------------------------------------------------------------------*/
	
	section#page-portfolio{}
	
	div#gallery-all
	{
		position:absolute;
		top:217px;
		left:50%;
		margin:0 0 0 -430px;
	}
	
	section#page-portfolio a.nav
	{
		float:left;
		width:35px;
		height:32px;
		text-indent:-5000px;
	}
	
	section#page-portfolio a.nav:focus{
		outline: none;
	}

	section#page-portfolio a.prev {
		background:url('../img/fleche_gauche.png') no-repeat;
		left:54px;
		top:393px;
	}
	section#page-portfolio a.next {
		background:url('../img/fleche_droite.png') no-repeat;
		right:54px;
		top:393px;
	}
	
	div#gallery
	{
		float:left;
		width:755px;
		height:423px;
		position:relative;
		padding:0 0 0 20px;
	}
	
		div#gallery>ul
		{
			position:absolute;
			list-style:none;
			margin:0;
		}
		
		div#gallery>ul>li 
		{
			position:absolute;
			display: block;
			height: 155px;
			width: 226px;
		}
		
		
		div#gallery>ul>li> figure
		{
			width:226px;
			height:155px;

			position:relative;
			z-index:3;
			overflow: hidden;
		}
		
		
			div#gallery>ul>li> figure>img.bg
			{
				position:absolute;
				z-index:2;
				pointer-events:none;

			}
			
				div#gallery>ul>li>figure>a.toggle-image
				{
					position:absolute;
					z-index:1;
					top:16px;
					left:14px;
					
					width:194px;
					height:128px;
					
					text-decoration:none;
					fond-weight:bold;
					font-size:1.3em;
					
					-webkit-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-moz-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-o-transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					transition: all 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

					-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					-o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
					transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
				}
				
				div#gallery>ul>li> figure>a.toggle-image:hover
				{
					top:-112px;
				}
				
				div#gallery>ul>li> figure>a.toggle-image img, div #gallery>ul>li> figure>a.toggle-image h3
				{
					display:block;
				}
				
				div#gallery>ul>li> figure>a.toggle-image h3
				{
					width:194px;
					height:128px;
					background :#e5e5e5;
					color:#000;
					text-align:center;
					padding: 40px 0 30px 0;
				}
				
	
	/* PAGE PROJET
	------------------------------------------------------------------------------*/
	
	div#loading-projet
	{
		width:100%;
		height:100%;
		position:absolute;
		left:50%;
		top:50%;
		z-index:10;
		margin:-50px 0 0 -50px;
	}
	
	html.has-js section#projet{
		width:1079px;
		margin:0 0 0 -540px;
		position:absolute;
		top: 1000px;
		left:50%;
	}
	
	a#btn-back{
		position:absolute;
		display:block;
		top:155px;
		left:50px;
		z-index:1;
		background-color:#ff4e0f;
		color:#FFF;
		width:135px;
		height:55px;
		padding:4px 0 0 10px;
		
		-webkit-transition: top  200ms ease-in;  
		-moz-transition: top   200ms ease-in;  
		-o-transition: top   200ms ease-in;  
		transition: top  200ms ease-in; 
		
		text-decoration:none;
		font-size:1.1em;
	}
	
	a#btn-back:hover{
		top:140px;
	}
	
	section#projet article {
		position:absolute;
		z-index:2;
		top:202px;
		left:30px;
		background-color:#FFF;
		color:#000;
		padding:55px 20px 40px 20px;
		width:385px;
		height:400px;
		font-size:1.2em;
	}
	
	section#projet article p{margin:0 0 10px 0;	}	
	section#projet article ul{list-style: disc; margin: 0 0 10px 40px;}
	section#projet article ul > li {}
	#visit-site{
		background:url('../img/matte-le-projet.png') no-repeat;
		width:189px;
		height:44px;
		text-decoration:none;
		display:block;
		padding:15px 0 0 8px;
		text-align:center;
		margin:0 0 5px 0;
		color:#000;
		font-size:1em;
		font-weight:bold;
		position:absolute;
		bottom:0;
		right:15px;
	
		-webkit-transition: color  100ms ease-in;  
		-moz-transition: color   100ms ease-in;  
		-o-transition: color   100ms ease-in;  
		transition: color  100ms ease-in; 
	}
	
	#visit-site:hover{color:#b18559;}
	
		section#projet article  h1{
			position:absolute;
			z-index:3;
			width:340px;
			background-color:#b4e409;
			color:#000;
			font-family: Tahoma, "Trebuchet MS", Arial, sans-serif; 
			min-width:385px;
			
			font-size:1.05em;
			
			left:-20px;
			top:-20px;
			
			padding:15px 30px; 
			text-transform: uppercase;
			
			-moz-box-shadow: 2px 2px 2px #888;
			-webkit-box-shadow: 2px 2px 2px #888;
			box-shadow: 2px 2px 2px #888;
			
			-moz-transform: rotate(-02deg);
			-webkit-transform: rotate(-02deg);
			-o-transform: rotate(-02deg);
			-ms-transform:rotate(-02deg);
		}
	
	div#slideshow
	{
		background:url('../img/background-slideshow.png') no-repeat;
		height:536px;
		width:537px;
		position:absolute;
		top:86px;
		left:460px;
	}
	
	div#slideshow > p#annee{
		position:absolute;
		left:20px;
		top:450px;
		z-index:3;
		font-size:1em;
	}
	
	div#slideshow > p#keywords
	{
		position:absolute;
		left:20px;
		top:470px;
		z-index:3;
		font-size:1em;
	}
	
	div#slideshow ul
	{
		list-type:none;
		position:absolute;
		top:70px;
		left:20px;
		width:491px;
		height:372px;
		overflow:hidden;
		z-index:2;
	}
	
	div#slideshow ul li
	{
		position:absolute;
	}
	
	img#cloud-slideshow
	{
		position:absolute;
		left:300px;
		top:340px;
		z-index:3;
	}
	
	/* PAGE CONTACT
	------------------------------------------------------------------------------*/
	
	div#container-contact
	{
		position:relative;
		left:50%;
		margin:0 0 0 -475px;
	}
	
		section #about-me
		{
			width:459px;
			height:377px;
			background:url('../img/background-contact.png')no-repeat;
			top:250px;
			position:absolute;
			padding:30px 30px;
		}
		
		section #about-me h1
		{
			margin:5px 0 20px 0;
			font-size:1.3em;
		}
		
		section #about-me p
		{
			margin:0 0 10px 0;
			font-size:1.1em;
		}
		
		
		
		section #friends
		{
			width:371px;
			height:523px;
			background:url('../img/bg-contact-link.png')no-repeat;
			top:135px;
			left:600px;
			position:absolute;
			padding:25px 30px;
		}
		
		section #friends > ul {list-style:none;}
		section #friends ul > li {margin:7px 0;}
		section #friends ul > li > ul {margin:0 0 0 20px;}
		section #friends ul > li > ul > li {margin:3px 0;}
		
		section #friends h3
		{
			font-size:1.2em;
			margin:10px 0;
			
		}
		
		section #friends a
		{
			color:#000;
			text-decoration:none;
			border-bottom:1px dashed #000;
			display:inline-block;
		}
		
	a#mailto-contact
	{
		text-decoration:none;
		color:#ff4e0f;
		font-weight:bold;
	}
	
	#about-me > aside h2 {font-weight:bold; font-size:1.2em;}
	
	#about-me > aside#external-link
	{
		position:absolute;
		top:295px;
		left:30px;
	}
	#about-me > aside#external-link > ul{list-style:none;}
	#about-me > aside#external-link > ul > li 
	{
		float:left; 
		margin:10px 20px 0 0;
	}
	
	#about-me aside
	{
		position:absolute;
		top:295px;
		left:250px;
	}
	
	#about-me > aside#awards > ul{list-style:none;}
	#about-me > aside#awards > ul > li 
	{
		float:left; 
		margin:10px 20px 0 0;
	}
		
/*------------------------------------------------------------------------------
6  FOOTER
------------------------------------------------------------------------------*/

footer {
	clear:both;
	position:fixed;
	z-index:2;
	bottom:0px;
	left:0px;
	height: 153px;
	width:4094px;
	background-image:url('../img/parquet.png') ;
	pointer-events:none;
	
	-webkit-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -o-transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transition: all 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

	-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
    transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
}