/**
 * @license
 * MyFonts Webfont Build ID 2721723, 2014-01-10T06:43:20-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Brandon Grotesque Thin Italic by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/thin-italic/
 * 
 * Webfont: Brandon Grotesque Thin by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/thin/
 * 
 * Webfont: Brandon Grotesque Italic by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/italic/
 * 
 * Webfont: Brandon Grotesque Medium Italic by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/medium-italic/
 * 
 * Webfont: Brandon Grotesque Medium by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/medium/
 * 
 * Webfont: Brandon Grotesque Regular by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/regular/
 * 
 * Webfont: Brandon Grotesque Light Italic by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/light-italic/
 * 
 * Webfont: Brandon Grotesque Light by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/light/
 * 
 * Webfont: Brandon Grotesque Bold Italic by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/bold-italic/
 * 
 * Webfont: Brandon Grotesque Bold by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/bold/
 * 
 * Webfont: Brandon Grotesque Black Italic by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/black-italic/
 * 
 * Webfont: Brandon Grotesque Black by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/black/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2721723
 * Licensed pageviews: 10,000
 * Webfonts copyright: Copyright (c) 2009 by Hannes von Doehren. All rights reserved.
 * 
 * © 2014 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2987bb");

  
@font-face {font-family: 'BrandonGrotesque-ThinItalic';src: url('/assets/webfonts/2987BB_0_0.eot');src: url('/assets/webfonts/2987BB_0_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_0_0.woff') format('woff'),url('/assets/webfonts/2987BB_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-Thin';src: url('/assets/webfonts/2987BB_1_0.eot');src: url('/assets/webfonts/2987BB_1_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_1_0.woff') format('woff'),url('/assets/webfonts/2987BB_1_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-RegularItalic';src: url('/assets/webfonts/2987BB_2_0.eot');src: url('/assets/webfonts/2987BB_2_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_2_0.woff') format('woff'),url('/assets/webfonts/2987BB_2_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-MediumItalic';src: url('/assets/webfonts/2987BB_3_0.eot');src: url('/assets/webfonts/2987BB_3_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_3_0.woff') format('woff'),url('/assets/webfonts/2987BB_3_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-Medium';src: url('/assets/webfonts/2987BB_4_0.eot');src: url('/assets/webfonts/2987BB_4_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_4_0.woff') format('woff'),url('/assets/webfonts/2987BB_4_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-Regular';src: url('/assets/webfonts/2987BB_5_0.eot');src: url('/assets/webfonts/2987BB_5_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_5_0.woff') format('woff'),url('/assets/webfonts/2987BB_5_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-LightItalic';src: url('/assets/webfonts/2987BB_6_0.eot');src: url('/assets/webfonts/2987BB_6_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_6_0.woff') format('woff'),url('/assets/webfonts/2987BB_6_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-Light';src: url('/assets/webfonts/2987BB_7_0.eot');src: url('/assets/webfonts/2987BB_7_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_7_0.woff') format('woff'),url('/assets/webfonts/2987BB_7_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-BoldItalic';src: url('/assets/webfonts/2987BB_8_0.eot');src: url('/assets/webfonts/2987BB_8_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_8_0.woff') format('woff'),url('/assets/webfonts/2987BB_8_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-Bold';src: url('/assets/webfonts/2987BB_9_0.eot');src: url('/assets/webfonts/2987BB_9_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_9_0.woff') format('woff'),url('/assets/webfonts/2987BB_9_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-BlackItalic';src: url('/assets/webfonts/2987BB_A_0.eot');src: url('/assets/webfonts/2987BB_A_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_A_0.woff') format('woff'),url('/assets/webfonts/2987BB_A_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesque-Black';src: url('/assets/webfonts/2987BB_B_0.eot');src: url('/assets/webfonts/2987BB_B_0.eot?#iefix') format('embedded-opentype'),url('/assets/webfonts/2987BB_B_0.woff') format('woff'),url('/assets/webfonts/2987BB_B_0.ttf') format('truetype');}
 
/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;	
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*end reset*/

/*Par défaut - peu importe le périphérique*/


