/*
Theme Name: memento
Theme URI: http://www.louismartel.fr/themes/memento
Description: theme pour le blog memento par diptyque paris
Author: Louis Martel
Author URI: http://www.louismartel.fr
Version: 1.0
License: GNU General Public License v2 or later
*/
/***********************************************************************
							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;
}
*{
	margin:0;
	padding:0;
	outline:none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}
.clearer{
	clear:both;
	height:1px;	
}
img{
	max-width:100%;
	height:auto;
}
/* Images */
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
strong, b{
	font-weight:bold;	
}
em{
	font-style:italic;	
}
/***********************************************************************
							FONTS
***********************************************************************/

@font-face {
    font-family: 'dtlhaarlemmer';
    src: url('fonts/h022c13d-webfont.eot');
    src: url('fonts/h022c13d-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/h022c13d-webfont.woff') format('woff'),
         url('fonts/h022c13d-webfont.ttf') format('truetype'),
         url('fonts/h022c13d-webfont.svg#dtlhaarlemmersdnormal') format('svg');
   	font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'dtlhaarlemmer';
    src: url('h022c16d.eot');
    src: url('h022c16d.eot') format('embedded-opentype'),
         url('h022c16d.woff2') format('woff2'),
         url('h022c16d.woff') format('woff'),
         url('h022c16d.ttf') format('truetype'),
         url('h022c16d.svg#DTLHaarlemmerSDBold') format('svg');
	font-weight: bold;
    font-style: normal;
}
/***********************************************************************
							BASIC LAYOUT
***********************************************************************/
/* Body, links, basics */
html {
	font-size: 85%;
	height:100%;
}
body {
	font-size: 1em;
	font-family: "dtlhaarlemmer", "Times New Roman", Times, serif;
	text-rendering: optimizeLegibility;
	color: #444;
	height:auto;
	min-height:100%;
	position:relative;
}
/***********************************************************************
							HEADER
***********************************************************************/
#masthead{
	border-bottom:1px solid #000;
	padding:0.8em 1em 0.5em 1em;
	text-align:center;
	position:fixed;
	top:0;
	width:100%;
	background-color:#FFF;
	z-index:500;
}
#masthead h1{
	display:block;
	width:60%;
	font-size:2em;
	margin:0.2em auto 0.2em auto;
}
#masthead h1 a{
	display:block;
	/*text-indent:-99999px;*/
	/*background-image:url('img/logo_memento_small.png');*/
	/*background-image:url('img/logo_memento.svg');*/
	background-repeat:no-repeat;
	background-position:center center;
	background-size: contain;
}
#masthead h2{
	width:60%;
	margin:0 auto;
}
#masthead h2 span.par{
	display:block;
	font-size:0.7em;
	margin:0.5em auto 0.5em auto;
}
#masthead h2 span.par:before{
	content:"\2014";
}
#masthead h2 span.par:after{
	content:"\2014";
}

