@import url(https://fonts.googleapis.com/css?family=Lato:300|Arimo:400,400italic);

body{font-family:'Arimo', Arial, sans-serif; font-size:100%; color:#292929;}
#page {font-size:0.78125em /* 12.5px ÷ 16 */; letter-spacing: 0.034375em /* 0.55px ÷ 16 */;}

#top p, #main p, .about li .lowercase{font-size:1.12em /* 14px ÷ 12.5 */; line-height:1.8em; font-weight:100;}
.arial{font-family:Arial, Helvetica, sans-serif;}

.center, #main, #bottom {width:92%; margin:auto;}

#content p, .about li .lowercase{color:#a7a7a7;}
a {text-decoration:none; color:#292929;}
strong{color:#373737;}
header p, footer .lowercase{color:#666;}

#bottom p, em{font-style:italic;}
.keywords, footer, .btn_details, #bottom{text-transform:uppercase;}
footer .lowercase{text-transform:none;}

h1 a, p span, footer .lowercase, .about .lowercase, .chariot{display:block;}
h1 span, h2, h3, h4 span, aside h5, aside li:nth-child(2), .behind img.middle, .push span, .suppr, .spec header, .spec li, .cite span, .work p span, .article, .keywords{display:none;}
.clear{clear:both;}


/* TOP --------------------------------------------------- */

#top{background:#000; height:47px; padding-top:28px; width:100%; position:fixed; top:0; z-index:1;}

h1 {float:left;}
h1 a{background:url(../images/logo-antoinedesmeliers_v609.png); width:215px; height:13px; margin-top:5px;}

nav {float:right; font-family:'Lato', Arial, sans-serif; font-size:1.12em /* 14px ÷ 12.5 */; padding-top:5px;}
nav li{float:left; background:url(../images/picto-point-menu.png) no-repeat right 7px; margin-left:22px; padding-right:22px;}
nav li:last-child{padding:1px 0 0 0; background:none;} /* signes japonais */

nav a, nav li {color:#FFF;}
nav a.about_jp{color:#EEE;}

nav span:hover{border-bottom:1px solid #FFF; padding-bottom:3px;}
nav .on{border-bottom:1px solid #555; padding-bottom:3px;}
nav .on:hover{border-color:#555;}

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


/* PUSH TO PROJECTS -------------------------------------- */

/*.push{width:360px; height:360px; display:block;}*/
.push_work{background:url(../images/push-work.png) no-repeat;}

.push_ventesprivees{background:url(../images/push-bmw-ventesprivees.jpg) no-repeat;}
.push_movenpick{background:url(../images/push-movenpick-secretsdegourmets-nestle.jpg) no-repeat;}
.push_eppendahl{background:url(../images/push-eppendahl.jpg) no-repeat;}
.push_tastytravel{background:url(../images/push-tastytravel.jpg) no-repeat;}
.push_fannyj{background:url(../images/push-fannyj.jpg) no-repeat;}
.push_offresephemeres{background:url(../images/push-bmw-offresephemeres.jpg) no-repeat;}
.push_ameliatotoblo{background:url(../images/push-ameliatotoblo.jpg) no-repeat;}
.push_playground{background:url(../images/push-playground-appmobile.jpg) no-repeat;}
.push_wdapero{background:url(../images/push-wdapero.jpg) no-repeat;}
.push_print{background:url(../images/push-printmy3D.jpg) no-repeat;}
.push_furet{background:url(../images/push-furetdunord.jpg) no-repeat;}
.push_smirnoff{background:url(../images/push-smirnoff.jpg) no-repeat;}

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


/* TITLE & KEYWORDS PROJECT PAGES ------------------------ */

.hgroup{width:440px; height:100px;}

.titre_ventesprivees{background:url(../images/titre-projet-ventesprivees.png) no-repeat;}
.titre_movenpick{background:url(../images/titre-projet-movenpick.png) no-repeat;}
.titre_eppendahl{background:url(../images/titre-projet-eppendahl.png) no-repeat;}
.titre_tastytravel{background:url(../images/titre-projet-tastytravel.png) no-repeat;}
.titre_fannyj{background:url(../images/titre-projet-fannyj.png) no-repeat;}
.titre_offresephemeres{background:url(../images/titre-projet-offresephemeres.png) no-repeat;}
.titre_ameliatotoblo{background:url(../images/titre-projet-ameliatotoblo.png) no-repeat;}
.titre_playground{background:url(../images/titre-projet-playground.png) no-repeat;}
.titre_wdapero{background:url(../images/titre-projet-wdapero.png) no-repeat;}
.titre_printmy3D{background:url(../images/titre-projet-printmy3D.png) no-repeat;}
.titre_furetdunord{background:url(../images/titre-projet-furetdunord.png) no-repeat;}
.titre_smirnoff{background:url(../images/titre-projet-smirnoff.png) no-repeat;}

.figure h4, h4.hwireframes_print{width:350px; height:25px;}

h4.moodboard {background:url(../images/titre-encart-moodbard.png) no-repeat;}
h4.brandcontent {background:url(../images/titre-encart-brandcontent.png) no-repeat; width:223px; height:54px;}
h4.flexible {background:url(../images/titre-encart-flexible.png) no-repeat; width:195px; height:54px;}
h4.filters {background:url(../images/titre-encart-filters.png) no-repeat; width:103px; height:54px;}
h4.persona {background:url(../images/titre-encart-persona.png) no-repeat;}
h4.wireframes, h4.hwireframes_print {background:url(../images/titre-encart-wireframes.png) no-repeat;}
h4.check-in {background:url(../images/titre-encart-checkin.png) no-repeat; width:127px; height:54px;}
h4.twitter {background:url(../images/titre-encart-signuptwitter.png) no-repeat; width:309px; height:54px;}
h4.loyaltycard {background:url(../images/titre-encart-loyalty.png) no-repeat; width:193px; height:54px;}
h4.personae {background:url(../images/titre-encart-personae.png) no-repeat;}
h4.faceted {background:url(../images/titre-encart-facetedsearch.png) no-repeat; width:231px; height:54px;}

.behind h4 {background:url(../images/titre-encart-behind.png) no-repeat; width:350px; height:25px;}

#main header .hgroup{float:left;}
#main .adapt_keywords{margin-top:30px;}

.keywords{text-align:right; padding-top:25px; padding-left:54.31034% /* 630px ÷ 1160 */;}
.keywords.furet, .keywords.play, .keywords.wd{padding-left:60.34482%}

.keywords li{display:inline-block; background:url(../images/picto-point-skills.png) no-repeat left; margin-left:11px; padding-left:17px; margin-bottom:20px;}
.keywords li:first-child, .keywords li.retour{background:none;}

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

#main .htop {margin:85px 0 75px;}
#main header p{background:url(../images/filet-noir.png) no-repeat; margin-top:50px; padding-top:50px; margin-bottom:35px;}
#main.work {padding-bottom:20px; border-bottom:#e9e9e9 solid 1px; margin-bottom:40px;}

#main.work header{background:url(../images/filet-noir.png) no-repeat bottom right; margin:160px 0 90px;}
#main.work header p{background:url(../images/titre-index.png) no-repeat; width:465px; height:112px; margin:0; padding:0 0 45px 0;}

.work li{margin-bottom:35px;}

.projectpage img {margin-bottom:50px;}
.projectpage img.redlight{margin-bottom:50px;}

.btn_details{background:url(../images/picto-plus.png) no-repeat left 4px; padding-left:15px;}
.btn_details:hover span{border-bottom:1px solid #555; padding-bottom:2px;}

p.legend{margin:-20px 0 60px 0;}

.figure{background:url(../images/filet-gris.png) no-repeat bottom center; margin-top:50px; padding-bottom:50px; margin-bottom:100px;}
.figure h4, h4.hwireframes_print{margin:auto; margin-bottom:100px;}
.spec {margin-bottom:100px;}

.figure.behind{background:none; margin-bottom:0;}
.figure.behind img{margin-bottom:0; float:left;}

.edito{float:left; width:50%;}
.edito p{margin-top:35px;}
.article img{float:right; width:50%;}

/*
.spec{margin-bottom:150px; width:1160px; height:415px;}
.spec.playground{background:url(../images/playground-appmobile-02.jpg) no-repeat;}
.spec.wdapero{background:url(../images/wdapero-communitywebsite-02.jpg) no-repeat;}
.spec.print{background:url(../images/printmy3D-01.jpg) no-repeat;}
*/

footer {border-top:#161616 solid 1px; padding-bottom:40px; border-bottom:#161616 solid 1px;}
footer h5, footer ul{float:left; width:50%;}

footer h5, footer li, .about h4, .about #main li{padding-top:40px;}
footer .lowercase, .about .lowercase{padding-top:10px;}

aside{margin:80px 0 70px;}
aside li, .work li{float:left; background-color:#161616;}
/*aside li:nth-child(2), img.middle, .work li.middle{margin:0 40px;}*/


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


/* ABOUT -------------------------------------------------- */

.about #main header{background:url(../images/titre-about.png) no-repeat bottom; width:435px; height:80px; margin:150px 0 55px;}

.about h4, .about #main ul{text-transform:uppercase;}
.about .skills .lowercase{text-transform:none; font-size:1.06em /* 13,25px ÷ 12.5 */;}

.about #main p{color:#a7a7a7; margin-bottom:43px;}
.about #main p.black{color:#292929}

.bio a{border-bottom:1px solid #292929; padding-bottom:3px;}
.bio a:hover{border-color:#a7a7a7; color:#999;}

.about #main.jap .bio p{margin-bottom:30px; font-size:1.04em /* 13px ÷ 12.5 */;}
.about #main.jap .bio p.cite{margin:50px 0;}

.about p.cite{background:url(../images/about-cite.png) no-repeat; width:418px; height:146px;}
.about .connect li{float:left;}
.about .connect li:last-child{background:url(../images/picto-slash.png) no-repeat left bottom; margin-left:10px; padding-left:16px;}
.about .tiret{margin:0 7px;}

.skills {margin-top:60px; border-top:#e9e9e9 solid 1px;}
.skills, .connect{border-bottom:#e9e9e9 solid 1px; padding-top:5px; padding-bottom:40px;}

.connect {margin-bottom:45px;}
.connect a:hover{color:#a7a7a7;}

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


/* BOTTOM ------------------------------------------------ */

#bottom{font-size:0.98em /* 12px ÷ 12.5 */; margin-bottom:85px;}

#bottom a{float:left; border:#161616 solid 1px; padding:12px 28px;}
#bottom a:hover{border-color:#999; color:#888;}

#bottom p{float:right; font-style:italic; background:url(../images/filet-noir.png) no-repeat bottom right; margin-top:11px; padding-bottom:15px;}

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


/* MEDIA QUERIES ----------------------------------------- */

img{max-width:100%;}

.push{display:block;}
.push{width:100%; padding-top:100%; background-size:cover;}

.spec {width:100%; padding-top:35.775862%; height:0;}
.spec.playground{background:url(../images/playground-appmobile-02.jpg) no-repeat; background-size:cover;}
.spec.wdapero{background:url(../images/wdapero-communitywebsite-02.jpg) no-repeat; background-size:cover;}
.spec.print{background:url(../images/printmy3D-01.jpg) no-repeat; background-size:cover;}


@media screen and (max-width:608px){
	
	/* MOBILE ------------------------------------ */
	
	#main, #bottom, .center {width:90%; margin:auto;}
	#main{margin-top:0;}
	
	#top{position:inherit;}
	h1, nav li:last-child{display:none;}
	nav {text-transform:uppercase; font-size:1em; letter-spacing: 0.109375em /* 1.75px ÷ 16 */; float:none;}
	
	nav ul {text-align:center;}
	nav li {display:inline; float:none; margin-left:20px; padding-right:20px;}
	nav li.menu3 {background:none; padding-right:0;}
	
	#bottom{margin-bottom:40px;}
	#main .htop{margin:45px 0 45px;}

	#main header p{margin-top:10px; padding-top:35px; font-size:1em /* 12px ÷ 12.5 */;}
	#main header p span, #main p.legend span {display:inline;}
	
	#main p.legend {margin:5px 0 30px; font-size:1em /* 12px ÷ 12.5 */;}
	#main .adapt_keywords {margin-top:10px;}
	
	#main.work header {margin:45px 0 60px;}
	#main.work {margin-bottom: 30px;}
	
	h2, h3, #main.work header p, .bio p.cite{display:block; font-family:Georgia, "Times New Roman", Times, serif; color:#292929; font-size:1.3125em /* 15.75px ÷ 12 */;}
	#main.work header p{font-style:italic; background:none; width:auto; height:auto; padding-bottom:40px;}
	
	.hgroup {width:auto; height:auto; background:none;}
	h2 {font-size:2em /* 24px ÷ 12 */}
	h3 {font-style:italic;  margin:10px 0 30px;}
	
	.projectpage img {margin-bottom:30px;}
	.projectpage img.redlight{margin-bottom:30px;}
	
	.figure{margin-top:25px; margin-bottom:0; padding-bottom:0; background:none;}
	.figure h4, h4.hwireframes_print{margin-bottom:50px; width:280px; background-position:bottom;}
	h4.hwireframes_print{margin-top:25px;}
	
	.spec {margin-bottom:45px;}
	
	.work li, .behind img{width:48.27586% /* 360px ÷ 1160 */;}
	.work li.first, .behind img.first{margin-right:3.44828% /* 40px ÷ 1160 */;}
	.work li {margin-bottom:12px;}
	.behind img.first {margin-bottom:30px;}
	
	#details{margin-top:10px;}
	#details h5, #bottom p, h2.hindex{display:none;}
	#details ul{width:100%;}
	
	aside{margin:40px 0 20px;}
	aside li{width:100%;}
	aside li:first-child{display:none;}
	
	.push_work, #bottom a{width:100%; padding:20px 0; text-align:center;}
	#bottom a.hp{padding:15px 0;}
	
	.push_work{background:none; font-style:italic;}
	.push_work span{display:block; color:#efefef; text-transform:uppercase; letter-spacing: 0.109375em /* 1.75px ÷ 16 */;}
	
	/* ABOUT */
	
	.about #main header{background:none; width:auto; height:auto; margin: 40px 0 40px;}
	.about h2{font-size:1.75em /* 21px ÷ 12 */}
	
	.about #main p {margin:0;}
	.photo_ad{background:url(../images/antoine_v560.jpg) no-repeat; width:100%; height:0; padding-top:78.571428%; background-size:cover;}
	
	.bio p, .photo_ad img, .about h4, .suppr_skills{display:none;}
	.about #main .bio p.cite {display:block; background:url(../images/filet-noir.png) no-repeat; width:auto; height:auto; font-size:1.16em /* 14.5px ÷ 12.5 */; margin:45px 0 30px; padding-top:30px;}
	.bio p.cite span{display:block; color:#292929; font-style:italic;}
	
	.skills, .connect{margin:0; padding-top:0; padding-bottom:25px;}
	.about #main  .skills li {padding-top:30px;}
	.about #main .connect li {padding-top:25px;}
	
	.about .skills .lowercase {font-size:1em;}
	.connect {margin-bottom:40px;}
	
	.about .skills .tiret {margin:0 4px;}
	.about .skills .chariot, .about .skills .suppr{display:inline;}
	
	.about aside{background-color:#161616;}
	.push_work{background:none;}
	
}/*/mediaquery*/


@media screen and (min-width:609px){
	
	/* LOGO V1 ------------------------------------ */
	
	#main .htop{margin:175px 0 65px;}
	#main header p{margin-top:30px; padding-top:40px;}
	
	.hgroup, .figure h4, h4.hwireframes_print {background-position:center;}
	.work li, aside li, .behind img, aside li {width:48.27586% /* 360px ÷ 1160 */;}
	.work li{margin-bottom:25px;}
	.push{height:0;}
	
	p.legend{margin-bottom:40px;}
	aside {margin:60px 0 50px;}
	aside li:first-child, .work li.first, .behind img.first{margin-right:3.44828% /* 40px ÷ 1160 */;}
	
	/* ABOUT */
		
	.about #main, .about .center, .about #bottom {width:560px;}
	.about h4, .photo_ad img {display:none;}
	.photo_ad{background:url(../images/antoine_v560.jpg) no-repeat; width:100%; height:440px; margin-bottom:70px;}
	
	.bio{width:520px;}
	.bio p.paragraph2{width:530px;}
	
	.bio span{display:inline;}
	.bio p.cite span, .about aside{display:none;}
	.bio span.chariot{display:block;}

		
}/*/mediaquery*/


@media screen and (min-width:826px){
	
	/* LOGO V2 ------------------------------------ */

	h1 a{background:url(../images/logo-antoinedesmeliers.png); width:285px; height:18px; margin-top:0;}
	nav {padding-top:3px;}
	#main .adapt_keywords{margin-top:45px;}

	.projectpage img{margin-bottom:60px;}
	.projectpage img.redlight{margin-bottom:90px;}
	.hgroup, .figure h4, h4.hwireframes_print{background-position:top;}
		
	.figure{margin-top:50px; padding-bottom:50px; margin-bottom:120px;}
	.figure h4, h4.hwireframes_print{margin-bottom:120px;}
	.spec {margin-bottom:120px;}
	
	.work li.first{margin-right:0;}
	.work li, aside li, .behind img{width:31.03448% /* 360px ÷ 1160 */;}
	.work li.middle, aside li:nth-child(2), .behind img.middle{display:block; margin:0 3.44828% /* 40px ÷ 1160 */;}
	
	aside li:first-child, .behind img.first {margin-right:0;}
	
	/* ABOUT */
	
	.about #main, .about .center, .about #bottom {width:92%;}
	#bottom{margin-bottom:85px;}
	
	.about #main header{background-position:top; margin:150px 0 90px;}
	.photo_ad{float:left; background:none; height:auto; margin-bottom:0; overflow:hidden;}
	.photo_ad img{display:block; max-width:none; position:relative; left:-50px;}
	
	.bio {float:left; margin-top:-8px;}
	.bio p.paragraph2{width:auto;}
	
	.skills{margin-top:60px;}
	.about h4, .about h4, .photo_ad img, .bio p span {display:block;}
	.about h4, .about #main ul {float:left;}
	
	.about #main ul, .bio {width:60.34482% /* 650px ÷ 1160 */; padding-left:8.62068% /* 100px ÷ 1160 */ ;}
	.photo_ad, .about h4{width:31.0345% /* 485px ÷ 1160 */;}
	
}/*/mediaquery*/


@media screen and (min-width:1043px){
	
	/* KEYWORDS ----------------------------------- */
	
	#main.work {padding-bottom:10px;}
	.article, .keywords{display:block;}
	.projectpage img.redlight{margin-bottom:120px;}
	
	.figure{margin-top:70px; padding-bottom:70px; margin-bottom:150px;}
	.figure h4, h4.hwireframes_print{margin-bottom:150px;}
	.spec {margin-bottom:150px;}
	
	/* ABOUT */

	.photo_ad img{left:-50px;}
	
}/*/mediaquery*/


@media screen and (min-width:1200px){
	
	/* DESKTOP ----------------------------------- */
	
	.center, #main, #bottom, .about #main {width:1160px; margin:auto;}
	.projectpage img{margin-bottom:80px;}
	
	.work li{margin-bottom:40px;}
	.keywords{padding-left:60.34482% /* 700px ÷ 1160 */;}
	
	/* ABOUT */ 
	
	.about .center, .about #bottom {width:1160px; margin:auto;}
	.photo_ad img{left:0;}
	
	.about #main ul, .bio {width:49.13795%; padding-left:8.62068% /* 100px ÷ 1160*/ ;}
	.photo_ad, .about h4{width:42.24137% /* 490px ÷ 1160*/ ;}
	
	.about #main.jap ul, .about #main.jap .bio {width:49.13795%; padding-left:8.62068% /* 100px ÷ 1160*/ ;}
	.about #main.jap .photo_ad, .about #main.jap .about h4{width:42.24137% /* 490px ÷ 1160*/ ;}
	
	#bottom, .about #bottom{margin-bottom:85px;}
	
}/*/mediaquery*/

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