html {font-size: 62.5%;}

body {
	color:#777;
	margin: 50px 0 0 0;
	padding: 0;
	background-color: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 16px;
	line-height: 1.6rem	;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
}

li {list-style: none; margin:0; padding: 0;}
a {text-decoration: none;}
tr {vertical-align: top;} /* script scroll : vertical > horizontal */




#white-screen {
	opacity: 1;
	-webkit-animation: appear 1s ease;
	-moz-animation: appear 1s ease;
	-o-animation: appear 1s ease;
	-ms-animation: appear 1s ease;
}

#white-screen.n-about {
	opacity: 1;
	-webkit-animation: appear 3s ease;
	-moz-animation: appear 3s ease;
	-o-animation: appear 3s ease;
	-ms-animation: appear 3s ease;
}

@-webkit-keyframes appear {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}

@-moz-keyframes appear {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}

@-o-keyframes appear {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}

@-ms-keyframes appear {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}


/********************************\ PAGE INTRO /********************************/


#container.index {
	position: absolute;
	top:0;
	background: url(../img/bg-index.jpg) no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height: 100%;
	z-index: 2000;
}


#container-intro {
	position: absolute;
	width: 898px;
	height: 200px;
	top:60%;
	left:50%;
	margin-top: -100px;
	margin-left: -449px;
	z-index: 2000;
}


.intro {
	text-align: center;
	color:#fff;
	padding:0;
	margin: 1px 0px 0px 0px;  
	text-transform: uppercase; 
	font-family: "Helvetica-Neue-Medium",Helvetica,Arial,Sans-serif;
}

p.i-nom {
	display: block;
	text-align: center; 
	font-size: 30px;
	font-size: 3rem;
	line-height: 26px;
	padding-left: 30px; 
	letter-spacing: 40px;
}

p.i-what {
	display: block;
	font-size: 20px;
	font-size: 2rem;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	line-height: 38px;
	letter-spacing: 5px;
	-webkit-font-smoothing: antialiased;
}

p.i-where {
	display: block;
	font-size: 12px;
	font-size: 1.2rem;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	line-height: 40px;
	letter-spacing: 3px;
	margin: 2px 0px 23px 0px;
}


#container-intro a {
	position: absolute;
	left: 50%;
	margin-left: -47px;
	font-size: 11px;
	font-size: 1.1rem;
	letter-spacing: 3px;
	text-align: center;
	width: 89px;
	height: 32px;
	line-height: 34px;
	padding-left: 3px;
	background-color: rgba(255,255,255,0.2);
	color:#fff;
	font-family: "ProximaNova-Bold",Helvetica,Arial,Sans-serif;
	border: 1px solid #fff;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;

	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
}

#container-intro a:hover {
	background-color: rgba(255,255,255,1);
	color:#666;
}

#black-screen {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	-webkit-transition: all .6s ease-out;
	-moz-transition: all .6s ease-out;
	-o-transition: all .6s ease-out;
	transition: all .6s ease-out;
	background-color: rgba(0,0,0,0);
}

#container-intro:hover ~ #black-screen {
	background-color: rgba(0,0,0,0.4);
}

#p404:hover ~ #black-screen {
	background-color: rgba(0,0,0,0.4);
}



/********************************\ HEADER /********************************/

#header {
	position: fixed;
	top:0;
	height: 16.7%;
	width: 100%;
	overflow: hidden;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	font-size: 1.2rem;
	letter-spacing: 3px;
	background-color: #fff;
	z-index: 8000;
}

#header ul {
	position: absolute;
	height: 48px; 
	width: 100%; 
	margin: 0;
	padding: 0;
	top: 32.5%;
	margin-left: 248px;
	z-index: 9000;
	

}

#header li {
	text-align: center;
	display: inline-block; 
	height: 48px; 
	list-style: none; 
	float: left; 
	margin-right: 30px;
}

li.about {width: 85px;}
li.work {width: 100px; padding-right: 22px; margin: 0px 0px 0px 25px; }
li.contact {width: 80px; margin-left: 5px;}
li.credits {margin-left: 25px;}

#header li.x {
	margin-top: 16px;
	width: 10px;
	height: 16px;
	margin-left: 6px;
	background: url(../img/sprite.png) center no-repeat;
	background-position: -45px 0px;
}

#header li:last-child  {margin-right: 0;}


#header a {
	display: inline-block;
	text-transform: uppercase; 
	margin: 12px 0px 0px 0px;
	height: 25px; 
	line-height: 23px; 
	text-align: center;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	color: #888;
/*	background-color: red;*/
}

#header a.anim {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	word-spacing: 5px;
}

#header a:hover {color: #bbb;} 
#header a.current {color: #888; border-bottom: 1px solid #dadada; }
#header a#about, #header a#contact {padding-left: 3px;}


/* logo */
#header li.logo {position: relative; margin: 4px 0px 0px -200px;}

#header ul li a#logo {
	display: inline-block;
	text-indent: -9999px; 
	background: url(../img/sprite.png) center no-repeat;
	background-position: 0px 0px;
	margin: 7px 0px 0px 35px;
	width: 22px;
	z-index: 4000;
	}
	
#header ul li a#logo:hover {
	background: url(../img/sprite.png) center no-repeat;
	background-position: -22px 0px;

} 




/********************************\ CONTACT /********************************/

#slidingContact {
	display: none;
	position: fixed;
	top: 0;
	padding-top: 0px;
	background-color: rgba(255,255,255,1);
	height: 100%; 
	width: 100%;
	z-index: 7000;
	padding-top: 100px;

}


