/*
Theme Name: BDNext | Atelier d'illustration HEAR Strasbourg (2015-2026)
Author URI: http://www.michelravey.com
Description: /// michelravey.com 2026 /// BDnext | Atelier d'illustration HEAR Strasbourg
Author: Michel Ravey
Version: 5.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Tags: responsive, artist, modern, stylish, minimalist, custom
Copyright: (c) 2015-2026 michelravey.com
*/

/* 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,font,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;text-align:left;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus {outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
p { margin-bottom:12px; }
body { margin:0;background-color:#fff; }
body, html { width:100%; }

.clear { clear:both; }
/*p {margin: 12px 0;}*/
/*ol, ul {padding-left: 40px; margin: 12px 0;}*/
ol {list-style: decimal;}
ul {list-style: square;}

/* CLEAR */
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#noFloat { clear:both; }

/*-------------------------------------------------------
--------------------------------------------------------/ |
|           CUSTOM - mravey feb2016                     | |
--------------------------------------------------------*/

body { margin:0; }
body, html { width:100%; }
.clear { clear:both; }
#temoin { position:fixed;z-index:10000;right:30px;top:30px;height:auto;background-color:#f9f9f9;opacity:0.8;padding:10px; }
::selection { 
background:#f8b00a; 
color:#665718; 
} 

::-moz-selection { 
background:#f8b00a; 
color:#665718; 
} 

::-webkit-selection { 
background:#f8b00a; 
color:#665718; 
}