#masthead h2 span.logo{
	display:block;
	font-size:2.5em;
	/*text-indent:-99999px;
	background-image:url('img/logo_diptyque_paris_small.png');
	background-image:url('img/logo_diptyque_paris.svg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;*/
	margin-bottom:1em;
}
#masthead a{
	text-decoration:none;	
}
/***********************************************************************
							MENUS
***********************************************************************/
/********langues*/
.menu-langues-container{
	width:20%;
	float:left;
	text-align:left;
	padding-top:1em;
}
.menu-langues-container li{
	margin-bottom:0.5em;
}
.menu-langues-container li a{
	color:#000;
	background-color:transparent;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	padding:0.2em 0.5em;
}
.menu-langues-container li a.inactive{
	color:#CCC;
}
.menu-langues-container li.current-lang a, .menu-langues-container li a:hover{
	color:#FFF;
	background-color:#000;
}
.menu-langues-container li.current-lang a, .menu-langues-container li a.inactive:hover{
	color:#CCC;
	background-color:#FFF;
	cursor:default;
}
/********a propos / recherche*/
.menu-about-container, .menu-a-propos-container, .menu-a-propos-jp-container{
	width:20%;
	float:right;
	text-align:right;
	padding-top:1em;
}
.menu-about-container li, .menu-a-propos-container li, .menu-a-propos-jp-container li{
	margin-bottom:0.2em;
}
.menu-about-container li a, .menu-a-propos-container li a, .menu-a-propos-jp-container li a{
	color:#000;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	padding:0.2em 0.5em;
}
.menu-about-container li.current-menu-item a, .menu-about-container li a:hover, .menu-a-propos-container li.current-menu-item a, .menu-a-propos-container li a:hover, .menu-a-propos-jp-container li.current-menu-item a, .menu-a-propos-jp-container li a:hover {
	color:#FFF;
	background-color:#000;
}
.menu-about-container li input#s, .menu-a-propos-container li input#s, .menu-a-propos-jp-container li input#s{
	border:none;
	text-align:right;
	color:#000;
	font-family: "dtlhaarlemmer", "Times New Roman", Times, serif;
	font-size:1em;
	cursor:pointer;
	width:auto;
	padding:0.2em 0.5em;
	background-color:transparent;
	width:30%;
	min-width:100px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.menu-about-container li input#s:focus , .menu-a-propos-container li input#s:focus, .menu-a-propos-jp-container li input#s:focus {
	color:#FFF;
	background-color:#000;
	cursor:text;
	width:50%;
	
}
.menu-about-container li label, .menu-a-propos-container li label, .menu-a-propos-jp-container li label, .menu-about-container li input#searchsubmit, .menu-a-propos-container li input#searchsubmit, .menu-a-propos-jp-container li input#searchsubmit{
	display:none;
}
/********principal*/
ul.menu-principal li{
	display:inline-block;
	padding:0.2em 0.5em;
	font-size:1em;	
}
ul.menu-principal li a{
	color:#000;
	-webkit-transition: color background .5s ease-in-out;
	-moz-transition: color background .5s ease-in-out;
	-ms-transition: color background .5s ease-in-out;
	-o-transition: color background .5s ease-in-out;
	transition: color background .5s ease-in-out;
	padding:0.2em 0.5em;	
}
ul.menu-principal li a:hover, ul.menu-principal li.current-menu-item a, ul.menu-principal li.current-post-parent a{
	color:#FFF;
	background-color:#000;	
}

/***********************************************************************
							FOOTER
***********************************************************************/
footer{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	z-index:777;
	background-color:#000;
	padding:0.5em 1em;
}
footer a{
	color:#FFF;
	text-decoration:none;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
footer li{
	display:inline-block;
	padding:0 1%;
}
.menu-site-container, .menu-site-en-container{
	float:left;
	width:20%;
}
.menu-menu-footer-container, .menu-menu-footer-en-container, .menu-menu-footer-jp-container{
	float:left;
	width:60%;
	text-align:center;
}
.menu-footer-container{
	float:left;
	width:20%;
	text-align:right;
}
.menu-footer-container li a{
	display:block;
	width:1em;
	height:1em;
	text-indent:9999999px;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	opacity:1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	
}
.menu-footer-container li a:hover{
	opacity:0.5;	
}
.menu-footer-container li.fb a{
	background-image:url('img/picto-facebook.png');
}
.menu-footer-container li.twitter a{
	background-image:url('img/picto-twitter.png');
}
.menu-footer-container li.instagram a{
	background-image:url('img/picto-instagram.png');
}
.menu-footer-container li.youtube a{
	background-image:url('img/picto-youtube.png');
}


.menu-site-container li a:hover, .menu-menu-footer-container li a:hover, .menu-menu-footer-container li.current-menu-item a{
	background-color:#FFF;
	color:#000;
}
/***********************************************************************
							MAIN
***********************************************************************/
div#main{
	/*padding:30vh 5% 4em 5%;*/
	padding:20em 0 4em 0;	
}
div#content p{
	margin:1em auto;
	line-height:1.5em;	
}
div.site-content{
	padding:0 5%;	
}
div.nopadding{
	padding:0;	
}
/***********************************************************************
							TABS
***********************************************************************/
ul.tabs, su-tab-nav{
    list-style: none;
    margin: 0 auto;
	text-align:center;
}
ul.tabs li, su-tab-nav span{
	display: inline-block;
	margin:0 auto;
	}