body{
	font-family: BrandonGrotesque-Regular;
	background-color: #fff;
	font-size: 100%;
}
.page{
	margin:25px 65px;
	/*max-width: 960px;*/
}
a{
	text-decoration: none;
	color:#583042;
}
a:hover{
	text-decoration: none;
}
.main{margin:0 0 33px 0;}
.left{

	font-size: 0.8em;
	line-height: 1.18em;
	float: left;
	width: 180px;
	}
.right{
	margin-bottom: 90px;
	
}

.mainNav{
text-transform: uppercase;
position: absolute;
top:95px;
left: 160px;
font-size: 1.2em;
color: #583042;

}
.mainNav li{
display: inline;
margin-right: 15px;
}
.bottomLinks, .bottomLinksBio{
	text-transform: uppercase;
	margin:15px 0 0 0;
}
.bottomLinks li, .bottomLinksBio li{
display:inline;
}
.bottomLinks li + li:before, .bottomLinksBio li + li:before{
    content: "/ ";
    padding: 0 5px;
}
.fb{
	position: fixed;
	bottom:25px;
	left:255px;
}
.item img, .numero img{
	width: 352px;
	height: auto;
	display: block;
	margin:6px 0;
	float:left;
}
.item:hover:after {
	font-size: 0.9375em;
	display: table-cell;
	content: attr(title);
	text-align: center;
	color: #583042;
	position: absolute;	
	width: 100%;
	height: 100%;
	opacity:0.75;
	background: #FFF;
	bottom: 0px;
	left: 0px;
	text-transform: uppercase;
	border-radius: 0;
	line-height: 1em;
	top:0;
	right: 0;
	padding-top:40%;
	
}
.numero:hover:after {
	font-size: 2em;
	display: block;
	content: attr(data-src);
	text-align: center;
	color: #583042;
	position: absolute;	
	opacity:0.85;
	background: #FFF;
	top: 16px;
	right: 10px;
	border-radius: 50%;
	width: 60px;
	height: 60px; 
	line-height: 70px;
	
}
.large img{
	width: 552px;
}
.new:after {
	font-size: 0.9375em;
	display: block;
	content: 'NEW';
	text-align: center;
	color: #583042;
	position: absolute;	
	opacity:0.85;
	background: #FFF;
	top: 20px;
	right: 20px;
	border-radius: 50%;
	width: 60px;
	height: 60px; 
	line-height: 63px;
	
}
.sub{
	text-transform: none;
	margin: 0 0 20px 20px;
	
	
}
.sub a{
	color:#583042;
	font-size: 1.4em;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
}

.subIllustrateurs{
	display: none;
}
.actif, a.actifPuce{
		color:#58585B;
	
}
.actifPuce:before{
	content: '\2022';
	font-size: 6em;
	position: absolute;
	left:60px;
		}
h1, h2, h3{
	font-size: 1.4em;
	margin: 0 0 10px 0;
	/*font-family: BrandonGrotesque-Bold;*/
	text-transform: uppercase;
	/*color:#583042;*/
	color:#583042;
	line-height: 1em;
	
}
h2{font-size: 1.9em;margin: 0;}

.bio{
line-height: 1.6em;font-family: BrandonGrotesque-Thin;
font-size: 1.1em;

}


.bio .bottomLinks, .bio .bottomLinksBio{
	font-size: 0.6em;
	margin: 0 0 15px 0;
	
	}
	.bottomLinksBio a{
		color: #583042;
		font-family: BrandonGrotesque-Regular;
		font-size: 1.2em;
	}
.imgBio{
	float: left;
	padding: 0 20px 300px 40px;
	width: 612px;
	height: auto;
}
.contact .imgBio{
	padding-right:60px;
}
.bio h2{
	font-family: BrandonGrotesque-Regular;
	font-size: 1.5em;
}
.bio p{
	font-size: 1em;
	line-height: 1.4em;
}
.contact{
	margin-left: -40px;
}

.none{
display: none;
}
.itemNews{
	display: block;
	width: 352px;
	overflow: hidden;
}
.itemNews img{
	width: 352px;
	height: auto;
}
.itemLiens{
	display: block;
	width: 120px;
}
.itemNews img, .itemLiens{margin:0 0 15px 0;}
.itemNews h2, .out h2, itemLiens h2{
	font-size: 1.2em;
	margin: 0 0 3px 0;
	
}
.itemNews h3, .out h3{
	font-size: 1.1em;
	margin: 0 0 3px 0;
	
}