#slidingContact.p-top {
	display: none;
	position: fixed;
	padding-top: 0px;
	background-color: rgba(255,255,255,1);
	width: 100%;
	z-index: 7000;
}

		#contact-info {
			display: block;
			float: left;
			width: 403px;
			margin-left: 271px;
		}

			 p.c-intro {
				width: 340px;
				font-size: 20px;
				font-size: 2rem;
				font-weight: bold;
				font-family: "Helvetica-Neue-Thin",Helvetica,Arial,Sans-serif;
				-webkit-font-smoothing: antialiased;
				line-height: 40px;
				letter-spacing: 5px;
				margin-top: 78px;
				color: #555;
			}

 			p.phrase {
 				max-width: 300px;
 				padding-top: 2px;
 			} 
 

			 section.col {
			 	-webkit-font-smoothing: antialiased;
			 	position: relative;
			 	margin-top: 128px; 
			 	width: 228px; 
			 }

		 		a.mail {color: #444; font-family: "Helvetica-Neue-Medium",Helvetica,Arial,Sans-serif; }
				a.info {font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif; display: block; color: #777; }
				a:hover {color:#333;}


#slidingContact:target {display: block;} 




	/********************** FORMULAIRE **********************/

			fieldset {border: none; margin:0; padding: 0;}

/* *************** FORM BIS *************** */

#formulaire {
		padding-top: 84px; 
		padding-left: 46px;
		width: 549px;
		float: left;
	}



p.p-form {margin: 0 0 10px 0; }

.get-info {
		background: transparent;
		border: 1px solid #b1b1b1;
		padding: 5px 0px 0px 20px;
		outline: none;
		margin-bottom: 21px;
		width: 426px; 
		height: 26px;
		cursor: pointer;
		font-size: 13px;
		font-size: 1.3rem;
		line-height: 24px;
		line-height: 2.4rem	;
		font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
		font-weight: 100;
		word-spacing: 1px;
		color: #777;
}

.get-info:hover {background-color: #fafafa;}


textarea.get-info {
	resize:none;
	width: 426px;
	height: 148px;
	cursor: pointer;
	margin: 0;
}

input.valid {
	margin: 15px 0px 0px 402px;
	background: transparent;
	color: #777;
	border: 1px solid #b1b1b1;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 24px;
	line-height: 2.4rem;
	padding: 5px 8px 0px 8px;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	font-weight: 100;
	cursor: pointer;
}

input.valid:hover {background-color: #cacaca; color:#fff; }


/********************************\ SIDEBAR PROJECTS /********************************/

#sidebar {
	position: fixed;
	height: 100%;
	top:0;
	left: 0;
	background-color: rgba(255,255,255,1);
	/*background-color: yellow;*/
	width: 272px;
	z-index: 6000;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}


/********************************\ CONTENT /********************************/


#container {
	position: absolute;
	top:16.7%;
	height: 70%;
	width: 100%;
	z-index: 0;
}

			/********************************\ SIDEBAR /********************************/

			ul#top {
				margin: 0px 0 0 42px; /* c'etait à -14px avant les vacs */
				position: fixed;
				z-index: 7000;
		
			}

			ul#top li {
				margin:0; 
				padding: 0px 0px 0px;
			}

			ul#top li a {
				font-family: "Helvetica-Neue-LTStd-Lt";
				font-size: 12px;
				font-size: 1.2rem;
				line-height: 24px;
				line-height: 2.4rem;
				color:#888;
				-webkit-transition: all 0.3s ease-out;
				-moz-transition: all 0.3s ease-out;
				-o-transition: all 0.3s ease-out;
				transition: all 0.3s ease-out;
			}

			ul#top li a:hover {color:#bbb; }
			ul#top li a.current-s {text-decoration: underline;}

			/********************************\ INFOS  /********************************/

				span.open {
					position: absolute; 
					margin: 0px 0px 0px 30px;
					width: 26px;
					height: 26px;
					font-family: "Helvetica-Neue-Medium";
					font-size: 15px;
					color: #fff;
					background-color: rgba(255,255,255,0.4);
					text-align: center;
					line-height: 28px;
					-webkit-transition: all .3s ease-in-out;
					-moz-transition: all .3s ease-in-out;
					-o-transition: all .3s ease-in-out;
					transition: all .3s ease-in-out;
					cursor: pointer;
					z-index: 3000;
					}

					span.open-dark {
					position: absolute;
					margin: 0px 0px 0px 30px;
					width: 26px;
					height: 26px;
					font-family: "Helvetica-Neue-Medium";
					font-size: 15px;
					color: #fff;
					background-color: rgba(0,0,0,0.3);
					text-align: center;
					line-height: 28px;
					-webkit-transition: all .3s ease-in-out;
					-moz-transition: all .3s ease-in-out;
					-o-transition: all .3s ease-in-out;
					transition: all .3s ease-in-out;
					cursor: pointer;
					z-index: 3000;
					}

	
				span.open:hover {background-color: rgba(0,0,0,0.4); }
				span.open-dark:hover {background-color: rgba(0,0,0,0.7); }

				span.close {
					  position: absolute;
					  margin: -8px 0 0 12px;
					  width: 32px;
					  height: 32px;
					  right: 0%;
					  margin-right: 16px;
					  opacity: 0.8;
					  background: url(../img/croix.png) no-repeat center center;
					  background-size: 16px;
					  
					  -webkit-transform: rotate(0deg);
					  -moz-transform: rotate(0deg);
					  -o-transform: rotate(0deg);
					  -ms-transform: rotate(0deg);
					  transform: rotate(0deg);
					  
					  -webkit-transition: all .5s ease;
					  -moz-transition: all .5s ease;
					  -o-transition: all .5s ease;
					  -ms-transition: all .5s ease;
					  transition: all .5s ease;
				}


				.close:hover {
					opacity: 0.2;
				  	-webkit-transform: rotate(180deg);
				  	-moz-transform: rotate(180deg);
				  	-o-transform: rotate(180deg);
				  	-ms-transform: rotate(180deg);
				  	transform: rotate(180deg);
				  	cursor: pointer;
				}

			
				span.close-m {
					  position: absolute;
					  display: none;
					  margin: 0 0 0 12px;
					  width: 32px;
					  height: 32px;
					  right: 0%;
					  margin-right: 16px;
					  opacity: 0.8;
					  background: url(../img/croix.png) no-repeat center center;
					  background-size: 16px;
					  
					  -webkit-transform: rotate(0deg);
					  -moz-transform: rotate(0deg);
					  -o-transform: rotate(0deg);
					  -ms-transform: rotate(0deg);
					  transform: rotate(0deg);
					  
					  -webkit-transition: all .5s ease;
					  -moz-transition: all .5s ease;
					  -o-transition: all .5s ease;
					  -ms-transition: all .5s ease;
					  transition: all .5s ease;
				}


