:root {
	--color-primary: hsla(188,100%,41%,1);
	--color-primary-hover: hsla(188,100%,66%,1);
	--color-primary-70: hsla(188,100%,46%,.7);
	--color-primary-20: hsla(188,100%,46%,.2);
	--color-white: hsla(100,100%,100%,1);
	--icon-share: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" viewBox="0 0 600 666.7"><path d="M500,666.7H100c-55.1,0-100-44.9-100-100v-200c0-55.1,44.9-100,100-100h66.7c18.4,0,33.3,14.9,33.3,33.3s-14.9,33.3-33.3,33.3h-66.7c-18.4,0-33.3,15-33.3,33.3v200c0,18.4,15,33.3,33.3,33.3h400c18.4,0,33.3-15,33.3-33.3v-200c0-18.4-15-33.3-33.3-33.3h-66.7c-18.4,0-33.3-14.9-33.3-33.3s14.9-33.3,33.3-33.3h66.7c55.1,0,100,44.9,100,100v200c0,55.1-44.9,100-100,100ZM300,533.3c-18.4,0-33.3-14.9-33.3-33.3V113.8l-43.1,43.1c-13,13-34.1,13-47.1,0s-13-34.1,0-47.1L276.4,9.8c3.5-3.5,7.5-6,11.8-7.6,2.9-1.1,6.1-1.8,9.3-2h0c1.6-.1,3.1-.1,4.7,0h0c3.3.2,6.4.9,9.3,2,4.3,1.6,8.3,4.2,11.8,7.6l100,100c13,13,13,34.1,0,47.1s-34.1,13-47.1,0l-43.1-43.1v386.2c0,18.4-14.9,33.3-33.3,33.3h.2Z"/></svg>');	
	--icon-comments: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" id="Layer_1" version="1.1" viewBox="0 0 775 800"><path class="st0" d="M162.5,250c20.7,0,37.5,16.8,37.5,37.5s-16.8,37.5-37.5,37.5-37.5-16.8-37.5-37.5,16.8-37.5,37.5-37.5h0Z"/><path class="st0" d="M312.5,250c20.7,0,37.5,16.8,37.5,37.5s-16.8,37.5-37.5,37.5-37.5-16.8-37.5-37.5,16.8-37.5,37.5-37.5h0Z"/><path class="st0" d="M462.5,250c20.7,0,37.5,16.8,37.5,37.5s-16.8,37.5-37.5,37.5-37.5-16.8-37.5-37.5,16.8-37.5,37.5-37.5h0Z"/><path class="st0" d="M240.9,568.4c19.4,3.2,63.6,6.6,84.1,6.6,179.5,0,300-133.6,300-290.6S474.4,0,325,0,0,127.3,0,284.4s34.7,168.2,100,223.9v141.8l140.9-81.6h0Z"/><path class="st0" d="M673.7,228.5l1.3,21.5c.2,20.4,0,18.6,0,37.5,0,199.4-157.1,337.5-375,337.5h-75c59.5,58.2,128.7,93.8,225,93.8s40.5-1.9,59.9-5l140.1,86.3v-141.8c76-52.1,125-132.8,125-223.9s-39-154.1-101.3-205.9h0Z"/></svg>');
	--icon-reply: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" id="Layer_1" version="1.1" viewBox="0 0 771.5 800.6"><g id="Page-1" sketch:type="MSPage"><g id="Icon-Set-Filled" sketch:type="MSLayerGroup"><path id="reply" class="st0" d="M342.5,200.6V32.1c1-8.6-1.3-17.1-7.9-23.7-11.3-11.1-29.7-11.1-41,0L8.2,321.5c-6,6-8.6,13.7-8.2,21.7-.4,7.7,2.2,15.7,8.2,21.7l283.8,311.1c10.6,9.1,30.1,14.3,42.5,1.7,6.5-6.3,9.3-12,8.3-20.3v-171.4c188.6,0,359.1,135.7,393,314.6,22.8-52.6,35.6-110.3,35.6-171.1,0-236.9-192.1-428.9-429.1-428.9" sketch:type="MSShapeGroup"/></g></g></svg>');	
	}

