*,
*:after,
*:before{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: 'theodonisvilla';
	src: url('theodonisvilla-regular-webfont.woff2') format('woff2'),
		 url('theodonisvilla-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'kreon';
	src: url('kreon-webfont.woff2') format('woff2'),
		 url('kreon-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Merriweather';
	src: url('merriweather-regularitalic-webfont.woff2') format('woff2'),
		 url('merriweather-regularitalic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

:root {
	--first:#01847c;
	--second:#00AAA0; 
	--third:#8ED2C9;
	--fourth:#84eadd;
	--fifth:#FFB85F;
	--bg:#FDF9EA;
	--bg-revert:#3f3f3f;
	--txt:#464646;
	--txt-revert: #FFFFFF;
	--white:#FFFFFF;

	--second-50: rgba(0, 170, 160, 0.50);
	--second-15: rgba(0, 170, 160, 0.15);
	--second-10: rgba(0, 170, 160, 0.10);
	--third-50: rgba(142, 210, 201, 0.50);
	--fifth-80: rgba(255,184,95, 0.80);
	--fifth-50: rgba(255,184,95, 0.50);
	--fifth-30: rgba(255,184,95, 0.30);
	--fifth-15: rgba(255,184,95, 0.15);
}

.dark-mode {
	--first:#79c7be;
	--second:#5fbeb4; 
	--third:#40b5a9;
	--fourth:#00ab9f;
	--fifth:#FFB85F;
	--bg:#3f3f3f; /*282828*/
	--bg-revert:#FDF9EA;
	--txt:#e3e3e3;
	--txt-revert: #464646;
	--white:#FFFFFF;

	--second-50: rgba(95, 190, 180, 0.50);
	--second-15: rgba(95, 190, 180, 0.15);
	--second-10: rgba(95, 190, 180, 0.10);
	--third-50: rgba(64, 181, 169, 0.50);
	--fifth-80: rgba(255,184,95, 0.80);
	--fifth-50: rgba(255,184,95, 0.50);
	--fifth-30: rgba(255,184,95, 0.30);
	--fifth-15: rgba(255,184,95, 0.15);
}


/******************************/
/***         GENERAL        ***/
/******************************/

html {
	font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
	color: var(--txt);
}

body {
	line-height: 1.5;
	color: var(--txt);
	background-color: var(--bg);
}

.page {
	width: 1200px;
	margin: 0 auto;
}

main {
	position: relative;
}

.logo svg {
	fill: var(--second);
}

a {
	color: var(--second);
	text-decoration: none;
	transition: color .3s;
}

main a {
	font-weight: bold;
}

a[aria-current="page"],
a:hover {
	text-decoration: underline;
	color: var(--third);
}

.single article a {
    color: var(--txt);
    font-weight: bold;
    text-decoration: none;
    background-image: linear-gradient(var(--fifth), var(--fifth));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 100% 10%;
    transition: background-size, color .3s;
}

.single article a:hover, .single article a:focus {
    background-image: linear-gradient(120deg, var(--fifth) 0%, #f3d5bd1c 100%);
    background-size: 100% 100%;
}

.dark-mode .single article a:hover, .dark-mode .single article a:focus {
	background: var(--fifth);
    background-size: 100% 100%;
    color:var(--bg);
}


q {
    font-family: 'Merriweather', serif;
    font-size: 0.9em;
    font-style: italic;
    padding: 5px 0;
    color: var(--first);
	background: var(--third-50);
}
q:before { content: no-open-quote; }
q:after { content: no-close-quote; }

code {
    font-size: 0.9em;
    font-family: monospace;
    padding: 2px;
    color: var(--txt-revert);
	background: var(--bg-revert);
}

pre {
	color: var(--txt-revert);
	padding: 2em;
	margin-bottom: 2em;
	background: var(--bg-revert);
}

pre code {
	color: inherit;
	background: inherit;
}

iframe {
	border: none;
}

.card {
    padding: 15px;
    border: 3px solid var(--second);
}
.card.dashed { border: 3px dashed var(--second); }


/******************************/
/***       UTILITAIRES      ***/
/******************************/

.single .fullwidth {
  width: 100%;
  position: relative;
  padding: 0;
  padding-top: 56.2963%;
  margin-bottom: 2em;
}

.single .fullwidth iframe,
.single .fullwidth object,
.single .fullwidth embed,
.single .fullwidth img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fleft {
  float: left;
  margin-right: 1em;
}

.fright {
  float: right;
  margin-right: 1em;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

.center {
	text-align: center;
}

.right {
  text-align: right;
}

/* Only display content to screen readers */
/* See: http://a11yproject.com/posts/how-to-hide-content/ */
/* See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	clip-path: inset(50%);
	border: 0;
}

/* Use in conjunction with .sr-only to only display content when it's focused. */
/* Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 */
/* Credit: HTML5 Boilerplate */

.sr-only-focusable:active,
.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	clip-path: none;
}

/******************************/
/***     HOME - polyglot    ***/
/******************************/


.polyglot {
	position: absolute;
	top: 50px;
	right: 0;
	padding: 5px;
	border: 2px solid var(--second);
	border-right: none;
	transition: background .3s;
}
.polyglot:hover { background: var(--second); }

.polyglot a { transition: color .3s; }
.polyglot:hover a {
	color: var(--bg);
	text-decoration: none;	
}

/******************************/
/***           HOME         ***/
/******************************/

.article-link {
	display: inline-block;
	padding: 3px 10px;
	text-decoration: none;
	font-weight: bold;
	color: var(--white);
	background: var(--second);
	transition: color .3s, background .3s;
}

.article-link:hover {
	color: var(--white);
    background: var(--third);
}


.liens hr,
.now hr,
.collection hr,
.single hr {
	display: block;
	clear: both;
	margin: 2em 0;
	padding: 0;
	border: 0;
	font-family: arial;
	text-align: center;
	font-size: 25px;
	line-height: 1;
}
.liens hr:after,
.now hr:after,
.collection hr:after,
.single hr:after {
	content: "\273D \273D \273D";
	height: 0;			
	letter-spacing: 1em;
	color: var(--third);
}


.single p  {
	margin-bottom: 1em;
}

.single img {
	max-width: 100%;
}

.single blockquote {
	position: relative;
	width:  90%;
	margin: 1em auto;
	padding-left: 1em;
	border-left: 5px solid var(--fifth);
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 100;
}
.single blockquote:before, .single blockquote:after {
	color: var(--third);
	font-size: 2em;
	line-height: 1em;
}

.single blockquote.small {
	font-size: 1em;
}

/*.single blockquote:before { content: '\201e'}
.single blockquote:after { content: '\201c';}*/
.single blockquote footer {
	display: inline-block;
	font-size: 70%;
	text-align:center;
	top:50%
}
.single blockquote footer:before { content: ' \2015 '}

/* vidéo embed */
.single figure iframe {
	width: 640px;
	height: 360px;
	margin: 1em 0;
}



/******************************/
/***         HEADER         ***/
/******************************/

header {
	position: relative;
}

.header-menu {
	position: absolute;
	right: 0;
	top: 25px;
	font-size: 20px;
}

.header-menu a, .header-menu button {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 5px;
	transition: color .3s;
}

.header-menu button {
	font-size: 20px;
	color: var(--second);
	border: none;
	background: none;
}
.header-menu button:hover { color: var(--third); }



/******************************/
/***         FOOTER         ***/
/******************************/

footer {
	position: relative;
	text-align: center;
}


/******************************/
/***    BLOG & CATEGORIES   ***/
/******************************/
.page:after {
	clear: both;
}

.blog article {
	position: relative;
	margin: 0 auto 100px;
	height: 300px;
	width: 980px;
}

.blog article .article-image img {
	display: block;
}

.blog article .article-infos {
	background: var(--bg);
}

.blog article .article-link {
	position: absolute;
	right: 8px;
	top: 8px;
}

.blog article .article-infos h2 {
	width: 550px;
	font-size: 19px;
}

.blog article .article-infos h2 a,
.blog article .article-infos p a {
	text-decoration: none;
	color: var(--txt);
}

.blog article:nth-of-type(odd) .article-infos {
	position: absolute;
	width: 650px;
	bottom: -50px;
	-webkit-box-shadow: -10px -10px 0px 0px var(--second-50);
	-moz-box-shadow: -10px -10px 0px 0px var(--second-50);
	box-shadow: -10px -10px 0px 0px var(--second-50);
}
.blog article:nth-of-type(odd):hover .article-infos {
	border: 3px solid var(--third);
	-webkit-box-shadow: -10px -10px 0px 0px var(--third-50);
	-moz-box-shadow: -10px -10px 0px 0px var(--third-50);
	box-shadow: -10px -10px 0px 0px var(--third-50);
}


.blog article:nth-of-type(even) { margin-bottom: -100px; }
.blog article:nth-of-type(even):last-child { margin-bottom: 100px; }


.blog article:nth-of-type(even) .article-image {
	position: absolute;
	right: 0;
	top: 50px;
}

.blog article:nth-of-type(even) .article-infos {
	position: absolute;
	width: 650px;
	left: 0px;
	top: 0px;
	-webkit-box-shadow: 10px 10px 0px 0px var(--second-50);
	-moz-box-shadow: 10px 10px 0px 0px var(--second-50);
	box-shadow: 10px 10px 0px 0px var(--second-50);
}
.blog article:nth-of-type(even):hover .article-infos {
	border: 3px solid var(--third);
	-webkit-box-shadow: 10px 10px 0px 0px var(--third-50);
	-moz-box-shadow: 10px 10px 0px 0px var(--third-50);
	box-shadow: 10px 10px 0px 0px var(--third-50);
}

.blog .listeCategs {
	list-style-type: none;
	margin: 2em 0;
	text-align: center;
}

.blog .listeCategs li { display: inline-block; }

.blog .listeCategs li a { font-weight: bold; }
.blog .listeCategs li a.current { color: var(--third); }


/******************************/
/***           RPI          ***/
/******************************/

.rpi {
    position: fixed;
    z-index: 31;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    background-color: transparent;
    color: var(--third);
}

.rpi::-webkit-progress-bar {
    background-color: transparent;
}

.rpi::-webkit-progress-value {
    background-color: var(--third);
}

.rpi::-moz-progress-bar {
    background-color: var(--third);
}


/******************************/
/***           RWD          ***/
/******************************/

@media screen and (min-width: 1101px) {
	.blog article:nth-of-type(odd) .article-infos {
		left: 325px;
	}
}

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

	.blog article {
		width: 100%;
	}

	.blog article:nth-of-type(odd) .article-infos {
		right: 0;
	}
}

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

	.blog article:nth-of-type(even) { margin-bottom: 100px; }

}

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

	.blog article:nth-of-type(even) h2,
	.blog article:nth-of-type(odd) h2 {
		position: relative;
		width: 315px;
	}

	.blog article:nth-of-type(even),
	.blog article:nth-of-type(odd) {
		width: 400px;
		height: auto;
		margin: 0 auto 50px;
	}

	.blog article:nth-of-type(even) .article-infos,
	.blog article:nth-of-type(odd) .article-infos {
		width: 400px;
	}

	.blog article:nth-of-type(even) .article-infos,
	.blog article:nth-of-type(odd) .article-infos,
	.blog article:nth-of-type(even) .article-image,
	.blog article:nth-of-type(odd) .article-image {
		position: relative;
		left: unset;
		right: unset;
		top: unset;
		bottom: unset;		
	}

	.blog article:nth-of-type(even) .article-infos,
	.blog article:nth-of-type(odd) .article-infos {
		-webkit-box-shadow: 10px 10px 0px 0px var(--second-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--second-50);
		box-shadow: 10px 10px 0px 0px var(--second-50);
	}
	.blog article:nth-of-type(even):hover .article-infos,
	.blog article:nth-of-type(odd):hover .article-infos {
		border: 3px solid var(--third);
		-webkit-box-shadow: 10px 10px 0px 0px var(--fifth-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--fifth-50);
		box-shadow: 10px 10px 0px 0px var(--fifth-50);
	}

	.blog article:nth-of-type(even):last-child { margin-bottom: 50px; }
	
}



/******************************/
/***     BLOG - Article     ***/
/******************************/

.prev, .next {
	position: absolute;
	top: 100px;
	padding: 5px;
	border: 2px solid var(--second);
	transition: color .3s, background .3s;
}
.prev:hover, .next:hover {
	color: var(--bg);
	text-decoration: none;
	background: var(--second);
}

.prev {
	left: 0;
	border-left: none;
}
.next {
	right: 0;
	border-right: none;
}


.article.single article  {
	font-size: 20px;
}

.article.single article h2 {
	margin-top: 35px;
	margin-bottom: 15px;
	text-align: center;
	font-family: 'kreon', Georgia, "Times New Roman", serif;
	font-size: 48px;
    font-weight: bold;
	color: var(--txt);
}

.article.single article h2.vademecum {
	padding-bottom: 30px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 27px;
	color: var(--txt);
	border-bottom: 2px dashed var(--second);
}

.article.single article h2.vademecum span {
	display: block;
	font-size: 22px;
	line-height: 35px;
    color: var(--second);
}

.article.single article h2.vademecum span.big {
	font-size: 48px;
}



.article.single article h3 {
	margin: 40px 0 10px;
	padding-left: 15px;
	font-size: 1.3em;
	border-left: 5px solid var(--third);
}

.article.single article h3.vademecum {
    padding: 8px;
    text-align: center;
    color: var(--second);
    border: 2px dashed var(--third);
}


.article.single article h4 {
	display: inline-block;
	margin: 30px 0 10px;
	color: var(--second);
}

.article.single article ul,
.article.single article ol {
	margin-bottom: 1.5em;
}

.article.single article ul li,
.article.single article ol li {
	margin-left: 3.5em;
}

.article.single article .olDMH {
	list-style: none;
	counter-reset: li 10;
}

.article.single article .olDMH > li::before {
	content: counter(li) ' \02013';
	display: inline-block;
	width: 3em;
	margin-left: -2.5em;
	margin-right: 6px;
	text-align: right;
	font-family: 'theodonisvilla', 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
	color: var(--second);
}

.article.single article .olDMH > li { counter-increment: li; }

.article.single article .olDMH > li > strong:first-child {
	color: var(--second);
}

.article.single .article-infos  {
	text-align: center;
	font-size: 16px;
	margin-bottom: 50px;
}

.article.single img  {
	display: block;
	margin: 1em auto;
}

.article.single .legend {
	text-align: center;
	font-size: 0.8em;
	font-style: italic;
}

.article.single .top10 h3 {
	text-align: center;
	font-size: 35px;
	font-family: 'theodonisvilla', 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
	color: var(--second);
	border: none;
}

.article.single .top10 h3 + strong {
	color: var(--second);
}

.article.single .cols,
.now .cols {
	display: inline-block;
	vertical-align: top;
}

.article.single .cols-2,
.now .cols-2 {
	width: 47%;
}

.article.single .cols-3,
.now .cols-3 {
	width: 30%;
}

.article.single .col-2-3,
.now .col-2-3 {
	width: 60%;
}

.article.single .cols-4,
.now .cols-4 {
	width: 23%;
}


.article.single .col,
.now .col {
 	margin-right: 4%;
}


.article.single .cols-4.col,
.now .cols-4.col {
 	margin-right: 2%;
}

.article.single .col-nm,
.now .col-nm {
 	margin-right: 0;
}

.article.single .cols figure *,
.now .cols figure * {
 	max-width: 100%;
}

.article.single a.en:after{
	content:'[EN]';
	margin-left: .5em;
	font-size: .5em;
}

.article.single a.fr:after{
	content:'[FR]';
	margin-left: .5em;
	font-size: .5em;
}

.article.single .box {
	width: 80%;
	margin: 2em auto;
	border:  3px solid var(--second);
}

.article.single .box p,
.article.single .box ul {
	margin:  1em;
}

.article.single .box .col { margin-left: 2%; margin-right: 2%; }
.article.single .box .col-nm { margin-left: 0; margin-right: 0; }

.article.single .drama,
.now .drama {
	font-family: 'theodonisvilla';
    letter-spacing: 1px;
    color: var(--third);
}

/*         Card Vademecum         */

.article.single .card-vademecum {
margin-bottom: 20px;
border: 3px solid var(--second);
}
.article.single .card-vademecum:hover { border: 3px solid var(--third); }

.article.single .card-vademecum h4 {
width: 100%;
margin: 0 0 10px;
padding: 10px;
background: var(--second);
}
.article.single .card-vademecum:hover h4 { background:var(--third); }

.article.single .card-vademecum h4 a {
    color: var(--white);
    font-weight: bold;
    text-decoration: none;
    background: none;
    transition: none;
}

.article.single .card-vademecum a:hover,
.article.single .card-vademecum a:focus {
    background: none;
}

.article.single .card-vademecum p {
margin: 0 10px 1em;
}

.article.single .card-vademecum .infos {
font-size: 75%;
}

/*         Exergue         */

.exergue {
  clear: both;
  position: relative;
  width: 80%;
  margin: 2em auto;
}

.exergue div {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    font-size: 90px;
    color: var(--fifth-30);
    z-index: 1;
}

.exergue p {
    position: relative;
    font-family: 'Merriweather', serif;
    font-size: 20px;
    font-style: italic;
    color: var(--third);
    z-index: 2;
}

/*         Pub interne         */

.pubArticle  {
    padding:  25px !important;
    margin-bottom:  1em;
    background:  rvar(--second-10);
    border-bottom:  2px solid var(--second);
}

.pubArticle p  {
    margin-bottom:  0;
}

.pubArticle .aLireAussi  {
    text-transform:  uppercase;
    font-size:  12px;
}

.pubArticle img  {
    float:  left;
    margin-right:  25px;
}

.pubArticle .titreArticle  {
    font-size:  18px
}

.pubArticle br {
    display: none;
}

/* Notes de bas de page */
.notesbox {
    position: fixed;
    z-index: 30;
    width: 100%;
    bottom: -1px;
    left: 0;
    max-height: 60%;
    background: #ffffff;
    padding: 0px;
    margin: 0px;
}

.notesbox.plein {
    border-top: 1px solid rgb(204, 204, 204);
    padding: 0.4em 0px 1em;
}

.notesbox div {
    display: none;
}

.notesbox div.visible {
    display: block;
}


/* Mise en valeur des textes sur lesquels des liens pointent directement */
::target-text {
	background-color: var(--fifth-30);
}


/******************************/
/***     BLOG - Related     ***/
/******************************/

.related {
	margin-top: 50px;
}

.related h2 {
	text-align: center;
	font-family: 'kreon', Georgia, "Times New Roman", serif;
	font-size: 30px;
}
.related h2::before,
.related h2::after {
	content: "♥";
	padding: 0 15px;
}

.related-articles {
	list-style-type: none;
}

.related-article {
	display: inline-block;
	max-width: 380px;
	margin-left: 20px;
	overflow: hidden;
	vertical-align: top;
}
.related-article:first-of-type  { margin-left: 0; }

.related-article img {
	width: 100%;
}

.related-article h3 a,
.related-article p a {
	text-decoration: none;
	color: var(--txt);
}

.related-article p a {
	font-weight: normal;
}



/******************************/
/***     BLOG - Comments    ***/
/******************************/

.comments {
	margin-top: 50px;
	margin-bottom: 50px;
}

.comments-list {
	margin-bottom: 3em;
}

.comments-list .comment {
	margin-bottom: 2em;
}

.comments h2 {
	text-align: center;
	font-family: 'kreon', Georgia, "Times New Roman", serif;
	font-size: 30px;
	margin-bottom: 1.5em;
}
.comments h2::before,
.comments h2::after {
	content: "♠️";
	padding: 0 15px;
}

.author-avatar,
.comment-body {
	display: inline-block;
	vertical-align: top;
}

.comment-body {
	margin-left: 15px;
}

#kommentform label {
	margin-right: 1em;
}

#kommentform input {
	padding: 0.5em;
	margin-right: 2em;
	margin-bottom: 1em;
	background: var(--second-15);
    border: 2px solid var(--second);
}
#kommentform input:active {
	background: var(--fifth-15);
    border: 2px solid var(--third);
}

