* {
	font-family:Arial;
	font-size:11px;
	line-height:16px;
	color:#000000;
	outline:none;
	text-decoration:none;
	border-style:none;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

body
{
	margin: 0;
	padding: 0;
}

#global, #header {width:calc(100% - 100px);margin:auto;}
.liste {padding-left:400px;}
.page.video {
	overflow:hidden;
	height:calc(9 / 16 * (100vw - 100px)) !important;
}


@media screen and (max-width: 1260px) {
	#global, #header {width:calc(100% - 100px);margin:auto;}
	.liste {padding-left:400px;}
#navigation, #tools {left:auto;right:10px;}
.page.video {
	overflow:hidden;
	height:calc(9 / 16 * (100vw - 100px)) !important;
}
}


#global {
	position:relative;
	margin:auto;

}

#navigation {
	
	position:fixed;
	bottom:18px;
	right:8px;
	width:30px;
	z-index:10;
	text-align:center;
}

#next.top {transform: rotate(180deg);}

#tools {
	position:absolute;
	right:0px;
	bottom:10px;
	z-index:10;
	text-align:center;
	}



#navigation, #navigation span, #tools, #tools span {
	font-size:14px;
}

.vertical a.text {
	-ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

#header {
	position:fixed;
	height:154px;
	margin-bottom:0px;
	top:0px;
	z-index:100;
	background-color:white;
	overflow:hidden;
	padding-top:40px;
	border-bottom-style:solid;
	border-width:1px;
	border-color:#a0a0a0;	
	
	 -webkit-transition: padding 0.3s, height 0.5s;
    -moz-transition: padding 0.3s, height 0.5s;
    transition: padding 0.3s, height 0.5s;
	
	
}

.front #header {
	border-bottom-style:none;	
	background-color:transparent;
}

.minimized #header {
	paadding-top:13px;
	height:68px;
}


a.logo:hover, a.logo:hover span {
	color:#a0a0a0 !important;
}

#menu {
	position:absolute;
	bottom:10px;
	left:426px;
}


body.pages .image img {padding-left:450px !important;}
#texte .textes:not(.textnews) {padding-left:450px !important;}

.minimized  #header #menu, .minimized  #header #tools {
	bottom:11px;
}
#menu a, #tools a {
	float:left;
	margin-left:24px;
	text-transform:uppercase;
	color:#a0a0a0;
	}


	
#menu a:hover, #tools a:hover, #menu a.current {
		color:black;
		}	

#baseline {
	position:fixed;
	top:200px;
	width:340px;
	margin-right:23px;
	font-size:36px;
	line-height:44px;
	z-index:100;
	
	-webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    transition: top 0.5s;
	
}

#baseline .verticalhidden {
	font-size:36px;
	line-height:44px;
}

.minimized  #baseline {
	top:80px;
}

.vignettes {
	display:block;
	position:relative;
	float:left;
	margin:0px;
	margin-bottom:68px;
}
.liste {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
	}

a.vignettes {
	width:calc((100% - 200px) / 4) ;
	margin-left:50px;
	display: flex;
    flex-direction: column;	
}
@media screen and (min-width: 2500px) {
	a.vignettes {
	width:calc((100% - 250px) / 5) ;
	margin-left:50px;
	display: flex;
    flex-direction: column;	
	}
}

@media screen and (max-width: 1800px) {
	a.vignettes {
	width:calc((100% - 150px) / 3) ;
	margin-left:50px;
	display: flex;
    flex-direction: column;	
	}
}





a.vignettes:hover {
	border-color:black !important;
}

a.editor, a.newslink {
	color:#a0a0a0;
}
a.editor:hover, a.newslink:hover {
	color:black !important;
}

.page div.vignettes {
	
	margin-left:0px !important;
	margin-right:24px;
	}


.vignettes img {
	width:100%;
	min-height:1px;
	height:auto;
	border-style:solid;
	border-width:1px;
	border-color:#a0a0a0;
	margin-bottom:10px;
}

.vignettes .title, .vignettes .title * {
	color:#a0a0a0;
	font-size: 13px;
    line-height: 18px;
	}
.vignettes:hover .title, .vignettes:hover .title * {
	color:black;
	}


.page.video iframe {
	position:absolute;
	width:calc(100% + 10px);
	height:calc(100% + 10px);
	top:-5px;
	left:-5px;
}