html summary::-webkit-details-marker {
  display: none;
  }
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-family: 'Zolando Sans', 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
	Helvetica, Arial, sans-serif, system-ui;
	font-optical-sizing: auto;
	padding: 0;
	margin: 0;
	/* text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
	font-synthesis: none;
	-moz-font-feature-settings: 'kern';
	shape-rendering: geometricPrecision; */
	direction: ltr;
	line-height: 100%;
	}
html {
	position: relative;
	}	
body,html {
	/* height: 100%; */
	}
body {
	font-size: 13px;
	animation: bugfix infinite 1s;
	-webkit-animation: bugfix infinite 1s;
	min-width: 375px;
	position: relative;
	width: 100%;
	line-height: 100%;
	-webkit-overflow-scrolling: touch;
	min-height: 100vh;
	background: #F5F5F5;
	color: #000;
	display: grid;
	grid-gap: 15px;
	grid-template-rows: min-content auto min-content;
	justify-content: flex-start;
	align-items: flex-start;
	}	
body::before {
	content: '';
	height: 100vh;
	width: 100vw;
	position: fixed;
	background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
	top: 0;
	transform-style: flat;
	pointer-events: none;
	z-index: -1;
	}	
svg {
	shape-rendering: geometricPrecision;
	}		
input[type="text"],
input[type="submit"],
textarea, 
fieldset,
button {
	outline: 0;
	border: 0;
	}
a {
	color: var(--color-primary);
	}
a:hover {
	text-decoration: none;
	}	
.zalando-sans-<uniquifier> {
	font-family: "Zalando Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
	}
#fatal-error {
	display: none;
	}
.line {
	width: 100%;
	background: hsla(0,0%,0%,.2);
	height: 1px;
	clear: both;
	}
main.main .container {
	min-width: 100dvw;
	}
.container {
	padding: 0 calc(21dvw - 20px);
	}	

.bonus-bar {
	padding: 10px calc(21dvw - 20px);
	position: sticky;
	background: hsla(188,100%,46%,.1);
	display: flex;
	justify-content: flex-start;
	width: 100%;
	top: 0;
	}
	
/* ------- SIDEBAR -----------*/


.navigation {
	position: fixed;
	top: 5px;
	right: 10px;
	height: calc(100% - 65px);
	height: 0;
	z-index: 99;
	}
.hamburger {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	justify-items: flex-end;
	z-index: 120;
	top: calc(-.02dvw + 35px); 
	width: fit-content;
	padding: 25px 40px 25px 10px;
	right: -10px;
	position: absolute;
	grid-row-gap: 3px;
	}
.hamburger div {
	background-color: hsla(0,0%,70%,1);
	position: relative;
	width: 25px;
	height: 2px;
	margin-top: 0;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
#toggle {
  display: none;
}
#toggle:checked + .hamburger .top {
  -webkit-transform: rotate(-45deg);
		  transform: rotate(-45deg);
  margin-top: 5px;
}
#toggle:checked + .hamburger .meat {
  -webkit-transform: rotate(45deg);
		  transform: rotate(45deg);
  margin-top: -5px;
}
#toggle:checked + .hamburger .bottom {
  -webkit-transform: scale(0);
		  transform: scale(0);
}
#toggle:checked ~ .nav-menu {
	right: -12px;
	width: fit-content;
	}
.nav-menu {
	width: 100%;
	background-color: hsla(0,100%,100%,.6);
	backdrop-filter: blur(20px);
	overflow: hidden;
	width: fit-content;
	right: -380px;
	-webkit-transition: right 0.4s ease;
	transition: right 0.4s ease;
	position: relative;
	padding: 40px 60px 40px 40px;
	border: 1px solid #ccc;
	border-radius: 10px 0 0 10px;
	top: 20px;
	}	
	
	

	
/* ---------- Header ---------- */

.heading-small {
	font-size: 2rem;
}
.header {
	width: 100%;
	z-index: 2;
	position: sticky;
	top: 0;
	background: transparent;
	backdrop-filter: blur(40px);
	display: grid;
	grid-template-columns: min-content max-content;
	align-items: center;	
	}
.header a {
	color: #fff;
	}
.header a.back-to-black {
	display: flex;
	align-items: center;
	text-decoration: none;
	grid-column-gap: 10px;
	}
.header a.back-to-black img {
	height: 15px;
	}	