/********************************\ COMMUN AU DIFFERENT PROJET /********************************/


.com {
	position: fixed;
	display: none;
	width: 206px;
	height: 100%;
	padding: 0 62px 0 30px;
	/*margin-left: -42px; */
	margin-left: 0px; 
	background-color: #fff;
	/*color:#999;*/
	font-family: "Helvetica-Neue-LTStd-Lt";
	z-index: 5000;
	-webkit-font-smoothing:subpixel-antialiased;
	word-spacing: 1px;
	font-weight: 400;
	-webkit-animation: op .6s linear;
	-moz-animation: op .6s linear;
	-ms-animation: op .6s linear;
	-o-animation: op .6s linear;
}

@-webkit-keyframes op {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}

@-moz-keyframes op {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}

@-o-keyframes op {
    0% {opacity: 0;}
    100% {opacity: 1;} 
}




.com-two {
	position: fixed;
	display: none;
	width: 400px;
	height: 100%;
	padding: 0 62px 0 42px;
	margin-left: -12px; 
	background-color: #fff;
	color:#999;
	font-family: "Helvetica-Neue-LTStd-Lt";
	z-index: 5000;
	-webkit-font-smoothing:subpixel-antialiased;
	word-spacing: 1px;
	font-weight: 400;
	-webkit-animation: op .6s linear;
	-moz-animation: op .6s linear;
	-ms-animation: op .6s linear;
	-o-animation: op .6s linear;

}




div.com p {
	max-width: 400px;
}

/* TITRE */
h2.titre {
	color:#666;
	padding: 1px 0px 5px 0px; 
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0px 0px 0px 0px;  
	letter-spacing: 2px;
	text-transform: uppercase; 
	font-family: "Helvetica-Neue-Roman";
	-webkit-font-smoothing:antialiased
}

/* SOUS-TITRE */
h3.sous-titre {
	padding:0; 
	font-size: 12px;
	font-size: 1.2rem;
	margin: 0px 0 17px 0; 
	text-transform: uppercase; 
	font-family: "Helvetica-Neue-Roman";
}

/* PARAGRAPHES */

p {
	font-size: 13px;
	font-size: 1.3rem;
	font-family: "Helvetica-Neue-LTStd-Lt";
}


.com p {margin: 0 0 16px 0; padding: 0; }
p.last-p {margin-bottom: 24px;}