#kommentform {
	margin-top: 1em;
}

#kommentform label {
	display: block;
	margin-bottom: 0.5em;
}

#kommentform .form-feedback {
	margin-bottom: 1em;
}

#kommentform textarea {
	width: 100%;
	height: 200px;
	padding: 1em;
	margin-bottom: 1em;
	background: var(--second-15);
    border: 2px solid var(--second);
}

#kommentform input[type="submit"] {
	width: 100%;
	padding: 0.5em;
	margin-top: 1em;
	font-size: 1em;
	font-weight: bold;
	color: var(--white);
	background: var(--second);
	border: none;
	transition: color .3s, background .3s;
}

#kommentform input[type="submit"]:hover {
	color: var(--white);
    background: var(--third);
}

#kommentform #url { /* faux input pour antispam*/
	width: 250px;
}

.comment.preview {
	margin-bottom: 25px;
}

.comment.preview .previsu {
	font-style: italic;
}

/*.share-elsewhere {
	margin-bottom: 15px;
}*/


/******************************/
/***       COLLECTIONS      ***/
/******************************/

.collection h2 {
	font-family: 'theodonisvilla', 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
	font-size: 40px;
    font-weight: normal;
    color: var(--second);
}

.collection .descr p {
	margin-top: 2em;
	text-align: center;
	font-weight: bold;
}