.header a:hover {
	text-decoration: none;
	}
.header .container {
	padding-top: 30px;
	}
.header-tag {
	position: relative;
	left: -19dvw;
	margin-top: calc(1.9vh + (1dvw - 20px) + 20px);
	color: #999;
	}	
.logo {
	padding: 20px 30px 40px 0;
	width: calc(25dvw + 10px);
	min-width: 340px;
	max-width: 650px;
	display: block;
	}	
.nav {
	text-align: right;
	padding-top: 0;
	}
ul.menu {
	display: flex;
	list-style: none;
	width: 100%;
	background: #eee;
	padding: 10px 15px;
	border-radius: 5px;
	}	
.menu > li {
	font-size: .85rem;
	display: flex;
	text-transform: capitalize;
	margin-right: 5px;
	color: #999;
	}
.menu > li > span {
	cursor: default;
	}
.menu > li ul {
	position: absolute;
	padding: 0;
	line-height: 2.8rem;
	z-index: 10;
	}
.menu li:after {
	content: '>';
	margin-left: 5px;
	}
.menu li:last-child:after {
	content: '';
	}
.menu > li:last-of-type ul {
	right: 0;
	}
.menu > li:not(:hover) ul {
	display: none;
	}
.menu ul li {
	display: block;
	margin: 0;
	padding: 0 1rem;
	background-color: #fff;
	text-align: left;
	}
.menu .sub-menu {
	overflow-y: auto;
	}
.menu .sub-menu li {
	padding: 0 0.35rem;
	}
.menu .sub-menu li:last-of-type {
	padding-bottom: 0.35rem;
	}
.menu>li span::before {/* / menu */
	content: '25bc';
	padding-right: 0.5rem;
	}
ul.menu .noactive:hover,
ul.menu .active span,
ul.menu span.active,
ul.menu li.active a,
ul.menu a.active,
ul.menu li span:hover,
ul.menu li a:hover {/* pluCss1.3.1 fix : plxMyshop 0.13.x, maybe more */
	color: #000 !important;
	text-decoration: none;
	}
ul.menu li span,
ul.menu li a {/* pluCss1.3.1 fix : plxMyshop 0.13.x, maybe more */
	display: inline-block;
	width: 100%;
	white-space: nowrap;
	}
ul.menu li span a,
ul.menu li a span {/* pluCss1.3.1 fix : plxMyshop 0.13.x, maybe more */
	white-space: nowrap;
	display: inline;
	margin-right: -.35rem;
	padding-left: 0;
	}
ul.menu li.noactive a,
ul.menu a.noactive{
	border-radius: 1px;
	color: #258fd6;
	}


/* ---------- Main ---------- */

.main {
	padding-top: 0;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	width: 100%;
	}



/* ------- Pagination ------- */

.pagination {
	display: flex;
	width: 100%;
	background: #eee;
	padding: 10px 15px;
	border-radius: 5px;
	margin: 50px 0 0 0;
	}
.pagination a {
	border-radius: 5px;
}

.pagination a:hover {
	color: #fff;
	text-decoration: none;
}

.pagination span:first-letter,
.pagination a:first-letter {
	text-transform: uppercase;
}

.p_first,
.p_prev,
.p_current,
.p_next,
.p_last {
	display: inline-block;
}
.p_current {
	margin: 0 auto;
	}
.p_next:after {
	content: '>';
	right: -5px;
	position: relative;
	color: var(--color-primary);
	}
.p_prev:before {
	content: '<';
	left: -5px;
	position: relative;
	color: var(--color-primary);
	}
.pagination:empty {
	display: none;
	}




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

body.mode-home article,
body.mode-categorie article,
body.mode-archives article {
	border-bottom: 1px solid #333;
	}
article {
	color: #000;
	line-height: 160%;
	font-size: 1.0rem;
	padding: 20px 0;
	margin: 20px 0 0 0;
	letter-spacing: .03em;
	width: 100%;
	font-weight: 400;

	}
article:first-child {
	margin-top: 0;
	padding-top: 0;
	}
body.mode-home .content article:nth-last-child(2),
body.mode-categorie .content article:nth-last-child(2),
body.mode-archives .content article:nth-last-child(2) {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
	}	
		