/* SOUS-TITRE */
.a-p {color: #555;}
a.a-p:hover {border-bottom: 1px #666 dotted;}
a.a-underline {color: #555; border-bottom: 1px #666 dotted;}

span.mot-cle {
	margin: 0;
	font-family: "Helvetica-Neue-LTStd-Lt";
	font-size: 13px;
	font-size: 1.3rem;
	font-style: italic;
	color:#bbb;
}

strong {font-weight: normal;}

.container-img {
	position: relative;
	white-space: nowrap; 
	display: inline-block;
	margin-left: 30px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;

	height: 100%;
}

.last-img {margin-right: 5px;}

/* hide top/next/prev : only on smartphone */
ul.n-projects {display: none;}

/********************************\ PROJETS /********************************/



.projet {
	position: absolute;
	top: 0%;
	padding: 0px 0px 0px 242px; 
	height: 100%;
}

/* hide basicly index of projects : only appear when smartphone */
#contenu-index {
	display:none;
}

/* hide basicly pics of index for smartphone */
img.img-m {
	display: none;
}



img {
	opacity: 0.7;
	max-height: 100%; 
	/*max-width: 100%;*/ /* 80% */
	margin-right: 2px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}

img:hover {opacity: 1;}



/********************************\ ABOUT /********************************/

body.about {
	background: url(../img/bg-about.jpg) no-repeat fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
	height:100%;
}

.vid_bg {
	position: fixed;
	top: 0;
	left:0;
	z-index: 100;
	margin-left: -1px;
	min-width: 101%;
	min-height: 101%;
	width: auto;
	height: auto;
}


#mini-container {
	position: absolute;
	z-index: 3000;
	margin: 0 auto;
	top:50%;
	margin-top: -190px;
	width: 1700px; 
	height: 400px;
	opacity: 1;
	-webkit-animation: opa 3s ease-in-out;
	-moz-animation: opa 3s ease-in-out;
	-o-animation: opa 3s ease-in-out;
	-ms-animation: opa 3s ease-in-out;
	animation: opa 3s ease-in-out;
}

@-webkit-keyframes opa {
    0% {opacity: 0}
    100% {opacity: 1} 
}

@-moz-keyframes opa {
    0% {opacity: 0}
    100% {opacity: 1} 
}

@-o-keyframes opa {
    0% {opacity: 0}
    100% {opacity: 1} 
}

-keyframes opa {
    0% {opacity: 0}
    100% {opacity: 1} 
}


blockquote {
	margin: 12px 0px 0px 269px;
	font-family: "Helvetica-Neue-Thin",Helvetica,Arial,Sans-serif;
	font-size:4.3rem;
	line-height: 40px;
	line-height: 4rem;
	text-transform: uppercase;
	color: #444;
	width: 364px;
	float: left;
}


a.autor {
	display: block;
	font-size: 1.4rem;
	color: #fff;
	letter-spacing: 4px;
	padding-left: 1px;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
}


.colonne {
	position: relative;
	width: 228px;
	float: left;
	margin-left: 80px;
	padding-top: 4px;
}

#col-trois {width: 270px;}

.colonne p {
	font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
	margin-top: 16px;
	color: #444;
}

.colonne h3 {
	font-family: "Helvetica-Neue-Thin",Helvetica,Arial,Sans-serif;
	-webkit-font-smoothing: antialiased;
	line-height: 16px;
	letter-spacing: 2px;
	margin: 0px;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 18px;
	text-transform: uppercase;
}

.colonne ul {margin:0; padding: 0; float:left; width: 133px;}

.colonne ul li {font-style: italic; color:#444; font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;}



/********************************\ CREDITS /********************************/


ul.ul-credit {
	width: 135px;
	float:left;
	margin: -2px 0px 0px 54px;
	padding: 0px 0px 0px 0px;
}

ul.ul-credit li.li-title {
	color: #333;
	font-style:normal;
}

ul.ul-credit li{
	padding-top: 8px;
	color: #888;
}

ul.ul-credit li a{color: #888;}
ul.ul-credit li a.prof {color: #888; font-style: italic;}
ul.ul-credit li a:hover{color: #333;}


li.li-first {margin-top: 24px;}



/********************************\ DESIGN PROCESS /********************************/

#container.dp {width: 2000px; background-color: #fff;}

blockquote.b-dp {margin-left: 82px;}

#container.dp blockquote.b-dp a.autor {color: #999; margin-top:-2px;}



/********************************\ 404 /********************************/


body.lost {
	height: 100%;
	width: 100%;
	background: url(../img/bg-404.jpg) no-repeat fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


#p404 {
	position: relative;
	z-index: 2000;
	color: #fff;
	display: block;
	background: transparent;
}

.uppercase {
	text-transform: uppercase;
		-webkit-font-smoothing:antialiased;
		text-shadow: 0.1em 0.1em 0.8em #333;
}

p.p404-title {
	margin-top: 16.9%;
	color: #fff;
	display: block;
	text-align: center; 
	font-size: 26px;
	font-size: 2.6rem;
	line-height: 26px;
	padding: 50px 0px 0px 0px; 
	letter-spacing: 32px;
	font-family: "Helvetica-Neue-Medium",Helvetica,Arial,Sans-serif;
}

p.p404-s-title {
	color: #fff;
	display: block;
	text-align: center; 
	font-size: 20px;
	font-size: 2rem;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	line-height: 38px;
	letter-spacing: 5px;
	padding: 0px 0px 50px 0px;
}


#sitemap {
	margin-top: 0%;
	display: block;
	text-align: center;padding-bottom: 100px;
}

#sitemap p {
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	letter-spacing: 3px;
}

#p404 a {
	margin: 0px 5px;
	padding: 8px 4px 8px 8px;
	font-size: 11px;
	font-size: 1.1rem;
	letter-spacing: 3px;
	text-align: center;
	height: 32px;
	line-height: 34px;
	background-color: rgba(255,255,255,.2);
	color:#fff;
	font-family: "ProximaNova-Bold",Helvetica,Arial,Sans-serif;
	border: 1px solid #fff;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
}

#p404 a:hover {
	background-color: rgba(255,255,255,1);
	color:#444;
}








/********************************\ FONTS /********************************/

@font-face {
				font-family: 'ProximaNova-Bold';
				src: url('../fonts/fontface-proximanova/proximanovabold.eot');
				src: url('../fonts/fontface-proximanova/proximanovabold.eot?#iefix') format('embedded-opentype'),
						 url('../fonts/fontface-proximanova/proximanovabold.woff') format('woff'),
						 url('../fonts/fontface-proximanova/proximanovabold.ttf') format('truetype'),
						 url('../fonts/fontface-proximanova/proximanovabold.svg#proximanovabold') format('svg');
				font-weight: normal;
				font-style: normal;
}


@font-face {
				font-family: 'Helvetica-Neue-Medium';
				src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdmd.eot');
				src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdmd.eot?#iefix') format('embedded-opentype'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdmd.woff') format('woff'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdmd.ttf') format('truetype'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdmd.svg#helveticaneueltstdmd') format('svg');
				font-weight: normal;
				font-style: normal;
}


@font-face {
				font-family: 'Helvetica-Neue-Roman';
				src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdroman.eot');
				src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdroman.eot?#iefix') format('embedded-opentype'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdroman.woff') format('woff'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdroman.ttf') format('truetype'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdroman.svg#helveticaneueltstdroman') format('svg');
				font-weight: normal;
				font-style: normal;

}

@font-face {
				font-family: 'Helvetica-Neue-Thin';
				src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdth.eot');
				src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdth.eot?#iefix') format('embedded-opentype'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdth.woff') format('woff'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdth.ttf') format('truetype'),
							url('../fonts/fontface-helvetica-neue/helveticaneueltstdth.svg#helveticaneueltstdth') format('svg');
				font-weight: normal;
				font-style: normal;
}

@font-face {
						font-family: 'Helvetica-Neue-LTStd-Lt';
						src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdlt.eot');
						src: url('../fonts/fontface-helvetica-neue/helveticaneueltstdlt.eot?#iefix') format('embedded-opentype'),
								 url('../fonts/fontface-helvetica-neue/helveticaneueltstdlt.woff') format('woff'),
								 url('../fonts/fontface-helvetica-neue/helveticaneueltstdlt.ttf') format('truetype'),
								 url('../fonts/fontface-helvetica-neue/helveticaneueltstdlt.svg#helveticaneueltstdlt') format('svg');
						font-weight: normal;
						font-style: normal;
}



::-moz-selection {background: #ff0000; color:#fff; } 
::selection {background:#ff0000; color:#fff; }



/********************* MEDIAQUERIES ********************/


/************************************************  1024 x 764 : IPAD  ************************************************/

@media screen and (max-height: 727px) {


	/************ COMMENTS-INFO ************/

		.com {width: 300px;}
		img {opacity: 1}

		.com-two { width: 450px;}


	/************ ABOUT ************/

		video {display: none}
		blockquote {margin: 12px 0px 0px 82px;}



	/************ FORM CONTACT ************/

		#contact-info {width: 380px; margin-left: 84px; /*background-color: red;*/ }
		section.col {margin-top: 50px; } /*infos contact*/
		#formulaire {width: 432px;/* background-color: blue;*/} 
		.get-info {width: 410px;} /*input*/
		textarea.get-info {width: 410px; height: 180px; padding-top: 15px; /*background-color: blue;*/}
		input.valid {margin: 15px 0px 0px 386px;}

	/********************************\ PAGE CREDITS /********************************/

		ul.ul-credit.c-left {padding-left: 28px;}

} /* fin mediaqueries */



/************************************************  650 PX  ************************************************/

@media screen and (max-height: 650px) {


	/************ PAGE ABOUT ************/

		blockquote {
		font-size: 38px;
		font-size: 3.8rem;
		line-height: 38px;
		line-height: 3.8rem;
		}

	/************ FORM CONTACT ************/

		#slidingContact {padding-top: 25px;}

} /* fin mediaqueries */ 




/************************************************  1024 x 600 : NETBOOK  ************************************************/

@media screen and (max-height: 600px) {


	/************ PAGE ABOUT ************/

		blockquote {	
			padding-top: 70px;
			font-size: 30px;
			font-size: 3rem;
			line-height: 36px;
			line-height: 3.6rem;
		}

	/************ FORM CONTACT ************/

		#contact-info {width: 380px; margin-left: 84px;}
		#slidingContact {padding-top: 25px;}
		#mini-container {width: 1800px;}
		.colonne {width: 360px; padding-top: 84px; }
		#col-trois {width: 270px;}

		textarea.get-info {width: 410px; height:100px; padding-top: 15px;}

		p.c-intro {font-size: 18px;font-size: 1.8rem; line-height: 35px; line-height: 3.5rem;}
		section.col {margin-top: 0px; }

	/* INFOS PROJETS */

		.com {
			width: 580px;
}

		.com-two {
			width: 700px;
}



.com p {min-width: 600px;}
.com-two p {min-width: 680px;}


} /* fin mediaqueries */ 




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

	#contact-info {width: 380px; margin-left: 84px;  }

	#formulaire {width: 455px; }
} 


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

	#contact-info {width: 275px;}
	#formulaire {width: 402px; padding-left: 0px; margin-left: 110px; }


.get-info {
		padding: 5px 0px 0px 20px;
		margin-bottom: 21px;
		width: 380px; 

}

	textarea.get-info {width: 380px; } }
	input.valid {

	margin: 15px 0px 0px 355px;
	padding: 5px 8px 0px 8px;
	}

/* fin mediaqueries */ 





/************************************************  764 x 1024 : IPAD VERTICAL ************************************************/


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


	/************ INTRO ************/

		#container-intro {
			width: 764px;
			margin-left: -382px;
			height: 300px;
			top:65%;
			margin-top: -200px;
			background:  url(../img/logo-ipad.png) center 1px no-repeat;
			background-size: 150px;
			z-index: 5000;
			padding-top: 200px;
		}

		p.i-nom {
			font-size: 22px;
			font-size: 2.2rem;
			line-height: 26px;
			letter-spacing: 36px;	
		}

		p.i-what {font-size: 18px; font-size: 1.8rem; }


	/************ MENU ************/

		#header ul {
			margin-left: 59px; 
			z-index: 3000;
		}

		#header ul li a#logo {
			position: relative;
			background: blue url(../img/sprite.png) center no-repeat;
			background-position: 0px 0px;
			z-index: 9000;
		}

		#header li.logo {
			display: none;
			position: absolute; 
			width: 100px;
			height: 100px;
			margin-top: 50px;
			margin-left: -50px;
			top:50%;
			left:50%;
			z-index: 9000;
		}



	/************ FORM CONTACT ************/

		#contact-info {width: 600px; margin-left: 84px;}
		#slidingContact {overflow: scroll;}
		p.c-intro {width: 595px; }
 		p.phrase {max-width: 300px; padding-top: 2px;}
 		section.col {position:absolute; margin-top: -78px; right:84px; text-align: right;} /*infos contact*/

		#formulaire {
			width: 600px; margin: 60px 0px 0px 84px; padding: 0;} 
		.get-info {width: 580px;} /*input*/
		textarea.get-info {width: 580px; height: 200px;}
		input.valid {margin: 15px 0px 0px 555px;}


	/************ PAGE ABOUT ************/

		video {display: none}
		blockquote {margin: 12px 0px 0px 86px;}

	/************ PAGE DESIGN PROCESS ************/

		blockquote.b-dp {margin-left: 85px;}

} /* fin mediaqueries */ 