.collection .items {
	margin-left: -10px;
	margin-right: -10px;
}

.collection .item {
	position: relative;
	vertical-align: top;
	display: inline-block;
	width: 30%;
	margin: 30px 10px;
}

.collection .item .itemInfos {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
	text-align: center;
	color: var(--white);
	background-color: var(--fifth-80);
	transition: opacity .3s;
}

.collection .item .seriesTitre,
.collection .item .filmsTitre {
	font-size: 25px;
	font-weight: bold;
	margin: 3em 0 0;
}

.collection .item .seriesInfos,
.collection .item .filmsInfos {
	margin: 0 0 1em;
}

.collection .item .icons {
	position: absolute;
	bottom: 0px;
	right: 5px;
	opacity: 0;
	transition: opacity .3s;
}

.collection .descr svg {
	width: 20px;
	vertical-align: bottom;
	fill: #000000;
}

.collection .item svg {
	width: 20px;
	fill: #ffffff;
}

.collection .item:hover .itemInfos,
.collection .item:hover .icons {
	opacity: 1;
}

.collection .item h3 a {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	color: var(--white);
	text-decoration: underline;
}

.collection .item img {
	display: block;
	width: 100%;
}


/******************************/
/***          BOOKS         ***/
/******************************/

.books {

}

.book {
	width: 46%;
	float: left;
	margin-bottom: 100px;
}