article:after {
	display:block;
	content: "";
	clear: both;
}

.article header {
	margin: 0 0 5px 0;
	}
.article header:first-child {
	margin-top: 0;
	}
.article header div {
	margin: 0;
	}
time {
	text-transform: capitalize;
	font-size: .8rem;
	}
.article header h2,
.article header h2 a {
	color: var(--color-primary);
	color: #000;
	font-size: 1.7rem;
	line-height: 140%;
	font-weight: 500;
	margin: 0;
	letter-spacing: -.01em;
	text-decoration: none;
	}
.article header h2 a {
	border-bottom: 1px dotted #666;
	}	
.article header h2 a:visited {
	color: #000;
	}	
.article header h2 a:hover {
	border-bottom: 0;
	color: var(--color-primary);
	text-decoration: none;
	}

.article header small,
.comment small,
#id_answer small {
	color: #9EABB3;
	line-height: 150%;
	display: flex;
	align-items: center;
	}
#id_answer small {
	display: block;
	margin: 15px 0;
	}
.article header small {
	display: flex;
	flex-flow: column;
	grid-gap: 5px;
	align-items: flex-start;
	}
.article header span:before,
.article header time:before,
.article footer span:before {
	padding-left: 1.5rem;
	padding-right: .3rem;
	}
.alert.red {
	background: #ff0000;
	padding: 10px;
	}
.alert.green {
	background: green;
	padding: 10px;
	}	
.article .art-date {
	font-size: .8rem;
	font-weight: 400;
	padding: 0 0 20px 0;
	color: #999;
	}
.written-by,
.classified-in {
	font-size: .9rem;
	white-space: nowrap;
	position: relative;
	font-weight: 300;
	}
.written-by {
	grid-area: written-by;
	}	
.written-by strong {
	font-weight: 600;
	}	
.classified-in {
	color: #999;
	font-weight: 300;
	grid-area: classified-in;
	display: none;
	}	
/* .written-by:after {
	content: '|';
	position: absolute;
	right: -10px;
	top: 0;
	color: #999;
	}	 */

/* body.page.mode-categorie .written-by:after {
	display: none;
	}	 */
a.fn-login {
	background: var(--color-primary);
	padding: 8px 14px;
	border-radius: 10px;
	color: white;
	text-decoration: none;
	font-weight: 500;
	display: block;
	width: fit-content;
	font-size: .8rem;
	line-height: 100%;
	white-space: nowrap;
	margin: 20px 0 0 0;
	}	
a.art-nb-com {
	background: var(--color-primary);
	padding: 8px 14px 8px 30px;
	border-radius: 10px;
	color: white;
	text-decoration: none;
	font-weight: 500;
	display: block;
	width: fit-content;
	font-size: .8rem;
	line-height: 100%;
	white-space: nowrap;
	grid-area: number-of-comments;
	position: relative;
	}	
a.art-nb-com:hover {
	background: #444;
	}	
a.art-nb-com::before {
	mask: var(--icon-comments) left center / 14px 14px no-repeat;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	content: '';
	background-color: white;
	}		
.article-end {
	border-bottom: 1px solid #333;
	padding: 15px 0;
	margin: 0 0 15px 0;
	display: grid;
	align-items: center;
	grid-template-columns: auto min-content min-content;
	grid-column-gap: 15px;
	grid-template-areas:
		"written-by number-of-comments share-button";	
	width: 100%;	
	}
.article img.art_thumbnail {
	padding: 10px 25px 15px 0;
	float: left;
	max-height: 150px;
	}
.article p {
	line-height: 140%;
	padding: 0 0 10px 0;
	}
.articlie p:first-child {
	padding-top: 0;
	}	
.article p:last-child {
	padding-bottom: 0;
	}	
.article p.more {
	padding: 0;
	font-size: .9rem;
	margin: 10px 0 0 0;
	}	
.article p.more a {
	text-decoration: none;
	}	
.article p.more a:hover {
	text-decoration: underline;
	}		
.article p.more:after {
	content: '>';
	color: var(--color-primary);
	right: -5px;
	position: relative;
	}	