/************************************************  320 x 480 : "IPHONE" (FENETRE MINIMUM CHROME)  ************************************************/


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



/************ INTRO ************/

			#container-intro {
				width: 320px;
				margin-left: -160px;
				height: 300px;
				top:65%;
				margin-top: -200px;
				background: url(../img/logo-ipad.png) center 1px no-repeat;
				background-size: 50px;
				z-index: 5000;
				padding-top: 100px;
			}

			p.i-nom {
				font-size: 16px;
				font-size: 1.6rem;
				line-height: 20px;
				letter-spacing: 16px;
				display: none;	
			}

			p.i-what {font-size: 12px; font-size: 1.2rem; line-height: 20px; }


	/************ MENU ************/

			#header {
				height:64px;
				position: fixed;
				-moz-box-shadow: 0px 0px 8px -2px #c1c1c1;
				-webkit-box-shadow: 0px 0px 8px -2px #c1c1c1;
				-o-box-shadow: 0px 0px 8px -2px #c1c1c1;
				box-shadow: 0px 0px 8px -2px #c1c1c1;
			}

			#blanc {
				width: auto;
				height: 300px;
			}

			#header ul {
				position: relative;
				margin-left: -160px; 
				z-index: 3000;
				width: 320px;
				left:50%;
				height: 64px;
				margin-top: -21px;
			}


			#header li {
				height: 64px;
				text-align: center;
				display: inline-block; 
				list-style: none; 
				float: left; 
				margin-right: 1px;
			}

			li.about {width: 50px; margin-left: 5px; padding-left: 5px;}
			li.work {width: 84px; margin: 0px 0px 0px 13px; }
			li.contact {width: 70px; margin-left: -17px;}
			li.credits {width: 72px; margin-left: 0px;}

			#header li.x {
				display: none;
				margin-top: 25px;
				width: 0px;
				height: 10px;
				margin-left: 0px;
				background: url(../img/sprite.png) center no-repeat;
				background-position: -45px 0px;
			}

			#header li:last-child  {margin-right: 0;}

			#header a {
				display: inline-block;
				text-transform: uppercase; 
				margin: 0px 0px 0px 0px;
				height: 45px; 
				line-height: 70px; 
				text-align: center;
				font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
				color: #888;
			}


			#header ul li a#logo {
				position: absolute;
				background: blue url(../img/sprite.png) center no-repeat;
				background-position: 0px 0px;
				z-index: 9000;
			}

			#header li.logo {
				display: none;
				position: absolute; 
				width: 100px;
				height: 100px;
				margin-top: 50px;
				margin-left: -50px;
				top:50%;
				left:50%;
				z-index: 9000;
			}

			#header a.current {color: #333; border-bottom: 0px solid #dadada; }



	/************ FORM CONTACT ************/

				#contact-info {position: relative; width: 320px; left:50%; margin-left: -160px;}
				#slidingContact {padding-top: 15px; overflow: scroll;}
				#mini-container {width: 1800px;}
				.colonne {width: 360px; padding-top: 84px;}
				#col-trois {width: 270px;}


				textarea.get-info {width: 380px; height:100px; padding-top: 15px;}

				p.c-intro {
					width: 320px;
					font-size: 18px;
					font-size: 1.8rem; 
					line-height: 35px; 
					line-height: 3.5rem;
				}
				section.col {
					width: 320px; 
					margin: 510px 0px 0px 0px;
					padding-bottom:30px; 
					right: -2px; 
				}

				p.p-form {
					width: 280px;
					display: inline-block;
				}


				#formulaire {
				
					position: relative;
					width: 320px;
					margin: 420px 0px 0px -119px; 
				}