ul.tabs a, su-tab-nav span{
	color:#000;
    display: block;
    position: relative;
    top: 1px;
    padding: 5px 10px;
    text-decoration: none;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
ul.tabs a.active, ul.tabs a:hover{
   background-color:#000;
   color:#FFF
}
section.tab{
    display: none;
    margin-bottom: 15px;
    padding: 15px 0;
}
section.tab.active{
	display: block;
}



.su-tabs {
	margin: 0 !important;
	padding: 3px;
	-webkit-border-radius:0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
	background: #fff 0 !important;;
}
.su-tabs-nav span {
	display: inline-block;
	margin-right: 3px;
	padding: 5px 10px !important;;
	font-size: 1em;
	min-height: 40px;
	line-height: 20px;
	-webkit-border-top-left-radius: 0 !important;
	-moz-border-radius-topleft: 0 !important;
	border-top-left-radius: 0 !important;
	-webkit-border-top-right-radius: 0 !important;
	-moz-border-radius-topright: 0 !important;
	border-top-right-radius: 0 !important;
	color: #000  !important;
	cursor: pointer;
	-webkit-transition: all .5s ease-in-out !important;
	-moz-transition: all .5s ease-in-out !important;
	-ms-transition: all .5s ease-in-out !important;
	-o-transition: all .5s ease-in-out !important;
	transition: all .5s ease-in-out !important;
}
.su-tabs-nav span:hover { background: #000 !important;color:#FFF!important; }
.su-tabs-nav span.su-tabs-current { background: #000 !important;color:#FFF!important; cursor: default; }
.su-tabs-nav span.su-tabs-disabled {
	opacity: 0.5;
	filter: alpha(opacity=50);
	cursor: default;
}
.su-tabs-pane {
	padding: 15px 0 !important ;
	font-size: 1em !important;
	-webkit-border-bottom-right-radius: 0 !important;
	-moz-border-radius-bottomright: 0 !important;
	border-bottom-right-radius: 0 !important;
	-webkit-border-bottom-left-radius: 0 !important;
	-moz-border-radius-bottomleft: 0 !important;
	border-bottom-left-radius: 0 !important;
	background: #fff;
	color: #444 !important;
}
/*.su-tabs-vertical:before,
.su-tabs-vertical:after {
	content: " ";
	display: table;
}
.su-tabs-vertical:after { clear: both; }
.su-tabs-vertical .su-tabs-nav {
	float: left;
	width: 30%;
}
.su-tabs-vertical .su-tabs-nav span {
	display: block;
	margin-right: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-border-top-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-left-radius: 3px;
}
.su-tabs-vertical .su-tabs-panes {
	float: left;
	width: 70%;
}
.su-tabs-vertical .su-tabs-pane {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}*/
.su-tabs-nav,
.su-tabs-nav span,
.su-tabs-panes,
.su-tabs-pane {
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}



/***********************************************************************
							POST
***********************************************************************/
section.post-content{
	padding:0 5%;
	line-height:1.5em;
}
section.post-content a{
	color:#666;
}
header.post-header{
	text-align:center;
	color: #000;
	width:100%;
	padding:1.5em 0 1em 0;
	margin:0 auto 1em auto;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
header.post-header h1{
	text-transform:uppercase;
	font-size:3em;
	line-height:1em;
	margin-bottom:0em;	
}
header.post-header span.date{
	font-size:1.2em;
}
div.my-thumbnail{
	float:left;
	width:50%;
	margin:0 1em 1em 0;	
}
div.my-thumbnail img{
	width:100%;	
	height:auto;
}
div.the-post{
	padding:0 80px;
	overflow: hidden;
}
div.content-post{
	width:48%;
	float:left;
	
}
div.gallery{
	clear:both;	
}
div#content p.wp-caption-text, dd.wp-caption-text.gallery-caption{
	color:#999;
	font-style:italic;
	font-size:0.9em;
	line-height:1em;
	margin-top:0;
	padding:0 0.1em 0.2em 0;
	text-align:left;	
}
dd.wp-caption-text.gallery-caption{
	font-size:0.7em;
}
.previous, .next, a.next, a.prev{
	position:fixed;
	top:50%;
	line-height:0.8em;
}
.next{
	right:0;
}
.previous, a.prev{
	left:0;
}
.previous a, .next a, a.prev, a.next{
	display:block;
	width:50px;
	height:50px;	
	text-indent:-9999999px;
	overflow:hidden;
	opacity:1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.next a, a.next{
	background-image:url('img/next.png');
	background-size:contain;
	background-position:right;
}
.previous a, a.prev{
	background-image:url('img/previous.png');
	background-size:contain;
}
.next a:hover, .previous a:hover, a.prev:hover, a.next:hover{
	opacity:0.5;
}
div.tags{
	margin:2em 0 1em 0;	
}
div.tags a{
	color:#FFF;
	background-color:#000;
	text-decoration:none;
	padding:0.2em;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
div.tags a:hover{
	color:#000;
	background-color:#FFF;
}
.toread{
	width:100%;
	margin-top:3em;
	text-align:center;	
}
.toread h2{
	text-transform:uppercase;
	color:#999;
	margin:2em auto 1em auto;
}
.toread ul{
	list-style-type:none;	
}
.toread ul li{
	display:inline-block;
	width:18%;
	height:15em;
	overflow:hidden;
	position:relative;
	margin:0 1em;
	overflow:hidden;

}

.toread ul li a div.container-other-post{
	height:12em;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	
	width:100%;
	height:15em;
	
	opacity:1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.toread ul li a div.contenu{
	position:absolute;
	width:100%;
	color:#333;
	padding:3em 0.2em 0.5em 0.2em;
	opacity:0;
	bottom:0.5em;
	height:12em;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.toread ul li span.titre{
	text-align:center;
	display:block;
	margin:0.5em auto;
	border-top:#000 1px solid;
	border-bottom:#000 1px solid;
	background-color:#FFF;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.toread ul li a{
	color:#000;
	text-decoration:none;	
}
.toread ul li a:hover div.contenu{
	opacity:1;
}
.toread ul li a:hover div.container-other-post{
	opacity:0.5;
}
.toread ul li a:hover span.titre{
	background-color:#000;
	color:#FFF;
}

.toread ul li div.contenu span.extrait{
	font-size:0.9em;
	line-height:1em;
	display:block;
	text-align:justify;
	color:#000;
}
.toread ul li div.contenu span.post-date{
	position:absolute;
	bottom:0;
	width:100%;
	font-size:1.1em;
	display:block;
}

.simplecontent{
	width:70%;
	margin:0 auto;	
	
}
.simplecontent .wp-caption, .content-special-post .wp-caption{
	width:100%;
	height:auto;
}



/***********************************************************************
							POST EXPORT
***********************************************************************/
div#mainexport{
	padding:2em 0;
	height:750px;
	overflow: hidden;	
}
div#mainexport div.site-content{
	padding:0 5%;	
	max-height: 760px;
}
section.exportlast{
	padding:0;
	line-height:1.5em;
}
.exportlast post-content a{
	color:#666;
}

footer.export{
	position:relative;
	text-align:right;
	background-color:#FFF;
	padding:0 5% 2em 5%;	
}
footer.export a{
	font-size:1.3em;
	color:#FFF;
	background-color:#000;
	padding:0.5em;	
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
footer.export a:hover{
	color:#000;
	background-color:#FFF;
}

/***********************************************************************
							PAGE CONTACT
***********************************************************************/
.page-id-11 #content a, .page-id-13 #content a{
	text-decoration:none;
}
/***********************************************************************
							PAGE ABOUT
***********************************************************************/
.page-id-19 div.site-content, .page-id-21 div.site-content, .page-id-15 div.site-content, .page-id-17 div.site-content{
	padding:0 10%;
}
/***********************************************************************
							404
***********************************************************************/
.not-found{
	text-align:center;	
}
.not-found h2{
	font-size:1.5em;
	margin-bottom:3em;
}
.not-found h3{
	font-size:1.2em;
}
/***********************************************************************
							RECHERCHE
***********************************************************************/
.search-results h2{
	font-size:1.5em;
	margin-bottom:1em;
}
#contentgrid .type-page{
    display: block;
    float: left;
    margin:0.5em 1%;
    width: 31.333%;
	/*min-height:25vh;*/
}
article.type-page a figcaption{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	opacity:1;
	z-index:32;
	padding:10%;	
}
	

/***********************************************************************
							PAGINATION
***********************************************************************/
.pagination{
	text-align:center;
	margin-top:2em;
}
.pagination a{
	display:inline-block;
	color:#000;
	background-color:#000;
	width:1em;
	height:1em;
	text-indent:-99999px;
	border:1px solid #000;
}
.pagination span.current{
	display:inline-block;
	background-color:#FFF;
	width:1em;
	height:1em;
	text-indent:-99999px;
	border:1px solid #000;
}
.pagination a:first-child, .pagination a:last-child {
	background-color:transparent;
	width:50px;
	height:50px;
	border:none;
}
/***********************************************************************
							MASONRY
***********************************************************************/
#contentgrid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
#contentgrid article {
    background-color: #FFFFFF;
    display: block;
    float: left;
    margin:0.5em 1%;
    width: 31.333%;
	overflow:hidden;
}
#contentgrid article.classicpost img, #contentgrid article.hiddenpost img{
	width:99.9%;
	height:auto;
}
#contentgrid article.triptyque img{
	max-width:none;
	max-height:none;
}

/***********************************************************************
							FORMATS
***********************************************************************/
article{
	display: block;
	margin: 1em auto ;
	overflow:hidden;
	position:relative;
}
article a{
	text-decoration:none;
	color:#000;
}
article a h1{
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	padding:0.2em 0.5em;
	margin-bottom:0.5em;
	color:#000;
	font-size:1.2em;
	background-color:transparent;
	-webkit-transition: background 1s ease;
    -moz-transition: background 1s ease;
    -ms-transition: background 1s ease;
    -o-transition: background 1s ease;
    transition: background 1s ease;
}
article a figure{
	position:relative;
	overflow:hidden;
}
article a figcaption{
	/*position:absolute;
	top:0;
	left:0;
	width:100%;
	opacity:0;
	z-index:32;
	padding:10%;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;*/
	position:absolute;
	display: inline-block;
	vertical-align: middle;
	bottom: 0;
	left:0;
	width:100%;
	opacity:0;
	z-index:32;
	font-size:1.2em;
	padding:5% 10%;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;	
}
article a figcaption span.cat{
	display:block;
	font-style:italic;
	margin:2em auto 0 auto;
	text-align:center;
}
article a figcaption span.excerpt-post-grid{
	display:inline-block;
  	vertical-align:middle;
	margin:2em auto 2em auto;
	text-align:justify;
}
article a figcaption span.excerpt-post-grid p, div#content article a figcaption span.excerpt-post-grid p{
	line-height:normal;
	margin:0 auto;
}
article a:hover figcaption{
	opacity:1;	
}
article a:hover h1{
	color:#FFF;
	background-color:#000;	
}
article a figure img{
	opacity:1;
	-webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
article a:hover figure img{
	opacity:0.2;
}
/***** 3 premiers posts ***/
.home article.triptyque{
	height:45vh;
}

/***** type post ***/
article div.overflow{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	background-repeat:no-repeat;
	background-size:contain;
	z-index:30;
}

article.format-type1 div.overflow{
	background-image:url(img/biseau_l.svg) , url(img/biseau_r.svg);
	background-position:left bottom , right bottom ;
}
_:-ms-fullscreen, :root article.format-type1 div.overflow{
	background-image:none , none;
	background-position:right top, left bottom;
	background-size:100% auto, 100% auto;
}

article.format-type2 div.overflow{
	background-image:url(img/biseau_r.svg);
	background-position:right bottom;
	background-size:auto 100%;
}
_:-ms-fullscreen, :root article.format-type2 div.overflow{
	background-image:url(img/biseau_r.png);
	background-position:right bottom;
	background-size:auto 100% ;
}
article.format-type3 div.overflow{
	background-image:url(img/biseau_l.svg);
	background-position:left top ;
	background-size:auto 100% ;
}

article.format-type4 div.overflow{
	background-image:url(img/biseau_h.png);
	background-position:right top ;
	background-size:100% auto;
}
article.format-type5 div.overflow{
	background-image:url(img/biseau_b.png);
	background-position:-1px bottom ;
	background-size:100% auto;
	bottom:0;
}
_:-ms-fullscreen, :root article.format-type5 div.overflow{
	background-image:url(img/biseau_b.png);
	background-position:left bottom ;
	background-size:100% auto ;
}

article.format-type6 div.overflow{
	background-image:url(img/biseau_h.png) , url(img/biseau_b.svg);
	background-position:right top, left bottom;
	background-size:100% auto, 100% auto;
}
_:-ms-fullscreen, :root article.format-type6 div.overflow{
	background-image:none , none;
	background-position:right top, left bottom;
	background-size:100% auto, 100% auto;
}

/***********************************************************************
							MORE POST HOME
***********************************************************************/
p.more-posts-container{
	text-align:center;
	margin-top:4em;
}
a.more-posts, a.less-posts{
	clear:both;
	color:#000;
	text-decoration:none;
	font-size:1.2em;
}
/***********************************************************************
							OVERRIDE PLUGINS 
***********************************************************************/
#fancybox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}
#fancybox-wrap {
    position:fixed;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}