a.vignettes:hover img {
	border-color:black;
}


#baseline a.ancre {
	display:block;
	color:#a0a0a0;
	margin-top:18px;
	font-size:16px;
	line-height:18px;
	letter-spacing:1px;
}

#baseline a.ancre:hover {
	color:black;
}


.signature {
	color:black;
	margin-top:34px;
	font-size:16px;
	line-height:20px !important;
	letter-spacing:1px;
}

#texte {
	position:relative;
	margin-top:154px;
}

#texte .liste {
	padding-top:50px;
}

#texte h2.title {
	position:absolute;
	font-size:36px;
	line-height:44px;
	font-weight:normal;
	margin-top:90px;
	margin-left:24px;
	top:0px;
	left:0px;
	z-index:10;
}

#texte h2.title a {
	font-size: 36px;
	line-height: 44px;
}



#texte .page {
	clear:both;
	position:relative;
	margin-bottom:50px;
	text-align:right;
	cuuuursor:pointer;
}

#texte .page.footer {
	cursor:initial;
}

#texte .lignes {
	border-bottom-style:solid !important;
	border-width:1px !important;
	border-color:#a0a0a0 !important;
}
#texte .page:last-child {
	margin-bottom:0px;
	}
	
#texte .page img.pages {
	display:block;
	width:100%;
	height:auto;
	z-index:1;
}


#texte .caption {
	font-size:36px;
	line-height:44px;
	margin-left:300px;
	color:#a0a0a0;
	overflow:hidden;
}


#texte .textes {
	text-align:left !important;
	padding-top:40px;
}

#texte .textnews {
	position:absolute;
	z-index:10;
	left:0px;
	top:0px;
}

#texte .textes h1, #texte .textes h2, #texte .textes h3, #texte .textes h4, #texte .textes p, #texte .textes p * {
	text-align:left !important;
	width:650px;
	max-width:100%;
	font-size:14px;
	line-height:19px;
	}
	
#texte .textes p {
	margin:0px;
}

#texte .textes p a {
	color:#a0a0a0;
	}
#texte .textes p a:hover {
	color:black;
	}

#texte .textes h1  {
	font-size:36px;
	line-height:44px;
	font-weight:normal;
}

#texte .textes h2, #texte .textes h2 a  {
	font-size:32px;
	line-height:40px;
	font-weight:normal;
	color:#a0a0a0;
	width:400px;
}

#texte .textes input#search {
	font-size:16px;
	line-height:18px;
	font-weight:normal;
	color:#a0a0a0;
	width:400px;
	border-style:none;
	border-top-style:solid;
	border-bottom-style:solid;
	border-width:1px;
	border-color:white;
}

.vignettescat {margin-top:36px;}

#texte .textes h3, #texte .textes h3 a, #texte .liste h3, #texte .liste h3 a, .vignettescat h3 a  {
	font-size:16px;
	line-height:18px;
	font-weight:normal;
	color:#a0a0a0;
}

#texte .textes h3, #texte .textes h3 a:hover, #texte .textes input#search:hover, #texte .liste h3, #texte .liste h3 a:hover, #texte .liste h3 a.current, .vignettescat h3 a:hover, .vignettescat h3 a.current {
	color:black;
}

#texte .textes input#search:hover {
	background-image:url(../img/search.png);
	background-repeat:no-repeat;
	background-position:right;
	border-color:#a0a0a0;
}

#texte .textes hr {
	width:40px;
	border-bottom-style:solid !important;
	border-top-style:solid !important;	
	border-width:1px !important;
	border-color:black;
	margin:0px;
	padding:0px;
	margin-top:12px;
	margin-bottom:12px;
	text-align:left !important;
}


.vertical a {
	display:block;
	color:black;
	}
	
.vertical a:hover {
	color:#a0a0a0;
	}	

.vertical a.current {
	color:white;
}

.vertical a.text {
	line-height:60px;
}

.vertical .ancre {

	width:7px;
	height:7px;
	margin-top:10px;
	margin-left:1px;
	background-color:#e5e5e5;
}

.vertical .bottom {
	margin-top:10px;
	margin-left:-4px;
}

.vertical .ancre:hover, .vertical .ancre.current {
	background-color:#808080;
}

#navigation #next, #navigation #previous {
	font-size:30px;
	padding:4px;
	text-align:center;	
}