.book:nth-child(odd) { margin-right: 4%; }

.book-cover {
	position: relative;
}

.book-cover img {
	max-width: 100%;
}

.book .date {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: inline-block;
	padding: 5px 10px;
	-webkit-transform: translate(-50%,25%);
	-moz-transform: translate(-50%,25%);
	-ms-transform: translate(-50%,25%);
	-o-transform: translate(-50%,25%);
	transform: translate(-50%,25%);
	color: var(--txt-revert);
	background: var(--bg-revert);
}
.book .date a { color: var(--txt-revert); }

.book h2 {
	margin-top: 25px;
	text-align: center;
	height: 100px;
}

.book h2 a { color: var(--txt); }



/******************************/
/***          STATS         ***/
/******************************/

.tableStats {
	width: 100%;
}

.tableStats,
.tableStats th,
.tableStats td {
	border: 1px solid #202020;
	border-collapse: collapse;
	padding: .2em;
}

.tableStats td {
	text-align: center;
}


/******************************/
/***           RWD          ***/
/******************************/

@media screen and (max-width: 1300px) {
	.page {
		width: 90%;
		margin: 0 auto;
	}

	.article.single {
		margin-top: 50px;
	}
}

@media screen and (max-width: 1100px) {
	.book {
		width: 100%;
		float: none;
	}

	.book img {
		display: block;
		margin: 0 auto;
	}

	.book:nth-child(odd) { margin-right: 0; }

	.book h2 {
		height: auto;
	}
}

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

	.header-menu {
		position: relative;
		top: unset;
		right: unset;
		margin: 0 auto 50px;
		text-align: center;
	}

	.article.single .cols,
	.now .cols {
		width: 100% !important;
	}

	.article.single .col { margin-right: 0; }

}

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

	.header-menu {
		max-width: 100%;
	}

	/*.prev, .next {
		top: 150px;
	}*/

	.article.single .article-infos {
		font-size: 13px;
	}

	.article.single article  {
		font-size: 16px;
	}

	.article.single article h2 {
		margin-top: 25px;
		margin-bottom: 10px;
		font-size: 28px;
	    font-weight: bold;
		color: var(--txt);
	}

	.article.single article h2.vademecum {
		padding-bottom: 30px;
	    margin-bottom: 30px;
	    text-align: center;
	    font-size: 27px;
		color: var(--txt);
		border-bottom: 2px dashed var(--second);
	}

	.article.single article h2.vademecum span {
		display: block;
		font-size: 22px;
		line-height: 35px;
	    color: var(--second);
	}

	.article.single article h2.vademecum span.big {
		font-size: 48px;
	}



	.article.single article h3 {
		margin: 30px 0 10px;
		padding-left: 15px;
		border-left: 5px solid var(--third);
	}

	.article.single article h3.vademecum {
	    padding: 8px;
	    text-align: center;
	    color: var(--second);
	    border: 2px dashed var(--third);
	}


	.article.single article h4 {
		display: inline-block;
		margin: 25px 0 10px;
		color: var(--third);
	}

	.article.single article ul li, .article.single article ol li {
	  margin-left: 1em;
	}

	.article.single .top10 h3 {
		font-size: 25px;
	}

	.related h2 {
		font-size: 25px;
	}

	.related-article {
		margin-left: 0;
	}

	.comments h2::before,
	.comments h2::after {
		content: "♠️";
		padding: 0 5px;
	}

	.comments-form input {
		margin-right: 0;
	}
	
}

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

	.prev, .next {
		top: 125px;
	}

}