a#fancybox-close {
	position: absolute;
	top: 0px;
	right:-30px;
	width: 30px;
	height: 30px;
}
div#fancybox-title{
	display:none;
}
a#fancybox-right {
	right: -30px;
}
#fancybox-content {
	background-color:#FFF;
}

#share .sharedaddy{
	text-align:right;
	margin-bottom: 1em;	
}
#share .sharedaddy ul li {
	display:inline-block;	
}
.share-more{
	display:none;	
}
#share .sd-social-icon .sd-content ul li[class*=share-].share-facebook a.sd-button{
	background-image:url('img/facebook.png');
	background-repeat:no-repeat;
	background-size:contain;
	display:inline-block;
	width:10px;
	height:30px;
	margin-right:6px;
	background-color: #FFFFFF;
	border-radius:0;
	-webkit-border-radius:0;
	padding:0;
}
#share a.share-facebook:before, #share a.share-twitter:before, #share a.share-email:before{
	content:none;
}
#share a.share-twitter{
	background-image:url('img/twitter.png');
	background-repeat:no-repeat;
	background-size:contain;
	display:inline-block;
	width:25px;
	height:30px;
	margin-right:6px;
	background-color: #FFFFFF;
	border-radius:0;
	-webkit-border-radius:0;
	padding:0;
}