#share {
	
}

#share a {
	float:left;
	margin-right:70px;
}

#share a img {
	width:30px;
}

.toolsbox {
	position:fixed;
	top:152px;
	right:100px;
	width:300px;
	padding:30px;
	padding-bottom:90px;
	background-color: rgba(255, 255,255, 0.8);
	z-index:100;
	font-size:14px;
	text-transform:uppercase;
	display:none;
}

.minimized .toolsbox {top:60px;}

.toolsbox.visible {display:block;}

.toolsbox .share a {display:inline-block;margin-right:6px;}
.toolsbox .share img {width: 30px;height:auto;min-height:1px;}
.toolsbox .close {position:absolute;top:10px;right:10px;font-size:18px;}
.toolsbox h4 {margin:0px;margin-top:30px;}
.toolsbox h4:first-of-type {margin-top:0px;}
.toolsbox a {color:#a0a0a0;}
.toolsbox a:hover {color:black;}

#footer {
	
	margin-top:50px;
	font-size:10px;
	line-height:15px;
	font-weight:normal;
	color:#a0a0a0;
	border-top-style:solid;
	border-width:1px;
	border-color:#a0a0a0;
	text-transform:uppercase;
	padding-top:8px;
	margin-bottom:50px;
}



#step.list {
	padding-top:100px;
}


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



#texte h2.title, #texte h2.title a, #baseline, #texte .textes h1 {
	font-size:30px;
	line-height:38px;
}

#baseline {
	width:300px;
}
#texte .textes h1 {
	width:450px;
}

#texte .textes h3, #texte .textes h3 a, #texte .liste h3, #texte .liste h3 a , .signature {
	font-size:14px;
	line-height:16px;
}

#navigation a, #menu a, #tools a {
	font-size:10px;
}

#baseline .vignettescat h3 {margin-bottom:15px;}

}
@media screen and (min-width:801px) and (max-width:1024px) {
	/*#texte .textes {padding-left:42vw !important};*/

}

@media screen and (min-width: 800px) {
.mobile {display:none;}
}