.date{
	margin: 0 0 15px 0;
	color:484748;
	font-size: 1.1em;
	font-family: BrandonGrotesque-Thin;
}

.out .date{
	color:#58585B;
}

.itemNews p, .out p, .itemLiens p{
	font-size: 1em;
	line-height: 1.35em;
	margin: 0 0 25px 0;
	font-family: BrandonGrotesque-Thin;
}
.out{
	float: left;
	max-width: 400px;
	width: 30%;
	margin-left: 70%;
}
.in{
	width: 70%;
}
.in img{
	margin: 0 0 18px 0;
	width: 332px;
}
.navNews{
	text-transform: uppercase;
	font-size: 0.9em;
}
p {color:#58585B;}

.foot{
	position: fixed;
	height: 80px;
	width: 100%;
	left: 0;
	bottom:0;
	background-color: #fff;
	z-index: 999;
}

.footerNav{
position: relative;
}
.ab{
	font-size: 1.15em;
	letter-spacing: 0.05em;
	color: #583042;	
	position: absolute;
	left:65px;
	top:15px;
	line-height: 1.4em;
}
.bottomLinks{
	font-size: 1.2em;
	position: absolute;
	left:65px;
	top:45px;

}

.illuMenu{
	float: left;
	width: 200px;
	color:#583042;
	line-height: 0.9em;
	font-family: 'BrandonGrotesque-Thin';
	
}
.illuMenu li a{
	font-size: 0.8em;
}

.decalage{
	margin-left: 200px;
	
}

.bgtitle{
	font-size: 1.4em;
	margin: 0 0 10px 0;
	display: block;
	font-family: 'BrandonGrotesque-Regular';
}

.menuIllustrateur ul li a, .IllusMenu ul li a{
	font-size: 1.1em;
}

/* #### ipad2 paysage #### */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	body{
	font-family: BrandonGrotesque-Regular;
	background-color: #fff;
	font-size: 100%;
}
.page{
	margin:20px 40px;
}
a{
	text-decoration: none;
	color:#583042;
}
a:hover{
	text-decoration: none;
}
.main{margin:0 0 33px 0;}
.main img{width: 200px;height:auto;}
.left{
	width: 250px;
	font-size: 0.8em;
	line-height: 1.18em;
	float: left;
}
.right{
	margin-left: 0px;
	/*margin-bottom: 1250px;*/
	
}

.mainNav{
text-transform: uppercase;
position: absolute;
top:75px;
left: 103px;
font-size: 1.5em;
color: #583042;

}
.mainNav li{
display: inline;
margin-right: 15px;
}
.bottomLinks, .bottomLinksBio{
	text-transform: uppercase;
	margin:15px 0 0 0;
}
.bottomLinks li, .bottomLinksBio li{
display:inline;
}
.bottomLinks li + li:before, .bottomLinksBio li + li:before{
    content: "/ ";
    padding: 0 5px;
}
.fb{
	float: right;
	margin:0 0 0 30px;
	
}

.item img {
	width: 282px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.double img {
	width: 280px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.new:before {
	font-size: 0.9375em;
	display: block;
	content: 'NEW';
	text-align: center;
	color: #583042;
	position: absolute;	
	opacity:0.85;
	background: #FFF;
	top: 20px;
	right: 20px;
	border-radius: 50%;
	width: 60px;
	height: 60px; 
	line-height: 63px;
	
}

.item:after {
	font-size: 0.9375em;
	display: table-cell;
	content: attr(title);
	text-align: right;
	color: #583042;
	position: absolute;	
	opacity:1;
	background: #dbdbdb;
	line-height: 25px;
	bottom:0;
	top:auto;
	right: auto;
	border-radius: 0;
	width: 	282px;
	height: 25px;
	padding-right: 0;
	margin-right: -10px;
}
.noLegende .item:after {
display: none;
}


.sub{
	text-transform: none;
	margin: 0 0 20px 20px;
	
	
}
.sub a{
	color:#555555;
	font-size: 1.4em;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
}

.subIllustrateurs{
	display: none;
}
.actif{
	color:#58585B;
	
}
.actifPuce:before{
	content: '\2022';
	margin-left: -16px;
	margin-right: 3px;
	font-size: 2em;
	}
h1, h2, h3{
	font-size: 1.8em;
	margin: 15px 0 10px 0;
	/*font-family: BrandonGrotesque-Bold;*/
	text-transform: uppercase;
	color:#583042;
	line-height: 1em;
	
}
h2{font-size: 1.9em;margin: 0;}

.bio{
line-height: 1.6em;font-family: BrandonGrotesque-Thin;
font-size: 1.1em;

}


.bio .bottomLinks, .bio .bottomLinksBio{
	font-size: 0.8em;
	margin: 0 0 20px 0;
	
	}
	.bottomLinksBio a{
		color: #583042;
		font-family: BrandonGrotesque-Regular;
		font-size: 1.2em;
	}
.imgBio{
	float: left;
	padding: 0 20px 350px 40px;
	width: 200px;
	height: auto;
}
.contact .imgBio{
	padding-right:20px;
	width: 450px;
	height: auto;
}
.bio h2{
	font-family: BrandonGrotesque-Regular;
	font-size: 1.4em;
}
.bio p{
	font-size: 1em;
	line-height: 1.2em;
}
.contact{
	margin-left: -40px;
}

.none{
display: none;
}
.itemNews{
	display: block;
	width: 205px;
	overflow: hidden;
	font-size: 0.8em;
}
.itemNews img{
	width: 205px;
	height: auto;
}
.itemLiens{
	display: block;
	width: 120px;
}
.itemNews img, .itemLiens{margin:0 0 15px 0;}
.itemNews h2, .out h2, itemLiens h2{
	font-size: 1.6em;
	margin: 0 0 3px 0;
	
}
.itemNews h3, .out h3{
	font-size: 1.2em;
	margin: 0 0 3px 0;
	
}


.date{
	margin: 0 0 15px 0;
	color:#58585B;
	font-size: 1.5em;
	font-family: BrandonGrotesque-Thin;
}

.out{
	font-size: 0.9em;
}
.out .date{
	color:#58585B;
}

.itemNews p, .out p, .itemLiens p{
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 0 0 25px 0;
	font-family: BrandonGrotesque-Thin;
}
.out{
	float: right;
	max-width: 400px;
	width: 20%;
}
.in{
	width: 80%;
}
.in img{
	margin: 0 0 18px 0;
	width: 210px;
}
.navNews{
	text-transform: uppercase;
	font-size: 0.9em;
}
p {color:#908F8F;}

.foot{
	position: fixed;
	height: 80px;
	width: 100%;
	left: 0;
	bottom:0;
	background-color: #fff;
	z-index: 999;
	
}

.footerNav{
position: relative;
}
.ab{
	font-size: 1.1em;
	letter-spacing: 0.05em;
	color: #583042;	
	position: absolute;
	left:40px;
	top:10px;
	line-height: 1.3em;
}
.bottomLinks{
	font-size: 1.2em;
	position: absolute;
	left:40px;
	top:45px;

}

.illuMenu{
	float: left;
	width: 250px;
	color:#735161;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
	
}

.decalage{
	margin-left: 250px;
	
}

.bgtitle{
	font-size: 1.4em;
	margin: 0 0 10px 0;
	display: block;
	font-family: 'BrandonGrotesque-Regular';
}
.nomobile{
	visibility: hidden;
	display: none;
}

}



/* #### ipad portrait */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
  body{
	font-family: BrandonGrotesque-Regular;
	background-color: #fff;
	font-size: 100%;
}
.page{
	margin:20px 40px;
}
a{
	text-decoration: none;
	color:#583042;
}
a:hover{
	text-decoration: none;
}
.main{margin:0 0 33px 0;}
.main img{width: 200px;height:auto;}
.left{
	width: 250px;
	font-size: 0.8em;
	line-height: 1.18em;
	float: left;
	margin-right: 40px;
}
.right{
	margin-left: 0px;
	/*margin-bottom: 1250px;*/
	
}

.mainNav{
text-transform: uppercase;
position: absolute;
top:75px;
left: 103px;
font-size: 1.5em;
color: #583042;

}
.mainNav li{
display: inline;
margin-right: 15px;
}
.bottomLinks, .bottomLinksBio{
	text-transform: uppercase;
	margin:15px 0 0 0;
}
.bottomLinks li, .bottomLinksBio li{
display:inline;
}
.bottomLinks li + li:before, .bottomLinksBio li + li:before{
    content: "/ ";
    padding: 0 5px;
}
.fb{
	float: right;
	margin:0 0 0 30px;
}
.item img {
	width: 302px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.double img {
	width: 280px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.new:before {
	font-size: 0.9375em;
	display: block;
	content: 'NEW';
	text-align: center;
	color: #583042;
	position: absolute;	
	opacity:0.85;
	background: #FFF;
	top: 20px;
	right: 20px;
	border-radius: 50%;
	width: 60px;
	height: 60px; 
	line-height: 63px;
	
}

.item:after {
	font-size: 0.9375em;
	display: table-cell;
	content: attr(title);
	text-align: right;
	color: #583042;
	position: absolute;	
	opacity:1;
	background: #dbdbdb;
	line-height: 25px;
	bottom:0;
	top:auto;
	right: auto;
	border-radius: 0;
	width: 	302px;
	height: 25px;
	padding-right: 0;
	margin-right: -10px;
}
.noLegende .item:after {
display: none;
}


.sub{
	text-transform: none;
	margin: 0 0 20px 20px;
	
	
}
.sub a{
	color:#555555;
	font-size: 1.4em;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
}

.subIllustrateurs{
	display: none;
}
.actif{
		color:#58585B;
	
}
.actifPuce:before{
	content: '\2022';
	margin-left: -16px;
	margin-right: 3px;
	font-size: 2em;
	}
h1, h2, h3{
	font-size: 1.8em;
	margin: 15px 0 10px 0;
	/*font-family: BrandonGrotesque-Bold;*/
	text-transform: uppercase;
	color:#583042;
	line-height: 1em;
	
}
h2{font-size: 1.9em;margin: 0;}

.bio{
line-height: 1.6em;
font-family: BrandonGrotesque-Thin;
font-size: 1.1em;

}


.bio .bottomLinks, .bio .bottomLinksBio{
	font-size: 0.8em;
	margin: 0 0 20px 0;
	
	}
	.bottomLinksBio a{
		color: #583042;
		font-family: BrandonGrotesque-Regular;
		font-size: 1.2em;
	}
.imgBio{
	padding: 20px 0;
	width: 600px;
	height: auto;
}
.contact .imgBio{
	padding-right:20px;
	width: 800px;
	height: auto;
}

.bio h2{
	font-family: BrandonGrotesque-Regular;
	font-size: 1.4em;
}
.bio p{
	font-size: 1em;
	line-height: 1.2em;
}
.contact{
	margin-left: 60px;
}

.bio{
	margin-left: 250px;
}
.contact p, .contact h2{
	margin-left: 60px;
	width: 700px;
}

.contact{
	margin-left: 60px;
}

.none{
display: none;
}
.itemNews{
	display: block;
	width: 440px;
	overflow: hidden;
	font-size: 1em;
}
.itemNews img{
	width: 440px;
	height: auto;
}
.itemLiens{
	display: block;
	width: 120px;
}
.itemNews img, .itemLiens{margin:0 0 15px 0;}
.itemNews h2, .out h2, itemLiens h2{
	font-size: 1.6em;
	margin: 0 0 3px 0;
	
}
.itemNews h3, .out h3{
	font-size: 1.2em;
	margin: 0 0 3px 0;
	
}

.date{
	margin: 0 0 15px 0;
	color:484748;
	font-size: 1.5em;
	font-family: BrandonGrotesque-Thin;
}

.out{
	font-size: 0.9em;
}
.out .date{
	color:#58585B;
}

.itemNews p, .out p, .itemLiens p{
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 0 0 25px 0;
	font-family: BrandonGrotesque-Thin;
}
.out{
	float: right;
	max-width: 400px;
	width: 20%;
}
.in{
	width: 80%;
}
.in img{
	margin: 0 0 18px 0;
	width: 210px;
}
.navNews{
	text-transform: uppercase;
	font-size: 0.9em;
}
p {color:#908F8F;}

.foot{
	position: fixed;
	height: 80px;
	width: 100%;
	left: 0;
	bottom:0;
	background-color: #fff;
	z-index: 999;
}

.footerNav{
position: relative;
}
.ab{
	font-size: 1.1em;
	letter-spacing: 0.05em;
	color: #583042;	
	position: absolute;
	left:40px;
	top:10px;
	line-height: 1.3em;
}
.bottomLinks{
	font-size: 1.2em;
	position: absolute;
	left:40px;
	top:45px;

}

.illuMenu{
	float: left;
	width: 250px;
	color:#735161;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
	
}

.decalage{
	margin-left: 250px;
	
}

.bgtitle{
	font-size: 1.4em;
	margin: 0 0 10px 0;
	display: block;
	font-family: 'BrandonGrotesque-Regular';
}
.nomobile{
	visibility: hidden;
	display: none;
}


}



/* #### iphone portrait */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */

@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px) and (orientation : portrait)  {
  body{
	font-family: BrandonGrotesque-Regular;
	background-color: #fff;
	font-size: 100%;
}
.page{
	margin:20px 40px;
}
a{
	text-decoration: none;
	color:#583042;
}
a:hover{
	text-decoration: none;
}
.main{margin:0 0 33px 250px;}
.main img{width: 200px;height:auto;}
.left{
	width: 250px;
	font-size: 0.8em;
	line-height: 1.18em;
	float: left;
	margin-right: 40px;
}
.right{
	margin-left: 0px;
	/*margin-bottom: 1250px;*/
	
}

.mainNav{
text-transform: uppercase;
position: absolute;
top:75px;
left: 350px;
font-size: 1.7em;
color: #583042;

}
.mainNav li{
display: inline;
margin-right: 15px;
}
.bottomLinks, .bottomLinksBio{
	text-transform: uppercase;
	margin:15px 0 0 0;
}
.bottomLinks li, .bottomLinksBio li{
display:inline;
}
.bottomLinks li + li:before, .bottomLinksBio li + li:before{
    content: "/ ";
    padding: 0 5px;
}
.fb{
	position: fixed;
	bottom:10px;
	left:680px;
}
.item img {
	width: 440px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.double img {
	width: 600px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.new:before {
	font-size: 0.9375em;
	display: block;
	content: 'NEW';
	text-align: center;
	color: #583042;
	position: absolute;	
	opacity:0.85;
	background: #FFF;
	top: 20px;
	right: 20px;
	border-radius: 50%;
	width: 60px;
	height: 60px; 
	line-height: 63px;
	
}

.item:after {
	font-size: 1.5em;
	display: table-cell;
	content: attr(title);
	text-align: right;
	color: #583042;
	position: absolute;	
	opacity:1;
	background: #dbdbdb;
	line-height: 40px;
	bottom:0;
	top:auto;
	right: auto;
	border-radius: 0;
	width: 	440px;
	height: 40px;
}
.noLegende .item:after {
display: none;
}


.sub{
	text-transform: none;
	margin: 0 0 20px 20px;
	
	
}
.sub a{
	color:#555555;
	font-size: 1.4em;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
}

.subIllustrateurs{
	display: none;
}
.actif{
		color:#58585B;
	
}
.actifPuce:before{
	content: '\2022';
	margin-left: -16px;
	margin-right: 3px;
	font-size: 2em;
	}
h1, h2, h3{
	font-size: 1.8em;
	margin: 15px 0 10px 0;
	/*font-family: BrandonGrotesque-Bold;*/
	text-transform: uppercase;
	color:#583042;
	line-height: 1em;
	
}
h2{font-size: 1.9em;margin: 0;}

.bio{
line-height: 1.6em;
font-family: BrandonGrotesque-Thin;
font-size: 1.1em;

}


.bio .bottomLinks, .bio .bottomLinksBio{
	font-size: 0.8em;
	margin: 0 0 20px 0;
	
	}
	.bottomLinksBio a{
		color: #583042;
		font-family: BrandonGrotesque-Regular;
		font-size: 1.2em;
	}
.imgBio{
	padding: 20px 0;
	width: 600px;
	height: auto;
}
.contact .imgBio{
	padding-right:20px;
	width: 800px;
	height: auto;
}

.bio h2{
	font-family: BrandonGrotesque-Regular;
	font-size: 1.4em;
}
.bio p{
	font-size: 1em;
	line-height: 1.2em;
}
.contact{
	margin-left: 60px;
}

.bio{
	margin-left: 250px;
}
.contact p, .contact h2{
	margin-left: 60px;
	width: 700px;
}

.contact{
	margin-left: 60px;
}

.none{
display: none;
}
.itemNews{
	display: block;
	width: 100%;
	overflow: hidden;
	font-size: 1em;
}
.itemNews img{
	width: 100%;
	height: auto;
}
.itemLiens{
	display: block;
	width: 120px;
}
.itemNews img, .itemLiens{margin:0 0 15px 0;}
.itemNews h2, .out h2, itemLiens h2{
	font-size: 1.6em;
	margin: 0 0 3px 0;
	
}
.itemNews h3, .out h3{
	font-size: 1.2em;
	margin: 0 0 3px 0;
	
}

.date{
	margin: 0 0 15px 0;
	color:484748;
	font-size: 1.5em;
	font-family: BrandonGrotesque-Thin;
}

.out{
	font-size: 0.9em;
}
.out .date{
	color:#58585B;
}

.itemNews p, .out p, .itemLiens p{
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 0 0 25px 0;
	font-family: BrandonGrotesque-Thin;
}
.out{
	width: 100%;
	float: none;	
	margin: 80px 0;
	font-size: 2em;
	max-width: none;
}
.in{
	width: 100%;
	float: none;}
.in img{
	margin: 0 0 18px 0;
	width: 100%;
}
.navNews{
	text-transform: uppercase;
	font-size: 0.9em;
	float: right;
}
p {color:#908F8F;}

.foot{
	position: fixed;
	height: 80px;
	width: 100%;
	left: 0;
	bottom:0;
	background-color: #fff;
	z-index: 999;
}

.footerNav{
position: relative;
}
.ab{
	font-size: 1.5em;
	letter-spacing: 0.05em;
	color: #583042;	
	position: absolute;
	right:45px;
	left: auto;
	top:10px;
	line-height: 1.6em;
}
.bottomLinks{
	font-size: 1.8em;
	position: absolute;
	left:45px;
	top:22px;

}

.illuMenu{
	float: left;
	width: 250px;
	color:#735161;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
	
}

.decalage{
	margin-left: 250px;
	
}

.bgtitle{
	font-size: 1.4em;
	margin: 0 0 10px 0;
	display: block;
	font-family: 'BrandonGrotesque-Regular';
}
.nomobile, .nophone{
	visibility: hidden;
	display: none;
}

.full{
	width: 100%;
	-moz-column-count:2;
	-webkit-column-count:2;
	-o-column-count:2;
	column-count:2;
	margin: 50px 0 250px 0;
	font-size: 2.5em;
}

}

/* #### iphone paysage */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
/* ######################################################################################################################################################################## */
@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px) and (orientation : landscape)  {
	
 body{
	font-family: BrandonGrotesque-Regular;
	background-color: #fff;
	font-size: 100%;
}
.page{
	margin:20px 40px;
}
a{
	text-decoration: none;
	color:#583042;
}
a:hover{
	text-decoration: none;
}
.main{margin:0 0 33px 0;}
.main img{width: 200px;height:auto;}
.left{
	width: 250px;
	font-size: 0.8em;
	line-height: 1.18em;
	float: left;
	margin-right: 40px;
}
.right{
	margin-left: 0px;
	/*margin-bottom: 1250px;*/
	
}

.mainNav{
text-transform: uppercase;
position: absolute;
top:75px;
left: 103px;
font-size: 1.5em;
color: #583042;

}
.mainNav li{
display: inline;
margin-right: 15px;
}
.bottomLinks, .bottomLinksBio{
	text-transform: uppercase;
	margin:15px 0 0 0;
}
.bottomLinks li, .bottomLinksBio li{
display:inline;
}
.bottomLinks li + li:before, .bottomLinksBio li + li:before{
    content: "/ ";
    padding: 0 5px;
}
.fb{
	position: fixed;
	bottom:5px;
	left:255px;
}
.item img {
	width: 285px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.double img {
	width: 280px;
	height: auto;
	display: block;
	margin:8px 0;
	float:left;
}
.new:before {
	font-size: 0.9375em;
	display: block;
	content: 'NEW';
	text-align: center;
	color: #583042;
	position: absolute;	
	opacity:0.85;
	background: #FFF;
	top: 20px;
	right: 20px;
	border-radius: 50%;
	width: 60px;
	height: 60px; 
	line-height: 63px;
	
}

.item:after {
	font-size: 0.9375em;
	display: table-cell;
	content: attr(title);
	text-align: right;
	color: #583042;
	position: absolute;	
	opacity:1;
	background: #dbdbdb;
	line-height: 25px;
	bottom:0;
	top:auto;
	right: auto;
	border-radius: 0;
	width: 	285px;
	height: 25px;
	padding-right: 0;
	margin-right: -10px;
}
.noLegende .item:after {
display: none;
}


.sub{
	text-transform: none;
	margin: 0 0 20px 20px;
	
	
}
.sub a{
	color:#555555;
	font-size: 1.4em;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
}

.subIllustrateurs{
	display: none;
}
.actif{
		color:#58585B;
	
}
.actifPuce:before{
	content: '\2022';
	margin-left: -16px;
	margin-right: 3px;
	font-size: 2em;
	}
h1, h2, h3{
	font-size: 1.8em;
	margin: 15px 0 10px 0;
	/*font-family: BrandonGrotesque-Bold;*/
	text-transform: uppercase;
	color:#583042;
	line-height: 1em;
	
}
h2{font-size: 1.9em;margin: 0;}

.bio{
line-height: 0.8em;
font-family: BrandonGrotesque-Thin;
font-size: 1.1em;

}


.bio .bottomLinks, .bio .bottomLinksBio{
	font-size: 0.8em;
	margin: 0 0 20px 0;
	
	}
	.bottomLinksBio a{
		color: #583042;
		font-family: BrandonGrotesque-Regular;
		font-size: 1.2em;
	}
.imgBio{
	padding-right: 20px;
	width: 30%;
	height: auto;
	float: left;
	padding-bottom: 900px;
}
.contact .imgBio{
	padding-right:20px;
	width: 40%;
	height: auto;
	float: left;
	padding-bottom: 900px;
}

.bio h2{
	font-family: BrandonGrotesque-Regular;
	font-size: 1.4em;
}
.bio p{
	font-size: 1em;
	line-height: 1.2em;
}
.contact{
	margin-left: 60px;
}

.bio{
	margin-left: 250px;
}
.contact p, .contact h2{
	margin-left: 60px;
	width: 700px;
}

.contact{
	margin-left: 60px;
}

.none{
display: none;
}
.itemNews{
	display: block;
	width: 	285px;
	overflow: hidden;
	font-size: 1em;
}
.itemNews img{
	width: 	285px;
	height: auto;
}
.itemLiens{
	display: block;
	width: 120px;
}
.itemNews img, .itemLiens{margin:0 0 15px 0;}
.itemNews h2, .out h2, itemLiens h2{
	font-size: 1.6em;
	margin: 0 0 3px 0;
	
}
.itemNews h3, .out h3{
	font-size: 1.2em;
	margin: 0 0 3px 0;
	
}

.date{
	margin: 0 0 15px 0;
	color:484748;
	font-size: 1.5em;
	font-family: BrandonGrotesque-Thin;
}

.out{
	font-size: 0.9em;
}
.out .date{
	color:#58585B;
}

.itemNews p, .out p, .itemLiens p{
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 0 0 25px 0;
	font-family: BrandonGrotesque-Thin;
}
.out{
	float: right;
	max-width: 400px;
	width: 30%;
}
.in{
	width: 70%;
}
.in img{
	margin: 0 0 18px 0;
	width: 	300px;
}
.navNews{
	text-transform: uppercase;
	font-size: 0.9em;
}
p {color:#908F8F;}

.foot{
	position: fixed;
	height: 60px;
	width: 100%;
	left: 0;
	bottom:0;
	background-color: #fff;
	z-index: 999;
}

.footerNav{
position: relative;
}
.ab{
	font-size: 1.5em;
	letter-spacing: 0.05em;
	color: #583042;	
	position: absolute;
	left:40px;
	top:10px;
	line-height: 1.3em;
}
.bottomLinks{
	font-size: 1.2em;
	position: absolute;
	left:350px;
	top:10px;

}

.illuMenu{
	float: left;
	width: 250px;
	color:#735161;
	line-height: 1.2em;
	font-family: 'BrandonGrotesque-Thin';
	
}

.decalage{
	margin-left: 250px;
	
}

.bgtitle{
	font-size: 1.4em;
	margin: 0 0 10px 0;
	display: block;
	font-family: 'BrandonGrotesque-Regular';
}
.nomobile{
	visibility: hidden;
	display: none;
}


}