#share a.share-email{
	background-image:url('img/email.png');
	background-repeat:no-repeat;
	background-size:contain;
	display:inline-block;
	width:25px;
	height:30px;
	background-color: #FFFFFF;
	border-radius:0;
	-webkit-border-radius:0;
	padding:0;
}
#page div#sharing_email a{
	color:#333;
}
#sharing_email .sharing_send,.sd-content ul li .option a.share-ustom,.sd-content ul li a.sd-button,.sd-content ul li.advanced a.share-more,.sd-content ul li.preview-item div.option.option-smart-off a,.sd-social-icon .sd-content ul li a.sd-button,.sd-social-icon-text .sd-content ul li a.sd-button,.sd-social-official .sd-content>ul>li .digg_button >a,.sd-social-official .sd-content>ul>li>a.sd-button,.sd-social-text .sd-content ul li a.sd-button{text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-size:12px;font-family:"Open Sans",sans-serif;font-weight:400;border-radius:3px;color:#777!important;background:#f8f8f8;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px}


.pp_details{float:left;margin: 0px 0 2px !important;}

.pp_nav{clear:right;width: 100%; float:none !important; margin:3px 10px 0 0;  min-height: 25px !important;}

.pp_description{margin-right: 0 !important; display: block !important; width: 100% !important;}