/********************** FORMULAIRE **********************/

			fieldset {border: none; margin:0; padding: 0;}



/* *************** FORM BIS *************** */

			.get-info {width: 298px; }
			textarea.get-info {width: 298px; height: 150px; }

			input.valid {
				margin: 15px 0px 20px 273px;
				padding: 5px 8px 0px 8px;
				font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
				font-weight: 100;
				cursor: pointer;
			}


/********************************\ SIDEBAR PROJECTS /********************************/

	/* hide sidebar */
	#sidebar {
		height: 0px;
		width: 0px;
	}

	/* hide list : projects name */
	ul#top {display: none;}


/********************************\ 	IMAGES CONTAINER /********************************/

	.container-img {
		
		width: 100%;
		position: relative;
		white-space: normal;
		display: inline;
		margin-left: 0px;
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-o-transition: all .5s ease;
		-ms-transition: all .5s ease;
		transition: all .5s ease;
		height: 100%
	}

	.last-img {margin-right: 0px;}


	/* hide */

	span.close {display: none;}
	span.close-m {display: inline-block;}
	span.open {display: none;}
	span.open-dark {display: none;}


	.container-img.resize {display: none;}

	#contenu-index {display:block; }


	img.img-m {display: block; }

	img.img-h-m {display: none; }

	blockquote {
		margin: 12px 0px 0px 20px;
		font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
		-webkit-font-smoothing: antialiased;
		font-size: 3rem;
		line-height: 33px;
		line-height: 3.3rem;
		text-transform: uppercase;
		color: #444;
		max-width: 300px;
		float: left;
	}

	a.autor {
		display: block;
		font-size: 1.4rem;
		color: #fff;
		letter-spacing: 4px;
		padding-left: 1px;
		font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	}



/********************************\ CONTENT /********************************/


	#container {
		margin-top: 64px;
		top:0%;
		height: 100%;
		width: 100%;
		z-index: 0;
	}

/********************************\ INFOS  /********************************/

	span.close {
				position: absolute;
				margin: 0px 20px 0px 12px;
				opacity: 0.8;
				background: url(../img/croix.png) no-repeat center center;
				background-size: 20px;
	}

	span.close-m {display: inline-block; }

	