.page.mode-article .article footer {
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
.article ul,
.article ol {
	margin: 10px 0 10px 40px;
	}
.article li {
	line-height: 140%;
	}
.home-bottom-container {
	display: grid;
	grid-template-columns: auto min-content min-content;
	width: 100%;
	align-items: center;
	grid-column-gap: 5px;
	/* margin: 5px 0 0 0; */
	grid-template-areas:
		"written-by comments-link share-button";
	}	
	
	
	
	
	
	
	
		

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

.comments-link {
	display: flex;
	margin: 0 0 0 0;
	}

h3#comments {
	width: 100%;
	margin: 0 0 15px 0;
	color: var(--color-primary);
	font-size: 1.0rem;
	}


#form {
	border-top: 130px solid transparent;
	margin: -130px 0 0;
}
#form input[type="text"],
#form textarea {
	border-radius: 5px;
	padding: 10px 15px;
	font-size: .9rem;
	width: 100%;
	background: #eee;
	color: #fff;
	resize: none;
	}
#form input[type="text"]::placeholder,
#form textarea::placeholder {
	color: #999;
	}	
#form input[type="submit"] {
	background: var(--color-primary);
	border-radius: 10px;
	padding: 12px 20px;
	font-size: 1.0rem;
	font-weight: 600;
	color: white;
	}	
.grid.comment-fields {
	display: grid;
	grid-auto-rows: min-content;
	grid-gap: 5px;
	margin: 15px 0 0 0;
	}
.grid.capcha {
	margin-top: 10px;
	font-size: .9rem;
	}
.grid.capcha input#id_rep {
	border-radius: 5px;
	padding: .9rem .7rem;
	text-align: center;
	display: inline-block;
	width: 30px;
	}	
.comment,
#id_answer {
	/* background: #222 url('../img/user.png') no-repeat; */
	background: #ddd;
	padding: 15px 15px 15px 20px;
	border-radius: 10px;
	border-left: 5px solid var(--color-primary);
	}
a.cancel-button {
	background: var(--color-primary);
	padding: 8px 14px;
	border-radius: 10px;
	color: black;
	text-decoration: none;
	font-weight: 500;
	display: block;
	width: fit-content;
	margin: 10px 0 0 0;
	}
.comments-link a {
	background: var(--color-primary);
	padding: 8px 14px 8px 30px;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	display: block;
	width: fit-content;
	font-size: .8rem;
	line-height: 100%;
	white-space: nowrap;
	grid-area: comments-link;
	position: relative;
	}	
.comments-link a::before {
	mask: var(--icon-comments) left center / 14px 14px no-repeat;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	content: '';
	background-color: white;
	}	
button.share-button {
	background: var(--color-primary);
	padding: 8px 14px 8px 30px;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	display: block;
	width: fit-content;
	font-size: .8rem;
	grid-area: share-button;
	cursor: pointer;
	position: relative;
	}	
button.share-button::before {
	mask: var(--icon-share) left center / 14px 14px no-repeat;
	width: 14px;
	height: 14px;
	position: absolute;
	top: calc(50% - 2px);
	left: 10px;
	transform: translateY(-50%);
	content: '';
	background-color: white;
	}	
a.reply-button {
	background: var(--color-primary);
	padding: 8px 14px 8px 30px;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	display: block;
	width: fit-content;
	font-size: .8rem;
	grid-area: reply-button;
	position: relative;
	}
a.reply-button::before {
	mask: var(--icon-reply) left center / 14px 14px no-repeat;
	width: 14px;
	height: 14px;
	position: absolute;
	top: calc(50% - 2px);
	left: 10px;
	transform: translateY(-50%);
	content: '';
	background-color: white;
	}	
a.cancel-button:hover,
.comments-link a:hover,
button.share-button:hover,
a.reply-button:hover {
	transition: all .5s ease-in-out;
	background-color: var(--color-primary-hover);
	}			
.reply-to-label {
	font-style: italic;
	}	
.comment-author {
	font-size: .8rem;
	display: inline-block;
	}	
.author-infos {
	display: none;
	}
		
blockquote .content_com {
	margin: 10px 0 20px 0;
	font-size: .9rem;
}

.type-admin {
	background-color: #F0F8FF;
	padding: .2rem .5rem;
}

.nbcom {
	background-color: #999;
	border-radius: .3rem;
	color: #fff;
	padding: .4rem .6rem;
	display: inline-block;
	text-decoration: none;
	float: left;
	margin-right: 5px;
	}