.pp_social{display:none !important;}

/***********************************************************************
							gallery
***********************************************************************/
.gallery{
	text-align:center;
}
.gallery-item {
display:inline-block;
width:24%;
margin:0 ;
vertical-align:top;
background-color: #FFFFFF;
margin-right:1.3333%;
margin-bottom:0.5em;
}
.gallery-item:nth-child(4n+4){
	margin-right:0%;
}
.gallery-item img {
width: 100%;
height: auto;
}


div#hidepr{
width:0px;
height:0px;
overflow:hidden;	
}


/***********************************************************************
							VIDEOS
***********************************************************************/

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
	width: 100% !important;
	
}
.wp-video{
	height:auto !important;
}
.wp-video, video.wp-video-shortcode, .mejs-overlay, .mejs-layer {
	width:100% !important;
	max-width: 100% !important;
}
/*.mejs-overlay{
	position:relative!important;	
}*/
/*
video.wp-video-shortcode {
	position: relative;
}

.mejs-mediaelement {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.mejs-controls {
	display: none;
}*/
/*.mejs-overlay-play {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	height: auto !important;
}*/


/***********************************************************************
							Tablets 
***********************************************************************/
@media screen and (max-width: 1100px){
.pp_pic_holder.light_square { width: 98%!important; left:1%!important; overflow: hidden; }
div.light_square .pp_content_container{background-color:#FFF;}
div.light_square .pp_content_container .pp_left { padding-left:1%!important;}
div.light_square .pp_content_container .pp_right { padding-right:1%!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
div.pp_top{
	height:1em!important;
}
div.pp_bottom{
	height:0;
}

div.pp_hoverContainer{
	height:calc( 100% - 5em ) !important;
	width:98%!important;
}
a.pp_expand, a.pp_contract{ display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important; }
.pp_details { float: none!important;width: 100%!important; padding-left: 0 ; padding-right:0; padding-top: 1em; padding-bottom: 2.5em; background-color: #fff; margin:0 0 1em 0;}
a.pp_close { right: 10px!important; top: 10px!important; }	



div.content-post{
	width:47%;
	float:left;
	
}
.gallery-item {
display:inline-block;
width:24%;
margin:0 ;
vertical-align:top;
background-color: #FFFFFF;
margin-right:1%;
}
article a figcaption span.excerpt-post-grid{
	display:inline-block;
  	vertical-align:middle;
	margin:0.5em auto 2em auto;
	text-align:justify;
	}
	
	
#masthead{
	padding: 0.2em 1em;
}
.menu-langues-container, .menu-about-container, .menu-a-propos-container, .menu-a-propos-jp-container{
	padding-top:0.2em;
}
#masthead h1{
	margin:0 auto;
	
}
#masthead h2 span.par{
	margin:0 auto;
}
#masthead h2 span.logo{
	margin-bottom:0.5em;
}