/********************************\ COMMUN AU DIFFERENT PROJET /********************************/

	.com {
		position: relative;
		display: block;
		width: auto;
		padding: 30px 20px 30px 20px;
		height: auto;
		margin-top: -6px; 
	}

	.com-two {
		position: relative;
		display: block;
		width: auto;
		padding: 30px 20px 30px 64px;
		height: auto;
		margin-top: -6px; }


	div.com p {
		width: auto;
	}

	/* TITRE */
	h2.titre {
		color:#444;
		padding:0; 
		letter-spacing: 5px;
		font-size: 22px;
		font-size: 2.2rem;
		margin: 10px 0px 10px 0px;  
		display: block;
		text-transform: uppercase; 
		font-family: "Helvetica-Neue-Roman";
		font-weight: normal;
		-webkit-font-smoothing:antialiased
	}


	/* SOUS-TITRE */
	h3.sous-titre {
		color:#777;
		letter-spacing: 5px;
		font-size: 15px;
		font-size: 1.5rem;
		margin: 0px 0px 10px 0px;
		font-weight: normal; 
		text-transform: uppercase; 
		font-family: "Helvetica-Neue-Thin";
	}

	/* PARAGRAPHES */

	p {
		font-size: 13px;
		font-size: 1.3rem;
		line-height: 20px;
		line-height: 2rem;
		font-family: "Helvetica-Neue-LTStd-Lt";
	}

	.com p.date {
		color: #555;
		font-size: 10px;
		font-size: 1rem;
		letter-spacing: 2px;
		margin: 5px 0px 0px 0px;
		padding-bottom: 10px;
	}

	.com p {margin: 0 0 16px 0; padding: 0;}
	p.last-p {margin-bottom: 24px;}


	/* SOUS-TITRE */
	.a-p {color: #555;}
	a.a-p:hover {border-bottom: 1px #666 dotted;}
	a.a-underline {color: #555; border-bottom: 1px #666 dotted;}

	span.mot-cle {
		margin: 0;
		font-family: "Helvetica-Neue-LTStd-Lt";
		font-size: 13px;
		font-size: 1.3rem;
		font-style: italic;
		color:#bbb;
	}

	strong {font-weight: normal;}



/********************** ABOUT **********************/

video {display: none;}

/********************************\ ABOUT /********************************/

body.about {background: #fff; }

#mini-container {
	position: absolute;
	z-index: 3000;
	margin:30px;
	top:auto;
	margin: 0px;
	width: 360px; 
}


blockquote.qui {
	margin: 32px 0px 0px 20px;
	font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
	font-size: 3rem;
	line-height: 33px;
	line-height: 3.3rem;
	color: #444;
	max-width: 300px;
	float: left;
	padding-bottom: 5px;
}


a.autor {
	font-size: 1rem;
	font-size: 10px;
	color: #999;
	letter-spacing: 4px;
}


.colonne {
	position: relative;
	width: 360px;
	clear:both;
	float: left;
	margin-left: 20px;
	padding-top: 20px;
	border-top: 1px dotted #999;
}

#col-trois {width: 360px; padding-bottom: 30px;}

.colonne p {
	font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
	margin-top: 10px;
	color:inherit;
	width: 360px; 
}

.colonne h3 {
	font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
	font-weight: normal;
	line-height: 16px;
	letter-spacing: 2px;
	margin: 0px;
	color: #999;
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 0px;
}

.colonne ul {margin: 10px 0px 0px 0px;}

.colonne ul li {font-style: italic; color:#444; font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;}



/********************************\ PROJETS /********************************/

	.projet {
		position: absolute;
		background-color: #fff;
		top: 0%;
		padding: 0px 0px 0px 0px; /*!!!!!!*/
		width: 100%;
	}

	img {
		max-width: 100%;
		margin-right: 0px;
		overflow: hidden;
		margin-top: -6px;
		opacity: 1;
	}

	ul.n-projects {
		display: block;
		padding-bottom: 23px;
		padding-right: 20px;
		margin-left: -20px;
	}

	ul.n-projects li {
		display: inline-block;
		padding: 0;
		margin: 0px 0px 0px -10px;
		float:left;
	}

	ul.n-projects li a {color: #999; letter-spacing: 1px; }
	ul.n-projects li.al-r {margin: 0; float:right; }
	ul.n-projects li.ex-r {margin-right: -10px;}
	ul.n-projects li a:hover {color: #333;}
	ul.n-projects li.slash{margin: 0px 5px 0px 3px; }



/********************************\ CREDITS /********************************/


	ul.ul-credit {
		width: 135px;
		float:left;
		margin: 25px 0px 0px 20px;
		padding: 0px 0px 0px 0px;
	}

	ul.ul-credit.c-left {padding: 0px 0px 30px 0px;}

	li.li-first {margin-top: 0px;} 




/********************************\ DESIGN PROCESS /********************************/

#container.dp {width: 360px; padding: 0px 20px;}

blockquote.b-dp {margin: 30px 0px 30px 0px;}

#container.dp blockquote.b-dp a.autor {color: #999; margin-top:-2px;}


#container.dp ul.ul-credit {
	margin: 0px 0px 30px 0px;
}

#container.dp ul.ul-credit.dp-2 {margin-top: 120px;}
#container.dp ul.ul-credit.dp-3 {margin-top: -20px;}
#container.dp ul.ul-credit.dp-4 {margin-top: 200px;}
#container.dp ul.ul-credit.dp-5 {margin-top: -20px;}
#container.dp ul.ul-credit.dp-6 {margin-top: 190px;}
#container.dp ul.ul-credit.dp-7 {margin-top: -30px; padding-bottom: 30px; }


/********************************\ 404 /********************************/

	body.lost {
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background: url(../img/bg-404.jpg) no-repeat fixed;
		width: 100%;
		height: 100%;
	}

	#p404 {
		position: relative;
		z-index: 2000;
		color: #fff;
		display: block;
		width: 360px;
		padding: 20px;
		height: 500px;
	}


	p.p404-title {
		width: 280px;
		margin-top: 0px;
		display: block;
		font-size: 30px;
		font-size: 3rem;
		padding: 0px 40px 0px 40px; 
		letter-spacing: 22px;
		font-family: "Helvetica-Neue-Medium",Helvetica,Arial,Sans-serif;
	}

	span.lost-w {
		display: block;
		letter-spacing: 10px;
		margin-left: -10px;
	}


	p.p404-s-title {
		display: block;
		text-align: center; 
		font-size: 16px;
		font-size: 1.6rem;
		font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
		line-height: 38px;
		letter-spacing: 3px;
		padding: 60px 0px 50px 0px;
	}


	#sitemap {
		margin-top: -20px;
		display: block;
		text-align: center;
		padding-bottom: 0px;
	}

	#sitemap p {
		font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
		letter-spacing: 10px;
		padding-left: 3px; 
		margin: 110px 0px 0px 10px;

	}

	#p404 a {
		margin: 0px 3px;
		padding: 8px 6px 8px 8px;
		font-size: 10px;
		font-size: 1rem;
		letter-spacing: 3px;
		height: 32px;
		line-height: 34px;
		background-color: rgba(255,255,255,.4);

	}


} /* FIN MEDIAQUERIES IPHONE */