@font-face {
    font-family: 'pier_sansbold_italic';
    src: url('fonts/PierSans-web/pier-bold-italic-webfont.eot');
    src: url('fonts/PierSans-web/pier-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PierSans-web/pier-bold-italic-webfont.woff2') format('woff2'),
         url('fonts/PierSans-web/pier-bold-italic-webfont.woff') format('woff'),
         url('fonts/PierSans-web/pier-bold-italic-webfont.ttf') format('truetype'),
         url('fonts/PierSans-web/pier-bold-italic-webfont.svg#pier_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pier_sansbold';
    src: url('fonts/PierSans-web/pier-bold-webfont.eot');
    src: url('fonts/PierSans-web/pier-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PierSans-web/pier-bold-webfont.woff2') format('woff2'),
         url('fonts/PierSans-web/pier-bold-webfont.woff') format('woff'),
         url('fonts/PierSans-web/pier-bold-webfont.ttf') format('truetype'),
         url('fonts/PierSans-web/pier-bold-webfont.svg#pier_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pier_sansitalic';
    src: url('fonts/PierSans-web/pier-italic-webfont.eot');
    src: url('fonts/PierSans-web/pier-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PierSans-web/pier-italic-webfont.woff2') format('woff2'),
         url('fonts/PierSans-web/pier-italic-webfont.woff') format('woff'),
         url('fonts/PierSans-web/pier-italic-webfont.ttf') format('truetype'),
         url('fonts/PierSans-web/pier-italic-webfont.svg#pier_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pier_sansregular';
    src: url('fonts/PierSans-web/pier-regular-webfont.eot');
    src: url('fonts/PierSans-web/pier-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/PierSans-web/pier-regular-webfont.woff2') format('woff2'),
         url('fonts/PierSans-web/pier-regular-webfont.woff') format('woff'),
         url('fonts/PierSans-web/pier-regular-webfont.ttf') format('truetype'),
         url('fonts/PierSans-web/pier-regular-webfont.svg#pier_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ek_muktabold';
    src: url('fonts/EkMukta-web/ekmukta-bold-webfont.eot');
    src: url('fonts/EkMukta-web/ekmukta-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/EkMukta-web/ekmukta-bold-webfont.woff2') format('woff2'),
         url('fonts/EkMukta-web/ekmukta-bold-webfont.woff') format('woff'),
         url('fonts/EkMukta-web/ekmukta-bold-webfont.ttf') format('truetype'),
         url('fonts/EkMukta-web/ekmukta-bold-webfont.svg#ek_muktabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ek_muktaextrabold';
    src: url('fonts/EkMukta-web/ekmukta-extrabold-webfont.eot');
    src: url('fonts/EkMukta-web/ekmukta-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/EkMukta-web/ekmukta-extrabold-webfont.woff2') format('woff2'),
         url('fonts/EkMukta-web/ekmukta-extrabold-webfont.woff') format('woff'),
         url('fonts/EkMukta-web/ekmukta-extrabold-webfont.ttf') format('truetype'),
         url('fonts/EkMukta-web/ekmukta-extrabold-webfont.svg#ek_muktaextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ek_muktaextralight';
    src: url('fonts/EkMukta-web/ekmukta-extralight-webfont.eot');
    src: url('fonts/EkMukta-web/ekmukta-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/EkMukta-web/ekmukta-extralight-webfont.woff2') format('woff2'),
         url('fonts/EkMukta-web/ekmukta-extralight-webfont.woff') format('woff'),
         url('fonts/EkMukta-web/ekmukta-extralight-webfont.ttf') format('truetype'),
         url('fonts/EkMukta-web/ekmukta-extralight-webfont.svg#ek_muktaextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ek_muktalight';
    src: url('fonts/EkMukta-web/ekmukta-light-webfont.eot');
    src: url('fonts/EkMukta-web/ekmukta-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/EkMukta-web/ekmukta-light-webfont.woff2') format('woff2'),
         url('fonts/EkMukta-web/ekmukta-light-webfont.woff') format('woff'),
         url('fonts/EkMukta-web/ekmukta-light-webfont.ttf') format('truetype'),
         url('fonts/EkMukta-web/ekmukta-light-webfont.svg#ek_muktalight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ek_muktamedium';
    src: url('fonts/EkMukta-web/ekmukta-medium-webfont.eot');
    src: url('fonts/EkMukta-web/ekmukta-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/EkMukta-web/ekmukta-medium-webfont.woff2') format('woff2'),
         url('fonts/EkMukta-web/ekmukta-medium-webfont.woff') format('woff'),
         url('fonts/EkMukta-web/ekmukta-medium-webfont.ttf') format('truetype'),
         url('fonts/EkMukta-web/ekmukta-medium-webfont.svg#ek_muktamedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ek_muktaregular';
    src: url('fonts/EkMukta-web/ekmukta-regular-webfont.eot');
    src: url('fonts/EkMukta-web/ekmukta-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/EkMukta-web/ekmukta-regular-webfont.woff2') format('woff2'),
         url('fonts/EkMukta-web/ekmukta-regular-webfont.woff') format('woff'),
         url('fonts/EkMukta-web/ekmukta-regular-webfont.ttf') format('truetype'),
         url('fonts/EkMukta-web/ekmukta-regular-webfont.svg#ek_muktaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ek_muktasemibold';
    src: url('fonts/EkMukta-web/ekmukta-semibold-webfont.eot');
    src: url('fonts/EkMukta-web/ekmukta-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/EkMukta-web/ekmukta-semibold-webfont.woff2') format('woff2'),
         url('fonts/EkMukta-web/ekmukta-semibold-webfont.woff') format('woff'),
         url('fonts/EkMukta-web/ekmukta-semibold-webfont.ttf') format('truetype'),
         url('fonts/EkMukta-web/ekmukta-semibold-webfont.svg#ek_muktasemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rafalebg';
    src: url('fonts/Rafale-web/rafale_bg-webfont.eot');
    src: url('fonts/Rafale-web/rafale_bg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Rafale-web/rafale_bg-webfont.woff2') format('woff2'),
         url('fonts/Rafale-web/rafale_bg-webfont.woff') format('woff'),
         url('fonts/Rafale-web/rafale_bg-webfont.ttf') format('truetype'),
         url('fonts/Rafale-web/rafale_bg-webfont.svg#rafalebg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Karla-Regular';
    src: url('fonts/Karla-web/Karla-Regular.eot');
    src: url('fonts/Karla-web/Karla-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Karla-web/Karla-Regular.woff2') format('woff2'),
        url('fonts/Karla-web/Karla-Regular.woff') format('woff'),
        url('fonts/Karla-web/Karla-Regular.ttf') format('truetype'),
        url('fonts/Karla-web/Karla-Regular.svg#Karla-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Karla-Bold';
    src: url('fonts/Karla-web/Karla-Bold.eot');
    src: url('fonts/Karla-web/Karla-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Karla-web/Karla-Bold.woff2') format('woff2'),
        url('fonts/Karla-web/Karla-Bold.woff') format('woff'),
        url('fonts/Karla-web/Karla-Bold.ttf') format('truetype'),
        url('fonts/Karla-web/Karla-Bold.svg#Karla-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*---------------------------------------------------*/
/*                                                   */
/*     HEADER                                        */
/*                                                   */
/*---------------------------------------------------*/

#header_container {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:1680px;
	height:265px;
	z-index:10001;
	transition: width 0.2s;
	-moz-transition: width 0.2s;
	-webkit-transition: width 0.2s;
	-o-transition: width 0.2s;
	border:solid 1px #fff;
}
#header_presents {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
	margin-top:65px;
	width:380px;
	z-index:9999;
	font-family: 'Raleway', sans-serif;
	font-size:12px;font-weight:200;
	text-transform: uppercase;
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-o-transition: opacity 1s;
	border:solid 0px #000;
}
#header_bottom_stroke {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:380px;height:8px;background-color:#000;
	z-index:9999;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	border:solid 0px #000;
}
#header_logo {
	background-image: url(imgs/logo-bdnext-250.png);
	background-repeat: no-repeat;
	background-size:contain;
	background-position:center center;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	margin-bottom:30px;
	width:380px;
	height:155px;
	z-index:9999;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	border:solid 0px #fff;
}

#header_menu_icon {
	background-image: url(imgs/menu_icon.png);
	background-repeat: no-repeat;
	background-size:contain;
	background-position:center top;
	height: 70px;
	width: 60px;
	position: absolute;
	top:107px;left: 0;
	z-index:10001;
	opacity:0.2;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
}

#header_menu_close_icon {
	background-image: url(imgs/menu_close_icon.png);
	background-repeat: no-repeat;
	background-size:contain;
	background-position:center top;
	height: 70px;
	width: 60px;
	position: absolute;
	right:30px;top:50px;
	z-index:10000;
	opacity:0.2;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
}
#header_menu_close_icon_phone {
	background-image: url(imgs/menu_close_icon.png);
	background-repeat: no-repeat;
	background-size:contain;
	background-position:center top;
	height: 70px;
	width: 60px;
	position: absolute;
	right:30px;top:50px;
	z-index:10000;
	display:none;
	opacity:0.2;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	
}

#header_logo_hear {
	background-image: url(imgs/logo_hear.png);
	background-repeat: no-repeat;
	background-size:contain;
	background-position:center top;
	height: 70px;
	width: 75px;
	position: absolute;
	top:107px;right: 0;
	z-index:1000;
	opacity:0.2;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
}

#header_menu_icon:hover { opacity:1;cursor:pointer;}
#header_menu_close_icon:hover { opacity:1;cursor:pointer;}
#header_logo:hover { opacity:1;cursor:pointer;}
#header_logo_hear:hover { opacity:1;cursor:pointer;}

.header_rubrique a:link { text-decoration:none;color:#999; }
.header_rubrique a:visited { text-decoration:none;color:#999; }
.header_rubrique a:hover { text-decoration:none;color:#000; }
.header_rubrique a:active { text-decoration:none;color:#000; }


/*---------------------------------------------------*/
/*                                                   */
/*     INDEX - SLIDER                                */
/*                                                   */
/*---------------------------------------------------*/


#slider_container {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:99.3%;
	max-width:1680px;
	height:700px;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	
	border-style:solid;
	border-width:1px;
	
	padding:0;margin-bottom:50px;
	/* DYNAMIC - ACF
	border:solid 1px #d0d568; 
	*/
}
.slider_container_faux_border { 
	position:absolute;z-index:100;
	right:0px;width:1px;height:100%;background-color:#000;
}
.slider_item { position:absolute;top:0;width:100%;height:700px;border:solid 0px #f6c;display:none; }
.slider_left { position:absolute;left:0;width:33%;height:100%;z-index:100;
	/* DYNAMIC - ACF
		border-right:solid 1px #000; 
	*/
}
.slider_left_content { position:absolute;top:12%;left:17%;width:66%;height:76%;overflow:auto; }
.slider_right { position:absolute;right:0;width:67%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center; }
.slider_right:hover { cursor:pointer; }
.sliderTitle {
	font-family: 'pier_sansbold';
	text-transform:uppercase;
	font-size:28px;
	color:#000;
	padding-top:5px;
}
.sliderName {
	font-family: 'ek_muktaextralight';
	margin-top:15px;
	font-size:28px;
	color:#000;
	text-transform:uppercase;
}
.sliderYear {
	font-family: 'ek_muktaextralight';
	margin-top:15px;
	font-size:24px;
	color:#999;
}
.sliderDescription {
	margin-top:40px;
	font-family: 'ek_muktaextralight';
	font-size:20px;
	color:#444;
	line-height:1.5em;
}
.sliderLink { 
	font-size:16px;
}

.slider_project { 
	position:absolute;bottom:0;left:50%;height:60px;width:50%;
	/* DYNAMIC - ACF
		border-top:solid 1px #000; 
	*/
 
	text-align:center; padding-top:40px;
	font-family: 'rafalebg';letter-spacing:0.3em;font-size:16px;text-transform: uppercase;
}
.slider_prev { 
	position:absolute;bottom:0;left:0;height:60px;width:25%;
	/* DYNAMIC - ACF
	border-right:solid 1px #d0d568;border-top:solid 1px #d0d568;
	*/
	text-align:center; padding-top:40px;
	background-image:url(imgs/arrow_left.png);background-repeat:no-repeat;background-position:center center; background-size:13%;
}
.slider_next { 
	position:absolute;bottom:0;left:25%;height:60px;width:25%;
	/* DYNAMIC - ACF
	border-right:solid 1px #d0d568;border-top:solid 1px #d0d568;
	*/
	text-align:center; padding-top:40px;
	background-image:url(imgs/arrow_right.png);background-repeat:no-repeat;background-position:center center; background-size:13%;
}
.slider_prev:hover, .slider_next:hover { cursor:pointer;opacity:0.7; }


#slider_container a:link { text-decoration:none;color:#000; }
#slider_container a:visited { text-decoration:none;color:#000; }
#slider_container a:hover { text-decoration:none;color:#999; }
#slider_container a:active { text-decoration:none;color:#999; }

/*---------------------------------------------------*/
/*                                                   */
/*     INDEX - DISPLAY MODE ICONS                    */
/*                                                   */
/*---------------------------------------------------*/
#index_display_mode {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:99.3%;
	max-width:1680px;
	height:44px;
	top:-20px;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	display:flex;
	justify-content:space-around;
}
.index_display_mode {
	width:60px;height:32px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center center;
	/*background-size:contain;*/
}
.index_display_mode:hover { cursor: pointer; }
#display_mode-random { background-image: url(imgs/icons/bdnext-icon-random-off.png); }
#display_mode-chrono { background-image: url(imgs/icons/bdnext-icon-chrono-off.png); }
#display_mode-alpha { background-image: url(imgs/icons/bdnext-icon-alpha-off.png); }
#display_mode-author { background-image: url(imgs/icons/bdnext-icon-author-off.png); }



/*---------------------------------------------------*/
/*                                                   */
/*     INDEX - GRID                                  */
/*                                                   */
/*---------------------------------------------------*/

#grid { position:relative;width:95%;margin-left:auto;margin-right:auto;padding-bottom:100px; }

.grid_row { position:relative;width:100%;height:auto;margin:0;padding:0; }
.grid_cell { 	
	background-color:#fff;position:relative;float:left;height:auto;margin-bottom:0px;
	filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1; 
	transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
}
.grid_cell:hover { filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9; }
.grid_cell img { width:100%;height:auto;margin:0;padding:0; }
.grid_cell_infos { 	
	background-color:#fff;position:relative;float:left;height:auto;margin-bottom:0px;
	filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1; 
	-webkit-transition: opacity 0.2s ease-in;	
	-moz-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}
.grid_cell_infos:hover { filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9; }
.grid_cell_infos img { width:100%;height:auto;margin:0;padding:0; }

#grid_thumbs_container { position:absolute;top:80px;left:0;z-index:10; }
#grid_infos_container { position:absolute;top:80px;left:0;z-index:20000; }
#grid_thumbs { position:relative;z-index:10; }
#grid_infos { position:relative;z-index:20; }
.grid_hover_container { position:absolute;top:0;left:0;background-color:#fff;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; }
.grid_hover { position:relative;display:table-cell;background-color:#fff;text-align:center;vertical-align: middle;padding:30px 30px 0 30px; }

.postTitle {
	font-family: 'pier_sansbold';
	text-transform:uppercase;
	font-size:28px;
	color:#000;
}
.postName {
	font-family: 'ek_muktaextralight';
	margin-left:10px;
	font-size:28px;
	color:#000;text-transform:uppercase;
}
.postYear {
	font-family: 'ek_muktaextralight';
	margin-left:10px;
	font-size:24px;
	color:#999;
}
.postDescription {
	font-family: 'ek_muktaextralight';
	margin-top:10px;
	font-size:20px;
	color:#444;
}
.postClick2Read {
	width:100%;height:100px;padding:0px;margin-top:20px;margin-right:auto;margin-left:auto;position:relative;
	background-image: url(imgs/fleche_anim.gif);
	background-repeat:no-repeat;
	background-position:center center;
	border:solid 0px #ddd;
	font-family: 'Lato', sans-serif;
	text-transform:uppercase;
	font-weight:900;
	font-size:12px;
	color:#888;
	filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;	
}
.postClick2Read:hover {
	border:solid 0px #000;
	color:#000;
	cursor:pointer;
	filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}

#grid_chrono, #grid_alpha { display:none; }
#grid_chrono, #grid_alpha {
	width:90%;max-width:1680px;margin:0 auto;
}


/*---------------------------------------------------*/
/*                                                   */
/*     INDEX - GRID Chrono                           */
/*                                                   */
/*---------------------------------------------------*/

.chrono-annee {
	position:relative;width:100%;
	border-bottom:solid 2px #f8b123;color:#7790c0;
	font-family: 'pier_sansbold';
	font-size:48px;
	padding:75px 0 15px 0;
}
.chrono-bloc {
	position:relative;height:auto;min-height:160px;width:45%;float:left;
	border-bottom:solid 0px #f0f0f0;margin:30px 1% 0 0;padding:5px 4% 5px 5px;
	background-color:#fff;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;

}
.chrono-bloc:hover { cursor:pointer;background-color:#fbfbfb; }
.chrono-vignette { 
	position:absolute;top:5px;left:5px;width:30%;
	background-color:#fff;
	/*
	background-repeat: no-repeat;
	background-position: left center;
	background-size:contain;*/
}
.chrono-vignette img { 
	width:100%;height:auto;
}
.chrono-infos {
	position:relative;top:0;left:0;width:100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding:10px 0 30px 40%;
}
.chrono-infos .postTitle { margin-top:0px;font-size:24px;line-height:1.2em; }
.chrono-infos .postName { padding:5px 0 10px 0;font-size:20px; }
.chrono-infos .postDescription { padding:5px 0 5px 0;font-size:18px;line-height:1.4em; }



/*---------------------------------------------------*/
/*                                                   */
/*     PAGE - ex A PROPOS                            */
/*                                                   */
/*---------------------------------------------------*/

#page { position:relative;width:95%;margin-left:auto;margin-right:auto;top:5px;padding-bottom:100px; }
#page_title { text-align:center; }

.page_content {
	position:relative;width:650px;
	margin-left:auto;margin-right:auto;
	font-family: 'ek_muktaextralight';
	font-size:24px;
	color:#444;
	line-height:1.2em;
	transition: width 0.2s;
	-moz-transition: width 0.2s;
	-webkit-transition: width 0.2s;
	-o-transition: width 0.2s;
}
.page_content a:link { text-decoration:none;color:#627bb3; }
.page_content a:visited { text-decoration:none;color:#627bb3; }
.page_content a:hover { text-decoration:none;color:#f7a400; }
.page_content a:active { text-decoration:none;color:#f7a400; }



/*---------------------------------------------------*/
/*                                                   */
/*     PAGE AUTEURS                                  */
/*                                                   */
/*---------------------------------------------------*/

#page_creators_content {
	position:relative;width:100%;
	margin-left:auto;margin-right:auto;
	font-family: 'ek_muktaextralight';
	font-size:16px;
	color:#444;
	line-height:1.5em;
	transition: width 0.2s;
	-moz-transition: width 0.2s;
	-webkit-transition: width 0.2s;
	-o-transition: width 0.2s;
}
#page_creators_content a:link { text-decoration:none;color:#627bb3; }
#page_creators_content a:visited { text-decoration:none;color:#627bb3; }
#page_creators_content a:hover { text-decoration:none;color:#f7a400; }
#page_creators_content a:active { text-decoration:none;color:#f7a400; }


.creator {
	position:relative;float:left;width:300px;height:auto;
	border:solid 1px #efefef;
	margin:10px;
	font-size:16px;
}

.creator img {
	position:relative;float:left;width:180px;height:auto;
}




.aPropos_work {
	position:relative;float:left;width:350px;height:450px;
	overflow:auto;
	padding: 25px 20px 10px 20px;
	margin:5px;
	background-color:#fff;
	border:solid 4px #f9f9f9;
	transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;	
/*	-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;*/
	
}




.aPropos_separator { 
	width: 50px;height: 1px;border-bottom:solid 1px #999;z-index:1000;
	position:relative;margin:15px auto 15px auto;
}
.aPropos_workInfo {
	position:relative;padding-bottom:15px;
	/*font-family: 'Source Sans Pro', sans-serif;*/
	font-family: 'ek_muktaextralight';
	font-size:14px;
	
}
.aPropos_author {
	margin-bottom:50px;
	color:#000;
	font-family: 'pier_sansbold';
	text-transform:uppercase;
	font-size:20px;
	
}
.aPropos_authorInfo {
	position:relative;margin-bottom:50px;
	font-family: 'ek_muktaextralight';
	font-size:18px;
	
}
.aPropos_workName {
	margin-left:10px;
	font-weight:400;
	font-size:14px;
	color:#000;
}
.aPropos_workTitle {
	font-family: 'pier_sansbold';
	text-transform:uppercase;
	font-size:14px;
	color:#000;
}
.aPropos_workYear {
	margin-left:5px;
	font-family: 'ek_muktaextralight';
	font-size:16px;
	color:#999;
}

.aPropos_workCopy {
	position:relative;
	font-family: 'ek_muktaextralight';
	font-size:16px;
	color:#444;
	line-height:1.5em;
	margin-bottom:30px;
	
}
.aPropos_workThumb:hover { 
	filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;
}
.aPropos_workThumb {
	width: 250px;
	height: auto;z-index:1000;
	position:relative;
	filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;
	transition: width 0.2s, height 0.2s;
	-moz-transition: width 0.2s, height 0.2s;
	-webkit-transition: width 0.2s, height 0.2s;
	-o-transition: width 0.2s, height 0.2s;	
}
.aPropos_workThumb img {
	width:100%;height:auto;
}



/*---------------------------------------------------*/
/*                                                   */
/*     PAGE EN CHIFFRES                              */
/*                                                   */
/*---------------------------------------------------*/

	.page-en-chiffres { font-family: 'Karla-Regular';font-size:2em;line-height:1em; }
	.page-en-chiffres a:link { text-decoration:none;color:#777; }
	.page-en-chiffres a:visited { text-decoration:none;color:#777; }
	.page-en-chiffres a:hover { text-decoration:none;color:#000; }
	.page-en-chiffres a:active { text-decoration:none;color:#000; }
	#logo { 
        position:relative;margin: 0 auto 100px auto;height:auto;
        width:250px;
        font-family: 'Karla-Bold';font-size:38px;text-transform: uppercase;text-align: center;
    }
    #logo img { margin-bottom:20px; }
   

    #statement1 {
        position:relative;font-family: 'Karla-Bold';font-size:2em;line-height:1em;text-align: center;margin:150px 0;
    }
    .statement-title { 
        position:relative;margin-bottom:50px;
        font-family: 'Karla-Bold';font-size:3em;line-height:1em;text-align: center;color:#f7b034; }
    .statement { position:relative;margin:150px 0 150px 0;text-align:center;font-size:0.7em; }
	/*.statement br { line-height:2em; }*/
	.statement-title1 { font-family: 'Karla-Bold';font-size:1.5em;color:#f7b034;line-height:1.4em; }
	.statement-title2 { font-family: 'Karla-Regular';font-size:1.5em;color:#7781be;line-height:1.4em; }
	


    #bars-responsive { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto 100px auto; }
	#bars-animation { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto 100px auto; }
	#pie-format {
        min-width: 400px; height: 600px; max-width: 800px; margin: 0 auto 100px auto;
    }
    #pie-format2 {
        min-width: 400px; height: 600px; max-width: 800px; margin: 0 auto 100px auto;
    }
    #bars-tech { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto 100px auto; }
    #pie-annees {
        min-width: 400px; height: 600px; max-width: 800px; margin: 0 auto 100px auto;
    }



/*---------------------------------------------------*/
/*     CONTACT FORM 7                                */
/*---------------------------------------------------*/

.wpcf7 p {
    font-family: 'ek_muktamedium';
    font-size:18px;letter-spacing:1.5px;
}
.wpcf7 input {
    margin:10px 0 20px 0;padding:4px;width:600px;height:40px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:solid 1px #dedede;
    background-color:#fafafa;
    font-family: 'ek_muktaextralight';font-weight: 300;
    font-size:14px;line-height:1.6em;color:#777;
}
.wpcf7 input:hover {
    background-color: #fff;
}
.wpcf7 textarea {
    margin:10px 0 20px 0;padding:4px;width:600px;height:300px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:solid 1px #dedede;
    background-color:#fafafa;
    font-family: 'ek_muktaextralight';font-weight: 300;
    font-size:14px;line-height:1.6em;color:#777;
}
.wpcf7 textarea:hover {
    background-color: #fff;
}
.wpcf7 .wpcf7-submit {
    margin:10px 0 20px 0;padding:8px;width:150px;height:50px;text-align:center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    
    background-color:#555;
   font-family: 'ek_muktaextralight';
    font-size:18px;letter-spacing:1.5px;text-transform: uppercase;
    line-height:1.6em;color:#fff;
}
.wpcf7 .wpcf7-submit:hover {
    background-color:#000;
    
}






/*---------------------------------------------------*/
/*                                                   */
/*     MENU                                          */
/*                                                   */
/*---------------------------------------------------*/
#menu_container {
	position:fixed;z-index:100000;top:0px;left:-25%;width:25%;height:100%;background-color: #f9f9f9;
	
}
#menu_content { 
	position:absolute;
	width:100%;height:360px;top:35%;margin-top:-180px;
	text-align:center;
}
.menu_item {
	position:relative;margin-bottom:50px;
	font-family: 'rafalebg';font-size:30px;
	text-transform: uppercase;
	
}
.menu_item img {
	width:50%;height:auto;
}
.menu_item a:link { text-decoration:none;color:#777; }
.menu_item a:visited { text-decoration:none;color:#777; }
.menu_item a:hover { text-decoration:none;color:#000; }
.menu_item a:active { text-decoration:none;color:#000; }

#mravey {
	position:relative;
	width:170px;
	height:25px;
	padding-top:3px;
	margin-right:auto;margin-left:auto;
	background-image:url(imgs/logo_raven.png);
	background-position:0 top;
	background-repeat: no-repeat;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size:9px;
	text-transform: uppercase;
	text-align:center;
}
#mravey a:link { text-decoration:none;color:#999; }
#mravey a:visited { text-decoration:none;color:#999; }
#mravey a:hover { text-decoration:none;color:#000; }
#mravey a:active { text-decoration:none;color:#000; }


#menu {
	position:relative;
	width:280px;min-height:500px;
	padding:30px;
	background-color:#fff;
	border:solid 0px #efefef;
	display:none;
}

#menu ul { list-style-type: none;padding:0; }
#menu li.menu_item_special {
	position:relative;height:32px;padding:2px 0 0 28px;
	font-family: 'Lato', sans-serif;
	font-weight:700;
	font-size:11px;
	text-transform: uppercase;
	filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;
	-webkit-transition: opacity 0.2s ease-in;	
	-moz-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
	border-bottom:solid 0px #efefef;
}
#menu li.menu_item_special:hover {
	filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;
}
#menu li#menu_login {
	background-image:url(imgs/menu_login_icon.jpg);
	background-position:2px top;
	background-repeat: no-repeat;
}
#menu li#menu_search {
	background-image:url(imgs/menu_search_icon.jpg);
	background-position:2px top;
	background-repeat: no-repeat;
}
#menu li {
	position:relative;padding:12px 0 12px 4px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	font-size:14px;
	color:#747171;
	border-bottom:solid 1px #efefef;
}
#menu .sub-menu { padding-left:23px; }
#menu .sub-menu>li {
	display:block;padding:4px 0 4px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	font-size:14px;
	color:#999999;
	border-bottom:solid 0px #efefef;
}

/*---------------------------------------------------*/
/*                                                   */
/*     SINGLE CONTENT                                */
/*                                                   */
/*---------------------------------------------------*/
#single_container {
	position:relative;margin-left: auto;
	margin-right:auto;
	width:1280px;padding:60px 0 60px 0;
	background-color:#fcfcfc;
	z-index:1007;
	transition: width 0.2s;
	-moz-transition: width 0.2s;
	-webkit-transition: width 0.2s;
	-o-transition: width 0.2s;
}
#single_contenu {
	position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;
}
/* Responsive iFrame */ 
#single_contenu iframe, .vresponsive-iframe-container object, .vresponsive-iframe-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
#single_infos_logo {
	position:fixed;bottom:40px;left:40px;width:220px;height:41px;z-index:1000;opacity:0.2;
	background-repeat:no-repeat;
	transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
}
#single_infos_logo:hover {
	opacity:1;cursor:pointer;
}
#single_infos_plus {
	position:fixed;bottom:40px;right:40px;width:43px;height:45px;z-index:1000;opacity:0.2;
	transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
}
#single_infos_plus:hover {
	opacity:1;cursor:pointer;
}
#single_overlay {
	position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:#fff;z-index:999;display:none;
}

#single_overlay-white {
	position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:#000;z-index:999;display:none;
}
#single_infos {
	position:fixed;top:5%;left:50%;margin-left:-300px;overflow: auto;
	width:460px;height:75%;padding:70px;
	background-color:#fff;border:solid 1px #000;z-index:1000;display:none;
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
}
#single_infos a:link { text-decoration:none;color:#000; }
#single_infos a:visited { text-decoration:none;color:#000; }
#single_infos a:hover { text-decoration:none;color:#999; }
#single_infos a:active { text-decoration:none;color:#999; }

/*---------------------------------------------------*/
/*                                                   */
/*     FOOTER                                        */
/*                                                   */
/*---------------------------------------------------*/

#footer_container {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	left:0px;
	top:0px;
	width:100%;
	height:100px;
	background-color: #fff;
	z-index:1;
}
#footer_items {
	position:relative;
	padding-top:42px;
	margin-left:auto;
	margin-right:auto;
	left:0px;
	top:0px;
	width:1280px;
	z-index:1;
	transition: width 0.2s;
	-moz-transition: width 0.2s;
	-webkit-transition: width 0.2s;
	-o-transition: width 0.2s;
}