.simplecontent{
	width:100%;
	margin:0 auto;	
	
}


}

@media screen and (max-width: 1100px) and (orientation:landscape){
	
#masthead h1{
	width:25%;
	
}
#masthead h2{
	width:15%;
}

div#main{
	padding:15em 0 4em 0;	
}
p.more-posts-container{
	text-align:center;
	margin-top:1em;
}
.toread ul li{
	display:inline-block;
	width:28%;
	height:15em;
	overflow:hidden;
	position:relative;
	margin:0 0.5%;
}
.search-results{
padding-top:3em;	
}
section.post-content{
	padding:0;
	line-height:1.5em;
}
p.more-posts-container{
	text-align:center;
	margin-top:2em;
}
div#content p.spacer{
	margin:0;
	line-height:0.5em;
}
div#content p.social a img{
	width:2em;
	height:auto;
}

}
@media screen and (max-width: 800px) and (orientation:portrait){
	#contentgrid article {
    background-color: #FFFFFF;
    display: block;
    float: left;
    margin:0.5em 12%;
    width: 76%;
	overflow:hidden;
}	
#contentgrid .type-page{
    display: block;
    float: left;
    margin:0.5em 12%;
    width: 76%;
	/*min-height:25vh;*/
}
section.post-content{
	padding:0;
	line-height:1.5em;
}
.toread ul li{
	display:inline-block;
	width:28%;
	height:15em;
	overflow:hidden;
	position:relative;
	margin:0 0.5%;
}
div#content p.spacer{
	margin:0;
	line-height:0.8em;
}
div#content p.social a img{
	width:2em;
	height:auto;
}
}

@media screen and (max-width: 600px) {
	
	.menu-langues-container{
	width:50%;
	float:left;
	text-align:left;
	/*padding-top:0.5em;*/
	margin-bottom:-3em;
	}
	.menu-langues-container li{
	margin-bottom:0.5em;
	}
	/********a propos / recherche*/
	.menu-about-container, .menu-a-propos-container,  .menu-a-propos-jp-container{
	width:50%;
	float:left;
	text-align:right;
	/*padding-top:0.5em;*/
	margin-bottom:-3em;
	}
	#masthead{
	border-bottom:1px solid #000;
	padding:0.2em 1em 0.2em 1em;
	text-align:center;
	position:relative;
	width:100%;
	background-color:#FFF;
	z-index:500;
	}
	#masthead h1{
	/*clear:both;*/
	display:block;
	width:40%;
	font-size:2em;
	margin:0em auto 0.2em auto;
	}
	#masthead h2{
	width:20%;
	}
	#masthead h2 span.logo{
	margin-bottom:0.5em;
}
	
	
	div#main{
	/*padding:30vh 5% 4em 5%;*/
	padding:2em 0 4em 0;	
}
	
	/***** 3 premiers posts ***/
	.home article.triptyque{
		height:15em;
	}
	#contentgrid article {
    background-color: #FFFFFF;
    display: block;
    float: left;
    margin:0.5em 5%;
    width: 90%;
	overflow:hidden;
}	
#contentgrid .type-page{
    display: block;
    float: left;
    margin:0.5em 5%;
    width: 90%;
	/*min-height:25vh;*/
}
div.content-post{
	width:100%;
	float:none;
	
}
	
article.format-type1 div.overflow{
	background-image:url(img/biseau_l.png) , url(img/biseau_r.png);
	background-position:left bottom , right bottom ;
}
_:-ms-fullscreen, :root article.format-type1 div.overflow{
	background-image:none , none;
	background-position:right top, left bottom;
	background-size:100% auto, 100% auto;
}

article.format-type2 div.overflow{
	background-image:url(img/biseau_r.png);
	background-position:right bottom;
	background-size:auto 100%;
}
_:-ms-fullscreen, :root article.format-type2 div.overflow{
	background-image:url(img/biseau_r.png);
	background-position:right bottom;
	background-size:auto 100% ;
}
article.format-type3 div.overflow{
	background-image:url(img/biseau_l.png);
	background-position:left top ;
	background-size:auto 100% ;
}

article.format-type4 div.overflow{
	background-image:url(img/biseau_h.png);
	background-position:right top ;
	background-size:100% auto;
}
article.format-type5 div.overflow{
	background-image:url(img/biseau_b.png);
	background-position:left bottom ;
	background-size:100% auto;
}
_:-ms-fullscreen, :root article.format-type5 div.overflow{
	background-image:url(img/biseau_b.png);
	background-position:left bottom ;
	background-size:100% auto ;
}