/* !!!!!!!!!!!!!! IPHONE : 320PX  !!!!!!!!!!!! */

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


	p.i-where {line-height: 20px; } /* intro index */

	img {max-width: 100%; margin-right: 0px; }

	.projet {width: 100%;}

	div.com p {max-width: 280px; font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif; color: #444; }
	.com-two {color:#444;} 
	span.close {margin: 0px 15px 0px 12px; }



/************ FORM CONTACT ************/

	#contact-info {
		position: relative; 
		width: 280px; 
	}
		
	#slidingContact {
		padding: 15px 20px 0px 20px; 
		overflow: scroll;
	}
				
	#mini-container {width: 1800px;}
	.colonne {width: 360px; padding-top: 84px;}
	#col-trois {width: 270px;}

	p.c-intro {
		width: 280px;
		font-size: 19px;
		font-size: 1.9rem; 
		line-height: 35px; 
		line-height: 3.5rem;
		font-weight: normal;
		font-family: "Helvetica-Neue-Roman";
	}

	p.p-form {
		font-weight: normal;
		font-family: "Helvetica-Neue-Roman";
		font-size: 15px;
		font-size: 1.5rem;
		
	}

	section.col {
		width: 320px; 
		height:100px;
		margin: 520px 0px 0px 0px;
	}

	#formulaire {
		position: relative;
		width: 280px;
		margin: 460px 0px 0px -119px; 
		padding-bottom: 30px; 
	}



/********************** FORMULAIRE **********************/

	fieldset { width:280px; border: none; margin:0; padding: 0;}

/* *************** FORM BIS *************** */

	.get-info {width: 255px;}
	textarea.get-info {width: 255px;}

	input.valid {
		margin: 15px 0px 20px 223px;
		padding: 5px 8px 0px 8px;
		font-family: "Helvetica-Neue-LTStd-Lt",Helvetica,Arial,Sans-serif;
		font-weight: 100;
		cursor: pointer;
	}


/********************** PAGE ABOUT **********************/


#mini-container {
	position: absolute;
	z-index: 3000;
	margin: 0 auto;
	top:50%;
	margin-top: -190px;
	width: 280px; 
}

.colonne {
	position: relative;
	width: 280px;
	clear:both;
	float: left;
	margin-left: 20px;
	padding-top: 20px;
	border-top: 1px dotted #999;
}

.colonne h3 {
	font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
	font-weight: normal;
	line-height: 16px;
	letter-spacing: 2px;
	margin: 0px;
	color: #999;
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 0px;
}

.colonne p {
	font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
	margin-top: 10px;
	color:inherit;
	width: 280px; 
}
	



/********************************\ DESIGN PROCESS /********************************/

#container.dp {width: 300px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 20px;}

blockquote.b-dp {width:280px; margin: 20px 0px 20px 0px;}



/********************************\ CREDITS /********************************/

	ul.ul-credit {
		width: 135px;
		float:left;
		margin: 30px 0px 0px 20px;
		padding: 0px 0px 0px 0px;
	}

	ul.ul-credit.c-left {padding: 0px 0px 30px 0px;}


	ul.ul-credit li.li-title {
		color: #444;
		font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
		padding: 0px;
		margin: 0px;
	}

	ul.ul-credit li{
		padding-top: 8px;
		color: #888;
	}


	li.li-first {margin-top: 0px;}




/********************************\ 404 /********************************/


#p404 {
	position: relative;
	z-index: 2000;
	color: #fff;
	display: block;
	width: 280px;
	padding: 20px;
	height: 500px;
}


p.p404-title {
	margin-top: 0px;
	display: block;
	font-size: 30px;
	font-size: 3rem;
	padding: 0px 0px 0px 10px; 
	letter-spacing: 22px;
	font-family: "Helvetica-Neue-Medium",Helvetica,Arial,Sans-serif;
}


p.p404-s-title {
	display: block;
	text-align: center; 
	font-size: 16px;
	font-size: 1.6rem;
	font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
	line-height: 38px;
	letter-spacing: 3px;
	padding: 0px 0px 50px 0px;
}


#sitemap p {
	font-family: "Helvetica-Neue-Roman",Helvetica,Arial,Sans-serif;
	letter-spacing: 10px;
	padding-left: 3px; 
	margin: 110px 0px 0px 10px;

}

#p404 a {
	margin: 0px 3px;
	padding: 6px 4px 6px 6px;
	font-size: 8px;
	font-size: 0.8rem;
	letter-spacing: 1px;
	height: 32px;
	line-height: 34px;
	background-color: rgba(255,255,255,.4);

}


} /* FIN MEDIAQUERIES 320 PX */