.nbcom:hover {
	background-color: #3a6c96;
	color: #fff;
	text-decoration: none;
}

.level-0 {
	margin-left: 0;
}
.comment.level-0 {
	margin: 0 0 10px 0;
	}
body.mode-article .content h3 {
	margin-top: 30px;
	font-size: 1.0rem;
	}	
.comment.level-0 div {
	display: grid;
	grid-gap: 10px;
	}
.level-1 {
	margin-left: 5rem;
}

.level-2 {
	margin-left: 10rem
}

.level-3 {
	margin-left: 15rem;
}

.level-4 {
	margin-left: 20rem;
}

.level-5,
.level-max {
	margin-left: 25rem;
}

#id_answer {
	margin: 30px 0 0 60px;
	display: none;
	}
#id_answer[style*="display: inline-block;"] + textarea {
	margin-left: 60px;
	width: calc(100% - 60px);
	}
.capcha-letter,
.capcha-word {
	font-weight: 600;
	color: var(--color-primary);
}

.capcha-word {
	border: 1px solid #999;
	border-radius: 5px;
	letter-spacing: .3rem;
	padding: .9rem .3rem .9rem .7rem;
	transition-duration: .2s;
	color: black;
	text-align: center;
	margin: 0 5px;
	display: inline-block;
	}

.capcha-word:hover {
	background-color: #666;
	color: #fff;
	transition-duration: .2s;
}

.bb-link {
	background: hsla(0,0%,0%,.1);
	align-items: center;
	padding: 15px 20px 14px 20px;
	border-radius: 10px;
	width: fit-content;
	color: black;
	text-decoration: none;
	/* margin: 0 0 20px 0; */
	display: flex;
	font-weight: 600;
	justify-content: flex-start;
	font-size: .9rem;
	transition: background .3s ease-in-out;
	}
.bb-link img {
	height: 15px;
	margin: -2px 0 0 7px;
	position: relative;
	}	
.bb-link:hover {
	background: hsla(0,100%,100%,.25);
	}
	
	
	
	
	
/* ------- Sidebar ------- */

.aside {
	padding: 20px 0;
	}

.aside h3 {
	font-size: 1.0rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 25px 0 15px 0;
	}
.aside h3:first-child {
	margin-top: 0;
	}
.aside ul {
	margin: 0 0 0 20px;
	display: grid;
	grid-auto-rows: 1fr;
	grid-gap: 10px;	
	}
.aside ul li a {
	font-size: .9rem;
	}	
.arch-list a {
	text-transform: capitalize;
	}

/* --------- tags ---------- */

.aside ul.tag-list {
	list-style-type: none;
	padding: 0;
}

.aside ul.tag-list li {
	display: inline-block;
}

.aside ul.tag-list li a {
	padding: 0 0.5rem 0 0;
}

.aside ul.tag-list li a.active {
	font-weight: bold;
	background-color: #68838b;
	color: #fff;
	padding: 0 0.5rem 0 0.5rem;
}

/* https://www.w3schools.com/colors/colors_trends.asp (The 10 Hottest Fall Colors for 2016) */

.tag-size-1 a {
	font-size: 1.0rem;
	/* Riverside  */
	color: #4C6A92;
}

.tag-size-2 a {
	font-size: 1.2rem;
	/* Airy Blue  */
	color: #92B6D5;
}

.tag-size-3 a {
	font-size: 1.4rem;
	/* Sharkskin  */
	color: #838487;
}

.tag-size-4 a {
	font-size: 1.6rem;
	/* Bodacious */
	color: #B76BA3;
}

.tag-size-5 a {
	color: #AF9483;
	/* Warm Taupe */
	font-size: 1.8rem;
}

.tag-size-6 a {
	color: #AD5D5D;
	/* Dusty Cedar */
	font-size: 2.0rem;
}

.tag-size-7 a {
	font-size: 2.2rem;
	/* Lush Meadow */
	color: #006E51;
}

.tag-size-8 a {
	font-size: 2.4rem;
	/* Spicy Mustard */
	color: #D8AE47;
}

.tag-size-9 a {
	font-size: 2.6rem;
	/* Potter's Clay */
	color: #9E4624;
}