article.format-type6 div.overflow{
	background-image:url(img/biseau_h.png) , url(img/biseau_b.png);
	background-position:right top, left bottom;
	background-size:100% auto, 100% auto;
}
_:-ms-fullscreen, :root article.format-type6 div.overflow{
	background-image:none , none;
	background-position:right top, left bottom;
	background-size:100% auto, 100% auto;
}
section.post-content{
	padding:0 1%;
	line-height:1.5em;
}
div.my-thumbnail{
	float:none;
	width:100%;
	margin:1em auto;	
}
.toread ul li{
	display:block;
	width:80%;
	height:15em;
	overflow:hidden;
	position:relative;
	margin:0 auto;
}
div.the-post{
	padding:0 1em;
	}
	.previous a, .next a, a.prev, a.next{
	width:20px;
	height:20px;	
}
div.tags{
		text-align:center;
	}
	span.tagtitle{
		display:block;
		margin:0 auto;	
	}
	
.gallery-item {
display:inline-block;
width:33.333%;
margin:0 ;
background-color: #FFFFFF;
}

.gallery-item img {
width: 90%;
height: auto;
margin: 5%;
}
div#content p.spacer{
	margin:0;
	line-height:0.5em;
}
div#content p.social a img{
	width:2em;
	height:auto;
}

}
@media screen and (max-width: 600px) and (orientation:landscape){
	html {
	font-size: 55%;
	height:100%;
}
	#masthead h1{
	/*clear:both;
	display:block;
	width:40%;
	font-size:2em;*/
	margin:0.2em auto 0.2em auto;
	}
	/*#masthead h2{
	width:20%;
	}*/
	.search-results{
	padding-top:0em;
	}
	
	.ssba{
margin-bottom:0.5em;	
}
.ssba a{
width:25px;	
}
.ssba a img{
height:25px;		
}
article a figcaption{
	padding:5% 4% 0 4%;
	}
	article a figcaption span.cat{
	display:block;
	font-style:italic;
	margin:0.2em auto 0 auto;
	text-align:center;
	}
	article a figcaption span.excerpt-post-grid{
	display:inline-block;
  	vertical-align:middle;
	margin:0.5em auto 2em auto;
	text-align:justify;
	}
	
	

}
@media screen and (max-width: 600px) and (orientation:portrait){
	div.site-content{
	padding:0 1%;	
}
	ul.menu-principal li{
	display:block;
	padding:0.2em 0.1em;
	font-size:1.3em;	
	}
	article a figcaption{
	padding:5% 3% 0 3%;
	}
	article a figcaption span.cat{
	display:block;
	font-style:italic;
	margin:0.2em auto 0 auto;
	text-align:center;
	}
	article a figcaption span.excerpt-post-grid{
	display:inline-block;
  	vertical-align:middle;
	margin:0.5em auto 2em auto;
	text-align:justify;
	}
	.menu-site-container, .menu-site-en-container{
	float:right;
	width:100%;
	text-align:center;
	margin-bottom:1em;
	}
	div#main{
	
	padding:2em 0 12em 0;	
	}
	

	footer li{
	display:inline-block;
	padding:0;
}
	.menu-menu-footer-container, .menu-menu-footer-en-container, .menu-menu-footer-jp-container{
		float:none;
		width:100%;
		text-align:center;
		margin-bottom:2em;
	}
	.menu-footer-container{
		float:left;
		width:100%;
		text-align:center;
	}
	
	.menu-footer-container li a{
	width:1.5em;
	height:1.5em;
	margin:0 0.5em;
	}
	
	#masthead{
		padding: 0.2em;
	}
	.menu-langues-container, .menu-about-container, .menu-a-propos-container, .menu-a-propos-jp-container{
		margin-bottom: -2em;
	}
}

/*@media 	only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (   min--moz-device-pixel-ratio: 1.5),
		only screen and (     -o-min-device-pixel-ratio: 3/2),
		only screen and (        min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 192dpi) {
			
		#masthead h1 a{
			display:block;
			text-indent:-99999px;
			background-image:url('img/logo_memento.png');
			background-repeat:no-repeat;
			background-position:center center;
			background-size:contain;
		}
		#masthead h2 span.logo{
			display:block;
			font-size:2.5em;
			text-indent:-99999px;
			background-image:url('img/logo_diptyque_paris.png');
			background-repeat:no-repeat;
			background-position:center center;
			background-size:contain;
			margin-bottom:1em;
		}	
}*/