.footer_left {
	font-family: 'Merriweather', serif;
	font-weight:300;
	font-size:13px;
	font-style:italic;
	color:#444;
}

.footer_leftColumn {
	position:relative;width:250px;
	top:0;padding-left:32px;
	transition: width 0.2s;
	-moz-transition: width 0.2s;
	-webkit-transition: width 0.2s;
	-o-transition: width 0.2s;
}
.footer_private {
	position:relative;float:left;
	width:112px;height:14px;border-right:solid 1px #d3d3d3;
	background-image:url(imgs/login_icon.jpg);
	background-position:77px top;
	background-repeat: no-repeat;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:11px;
	text-transform: uppercase;
}
.footer_contact {
	position:relative;float:left;padding-left:20px;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:11px;
	text-transform: uppercase;
}
#footer_items a:link { text-decoration:none;color:#999; }
#footer_items a:visited { text-decoration:none;color:#999; }
#footer_items a:hover { text-decoration:none;color:#000; }
#footer_items a:active { text-decoration:none;color:#000; }


/*---------------------------------------------------*/
/* SCROLL TO TOP                                     */
/*---------------------------------------------------*/

#top-link  {  
	position:absolute; left:50%; margin-top:-200px; bottom:30px; z-index:500;width:64px;margin-left:-32px;height:64px;padding:0;
	/*background-image:url(imgs/scrollToTop-fond.png);
	background-repeat: no-repeat;*/
	/*filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7; 
	-webkit-transition: opacity 0.2s ease-in;	
	-moz-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;*/
	
}
/*#top-link:hover { filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1; }*/

#top-link-fond { 
	position:absolute;top:0;left:0;
	background-image:url(imgs/scrollToTop-fond.png);
	background-repeat: no-repeat;
	filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity: 0.3;opacity: 0.3; 
}
#top-link-fond:hover  {  
	filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;
}
#top-link-fleche { 
	position:absolute;top:0;left:0;
	background-image:url(imgs/scrollToTop-flecheHaut.png);
	background-repeat: no-repeat;
	filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7; 
}
#top-link-fleche:hover  {  
	filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;
}