.tag-size-10 a {
	font-size: 2.8rem;
	/* Aurora Red */
	color: #B93A32;
}

.tag-size-11 a {
	font-size: 3.0rem;
	/* Snorkel Blue */
	color: #034F84;
}

/* ---------- Footer ---------- */

.footer {
	color: #555;
	padding: 3rem 0 1rem 0;
	text-align: center;
}
.footer a {
	color: #fff;
	text-decoration: none;
	text-align: center;
	color: #555;
	display: block;
	}
.footer a:hover {
	color: #fff;
	}	
.footer img {
	width: 30px;
	}
.footer p {
	margin: 10px 0 0 0;
	font-size: .75rem;
	width: 100%;
	text-align: center;
}

.footer a:hover {
	text-decoration: none;
}



@media (max-width: 767px) {
	.bonus-bar {
		padding: 10px calc(11dvw - 20px);
		}
	.container {
		padding: 0 calc(11dvw - 20px);
		}
	.header {
		position: sticky;
		top: 0;
		grid-template-rows: min-content min-content;
		grid-template-columns: 1fr;
		}
	.header-tag {
		padding: 0 calc(15dvw - 20px) 20px calc(15dvw - 35px);
		left: 0;
		margin-top: 0;
		border-bottom: 1px solid #333;
		font-size: .7rem;
		}	
	.heading-small {
		line-height: .5;
		margin-bottom: .5rem
		}
	.header .container {
		padding-top: 0;
		}	
	.logo {
		padding-bottom: 15px;
		}	
	.header,
	.footer {
		padding: 1rem 0;
		}
	.header {
		padding: .5rem 0 1em 0;
		}	
	time {
		font-size: .75rem;
		}	
	.nav {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 4; /* responsive slide is in 3 */
		height: auto;
		max-height: 80%;
		overflow-y: auto;
		text-align: left;
		margin-top: 0;
		z-index: 10;
		border-radius: 1rem;
		background-color: #fff;
		}
	.hamburger {
		top: 10px;
		}
	.hamburger div {
		width: 20px;
		}		
	.aside h3 {
		font-size: .9rem;
		}
	.nav-menu {
		right: -420px;
		padding: 30px 50px 30px 30px;
		top: 15px;
		}
	.responsive-menu label {
		background-color: transparent;
		color: #333;
		font-size: 2.6rem;
		text-align: right;
		}
	.responsive-menu label:after {
		content: '2630';
		}
	.responsive-menu label > span {
		font-size: 1.6rem;
		}
	article {
		font-size: .85rem;
		padding: 10px 0;
		margin: 10px 0;
		line-height: 140%;
		}
	.article header h2, .article header h2 a {
		font-size: 1.2rem;
		letter-spacing: 0;
		}	
	.article .art-date {
		padding: 0 0 10px 0;
		}
	.comment,
	#id_answer {
		padding: 15px 15px 15px 20px;
		}
	.grid.capcha {
		font-size: .8rem;
		}		
	blockquote .content_com {
		margin: 5px 0 15px 0;
		}	
	.comments-link a {
		font-size: .8rem;
		}
	.article .written-by {
		font-size: .8rem;
		}
	.article img.art_thumbnail {
		max-height: 100px;
		padding: 10px 20px 15px 0;
		}			
	.level-1 {
		margin-left: 1rem;
		}
	.level-2 {
		margin-left: 2rem;
		}
	.level-3 {
		margin-left: 3rem;
		}
	.level-4 {
		margin-left: 4rem;
		}
	.level-5,
	.level-max {
		margin-left: 5rem;
		}
}

@media (max-width: 600px) {
	
	/* .article-end {
		grid-template-areas:
			"written-by classified-in classified-in"
			"share-button share-button share-button";
			grid-row-gap: 10px;	
			}	 */
	.home-bottom-container {
		/* grid-template-columns: min-content min-content;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"written-by classified-in"
			"share-button comments-link"; */
		/* display: flex;
		flex-wrap: wrap;
		grid-row-gap: 10px;	 */
		}			
	/* .classified-in {
		flex-basis: 50%;
		} */

	}

@media (max-width: 400px) {
	.logo {
		min-width: 310px;
		}
	.hamburger {
		right: -25px;
		}		
	}