@media screen and (max-width: 800px) {
	#global, #header {
    width: calc(100vw - 26px);
    margin: auto;
	}
	#texte .liste {
    margin-left:0px;
	margin-right:0px;
	}
	a.vignettes {
	width:calc(50% - 10px);
	margin-left:5px;
	margin-right:5px;
	margin-bottom:40px;
	display: flex;
    flex-direction: column;	
	}
	
	#header {padding:4vw 3vw;}
	
	#baseline {left:3vw;}
	.vignettescat {margin-top:20px;}
	#baseline .vignettescat h3 {width:auto;margin-right:10px;margin-bottom: 10px;}
	
	.signature {margin-top: 34px;}


	#header {
		position:fixed;
		height:auto;
		overflow:hidden;
		background-color:white;
		z-index:9999;
		
		width:100vw;
		left:0;
		padding:20px 18px;
		}
	#header.open {
		height:466px;
		}
	
	#header #menu {
		bottom:auto;
		left:16px;
		top:70px;
		}
	
	
	
	#header #menu a, #header #tools a{
		float:none;
		display:block;
		font-size:11px;
		line-height:20px;
		margin-left:0px;
		margin-bottom:12px;
		}
	
	#baseline {
   		position:relative;
   		top:auto;
   		margin-top:70px;
   		left:0px;
    	width: calc(100vw - 48px);
		margin-right:0;
		font-size: 18px;
		line-height: 22px;
		z-index: 100;
		-webkit-transition: top 0.5s;
		-moz-transition: top 0.5s;
		transition: top 0.5s;
		}
	#texte h2.title {margin-left:0 !important;}	
	
	.page.video {height: calc(9 / 16*(100vw - 45px)) !important;}
	
	#baseline .verticalhidden {font-size: 18px;line-height: 22px;}
	#texte .page {margin-bottom: 15px;}
	#texte .textes h3, #texte .textes h3 a, #texte .liste h3, #texte .liste h3 a, .vignettescat h3 a  {font-size:14px;line-height:16px;}
	#texte {margin-top:10px;}
	.news #texte {margin-top:70px;}
	#texte .liste {padding-top:10px;}
	#texte .textnews {padding-left:0 !important;}
	.page {height:auto !important;}
	
	.page.image img, #texte .page img.pages {
		position:relative !important;
		right:auto !important;
		width:100% !important;
		height:auto !important;
		}
		
	.page .vignettes {
		margin:0 0 40px 12px;
		width:calc(48vw - 24px);
		float:left;
	}
	.page .textes {padding:12px !important;}
	.page.footer {height:auto !important;}
	
	#texte .textnews {position:relative;top:auto;width:100%;}
	#texte .textes h1 {width:auto;font-size:20px;line-height:22px;}
	
	#share {position:relative;bottom:auto;margin-top:30px;clear:both;}

	#footer {
	clear:both;
	position:relative;
	bottom:auto;
    font-size: 10px;
    line-height: 15px;
    font-weight: normal;
    padding-top: 8px;

    margin:30px 0px 20px 0px !important;
	}
	.vignettescat h3 {float:left;margin-right:22px;}

	.vertical {display:none;}
	
	
	#navigation.mobile {
		position:absolute;
		bottom:30px;
		right:0px;
		width:auto;
		text-align:right;
	}
	
	#navigation.mobile a {display:inline-block;margin-left:8px;font-size:10px;font-weight:bold;}
	

	
	
	.hamburger-menu {
	position:absolute;
	right:14px;
	top:18px;
	width: 30px;
    height: 15px;
    cursor: pointer;
    display: block;
	}
	
	.bar {
    position: relative;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    background: #000000;
    -webkit-transition: all 0ms 300ms;
    transition: all 0ms 300ms;
	}
	
	.bar, .bar:after, .bar:before {
    width: 30px;
    height: 1px;
	}
	
	.bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    background: #000000;
    -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23,1,0.32,1),-webkit-transform 300ms cubic-bezier(0.23,1,0.32,1);
    transition: bottom 300ms 300ms cubic-bezier(0.23,1,0.32,1),-webkit-transform 300ms cubic-bezier(0.23,1,0.32,1);
    transition: bottom 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1);
    transition: bottom 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1),-webkit-transform 300ms cubic-bezier(0.23,1,0.32,1);
	}
	
	.bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    background: #000000;
    -webkit-transition: top 300ms 300ms cubic-bezier(0.23,1,0.32,1),-webkit-transform 300ms cubic-bezier(0.23,1,0.32,1);
    transition: top 300ms 300ms cubic-bezier(0.23,1,0.32,1),-webkit-transform 300ms cubic-bezier(0.23,1,0.32,1);
    transition: top 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1);
    transition: top 300ms 300ms cubic-bezier(0.23,1,0.32,1),transform 300ms cubic-bezier(0.23,1,0.32,1),-webkit-transform 300ms cubic-bezier(0.23,1,0.32,1);
	}
	
	#texte .textes:not(.textnews) {
    padding-left: 0px !important;
	padding-right: 0px !important;

}
body.pages .image img {
    padding-left:0px !important;
}
}


/* socials en mobile */

#menu #share a {display:inline-block;margin-right:10px;margin-bottom:0px;}
#menu #share {margin-top:50px;}
#menu #share h4 {display:none;padding-top:0 !important;}

@media screen and (max-width: 680px) {
	.hamburger-menu {
    right: 12px;
    top: 18px;
    width: 24px;
    height: 12px;
}
	.bar, .bar:after, .bar:before {
		width: 24px;
		height: 2px;
	}
	
	#global {
    wiidth: calc(100vw - 16px);
	}
	#texte .liste {margin-left:-5px;margin-right:-5px;width:calc(100% + 10px);}
	
	#header {padding-left:12px;}
}

@media screen and (max-width: 390px) {
	aa.logo span {font-size: 10px !important;line-height: 15px !important;}

}

@media screen and (max-width: 390px) {
	.logo .studio {display:none;}
}
@media screen and (orientation:portrait) {
	
	#texte h2.title {margin-left:3vw;position:relative;}
}


.clearfix {clear:both;}

@media screen and (max-width: 800px) {
.page, #texte{width:100%;max-width:100vw}

#tools {display:none;}

.liste {width:100%;padding-left:0px !important;}
.page {height:75vw;}
}
@media screen and (min-width: 1800px) {
	.liste {padding-left:600px;}
	#texte .textes:not(.textnews) {padding-left: 650px !important;}
	#menu {left:626px;}
}