/* ======================================================================
 *
 *                         Mobile up to 800px
 *
 * =================================================================== */

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

	/* ----------------------------------------------------------------------
 	 * HEADER
 	 * ------------------------------------------------------------------- */

	#burger-menu {
		z-index: 3;
		display: table;
		position: fixed; top: 0; right: 0;
		/*width: 33.3%; height: 50px;*/
		width: 25%; height: 50px;
		font-family: "pictos", sans-serif; font-size: 2em; color: white; text-shadow: 2px 0 20px #344853, -2px 0 20px #344853, 0 2px 20px #344853, 0 -2px 20px #344853;
		cursor: pointer;
	}
	#burger-menu p { display: table-cell; width: 100%; height: 100%; vertical-align: middle; }

	#toolbar {
		z-index: 2;
		position: fixed; top: 0; left: 0;
		width: 100%; height: 50px;
		opacity: 0;
		transition: all 500ms, opacity 200ms;
		transition-timing-function: ease-in-out;
	}
	#toolbar > ul > li { font-family: "pictos", sans-serif; }
	#toolbar ul li, #toolbar ul li label, #toolbar ul li a { color: white; cursor: pointer; }
	#toolbar ul { display: table; width: 100%; height: 100% }
	#toolbar ul li, #toolbar ul li a { display: table-cell; vertical-align: middle; box-sizing: border-box; height: 100%; text-align: center; }
	#toolbar ul li { background-color: #344853; font-size: 2em; transition: background-color 500ms; }
	#toolbar ul li:hover { background-color: #406980; }
	#toolbar > ul > li { position: relative; }
	#toolbar > ul:nth-child(1) > li:nth-child(4) { color: #344853; }
	#toolbar > ul li:nth-child(n+2):after { z-index: 2; content: ""; position: absolute; top: 25%; display: block; width: 1px; height: 50%; background-color: rgba(255,255,255,.5); }
	#toolbar li a { font-family: "Open Sans", sans-serif; text-decoration: none; }
	#toolbar #search-input, #toolbar #lang-selector { display: none; }
	/*#toolbar #lang-selector { z-index: 2; position: absolute; top: 50px; right: 25%; width: 25%; height: 50px; }*/
	#toolbar ul  li > ul { z-index: 2; position: absolute; top: 50px; left: 0; width: 100%; height: 50px; font-size: 0.5em; }
	#toolbar #lang-selector > * { display: table; width: 100%; height: 50px; text-align: center; }
	#toolbar form {
		display: block;
		position: absolute; top: 0; left: 0;

		width: 73%; /* 75% - padding */ height: 42px; /* 50px - padding */ overflow: hidden;
		padding: 4px 1% 4px 1%;

		background: rgb(160,160,160);
	}
	#toolbar #search-input {
		width: 96%; /* 100% - padding */ height: 100%;
		padding: 0 2%;

		border: 0; border-radius: 5px;
		background-color: white;

		font-size: 1.5em;
	}
	#toolbar.shown {
		opacity: 1;
	}

	header.browsing,
	header.browsing .article-header {
		height: 350px;
	}



	/* ----------------------------------------------------------------------
	 * CONTENT
 	 * ------------------------------------------------------------------- */

	/* ── Home ────────── */
	#container-flexbox { /* RACINE */
		gap: 140px !important;
		padding: 0 !important;
	}

	.flexbox-block .jarallax {
		height: 400px !important;
	}

	.description {
		width: calc(100% - 15px*2) !important;
		margin-left: 15px !important;
	}

	/* ── Article ────────── */
	input[type="text"] { max-width: 100%; padding: 7px 14px; font-size: 1.4em; }
	input[type=submit],input[type=button],button { padding: 7px; font-size: 1.4em; }
	canvas.particles-js-canvas-el { height: 200px; }
	section article ol, section article ul { padding-left: 1.5em; }
	section article iframe { max-height: 20%; }
	section article .comment div:nth-child(1),
	section article .comment div:nth-child(1) img { min-width: 60px; width: 60px; }
	section article .comment div:nth-child(2) { display: table-cell; padding: 14px; }
	section article .new-comment fieldset.cols2 p { width: 100%; }
	section article .new-comment input, section article .new-comment textarea {  font-size: 1em; }
	aside { padding: 0 14px; }
	#aside-slider { display: none; }
	#options-block, #search-block { display: none; }
	footer { display: table; height: 150px; }
	footer div { display: table-cell; vertical-align: middle; }
	/*figure { display: block; overflow: hidden; }
	figure, *//*img { max-width: 100%; }*/
	.theme-switcher { display: block; margin-top: 7px !important; margin-bottom: 7px !important; text-align: center; }
	.youtube { max-width: 100%; }
	.article-overview .article-intro {
		width: 90%;
		margin: 200px 5% 0 5%; /* previous style margin: 200px 5% 0 5%; */
	}
	.article-overview .article-intro:before {
		height: 50px;
	}
	.article-illustration {
		height: 250px; /* previous style 400 */
	}

}


@media screen and (max-width: 1200px) and (orientation: landscape) {
	header.landing-page h1 img#title {
		/*width: 40%;*/
	}

	header.browsing {
		height: 100%;
	}
}



/* ======================================================================
 *
 *                         Desktop from 801px
 *
 * =================================================================== */

@media screen and (min-width: 801px)
{
	/* ----------------------------------------------------------------------
 	* HEADER
 	* ------------------------------------------------------------------- */

	#burger-menu,
	#toolbar {
		display: none;
	}

	#content {
		min-width: 600px; width: 100%; max-width: 880px;
		/*margin-left: auto; margin-right: auto; /* ULTRAWIDE */
	}
	.article-overview .article-intro {
		/*width: 70%; /* ULTRAWIDE */
		margin: 250px 15% 0 15%; /* previous style margin: 200px 5% 0 5%; */
	}
	.article-overview .article-intro:before {
		height: 150px;
	}
	.article-illustration {
		height: 400px; /* previous style 400 */
	}

	/* ----------------------------------------------------------------------
 	* CONTENT
 	* ------------------------------------------------------------------- */

	#content { /* ULTRAWIDE */
		width: inherit; max-width: inherit;
	}
	#content section { /* ULTRAWIDE */
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		align-items: flex-start;
	}
	#content section article { /* ULTRAWIDE */
		width: 600px;
		padding-top: 0;
	}
	#content section article:nth-last-child(n+2) {  /* ULTRAWIDE */
		margin-bottom: inherit;
	}
	#content section article .summary { /* ULTRAWIDE */
		margin-bottom: inherit;
	}
	section article .article-content { margin: 0 60px } /* RACINE */
	.article-overview .article-intro {
		/*width: 70%;*/
		margin: 500px 30px 0 30px; /* previous style margin: 200px 5% 0 5%; */ /* previous style margin: 500px 15% 0 15%; */
	}
	.article-overview .article-intro:before {
		height: 100px;
	}
	.article-overview .article-intro h2 {
		font-size: 2em;
	}
	.article-illustration {
		height: 600px; /* previous style 400 */
	}

}



/* ======================================================================
 *
 *                         Desktop from 1200px
 *
 * =================================================================== */

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

	/* ----------------------------------------------------------------------
 	* HEADER
 	* ------------------------------------------------------------------- */

	h1 {
		padding: auto 5% auto 5%;
		text-align: center;
	}
	h1 img {
		width: 90%;
	}

	header.landing-page h1 img#title,
	header.landing-page h1 svg#title {
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	header.browsing {
		height: 250px;
	}

	header.browsing .title {
		display: none;
	}

	/* ----------------------------------------------------------------------
 	* CONTENT
 	* ------------------------------------------------------------------- */

	/* Add a vertical space between buttons presented one on top of the other */
	.new-comment button {
		margin-bottom: 20px;
	}

	/* ----------------------------------------------------------------------
 	* CONTACT
 	* ------------------------------------------------------------------- */

	#contactPopinWrapper {
		width: calc(100% - 20px); /* 1/ width: calc(100% - 10px); */
		height: calc(100% - 20px); /* 1/ height: calc(100% - 10px); */
		position: fixed;
		top: 0; /* 1/ top: 5px; */
		left: 0; /* 1/ left: 5px; */
		border: 10px solid white;/*rgb(0,192,128); /* #828282 */ /* 1/ border: 1px solid #828282; */ /* 2/ rgb(0,95,64) */
		background-color: #414141;
		overflow-y: auto;
	}
	#contactPopinSliders {
		/*max-height: calc(100% - 100px);*/
	}
	#contactPopin {
		padding: 40px 20px 0 20px;
		/*overflow: auto;*/ /* A REACTIVER SI CA FOIRE SUR MOBILE */
		position: relative;
	}
	#contactPopin h2 {
		width: calc(100% - 10px); /* 1/ width: calc(100% - 12px); */
		position: fixed;
		top: 10px; /* 1/ top: 6px; */
		left: 10px; /* 1/ left: 6px; */
		padding: 20px;
		background-color: white;/*rgb(0,190,128); /* 1/ #202020 */ /* 2/ rgb(0,95,64) */
		color: #202020;
	}
	#contactPopin form {
		margin: 21px -20px 0 -20px;
		padding: 14px 41px;
	}

}

@media screen and (min-width: 1200px)
{

	/* ----------------------------------------------------------------------
 	* HEADER
 	* ------------------------------------------------------------------- */

	#parallax, .jarallax {
		width: 100%;
		height: 100%;
	}

	header.landing-page h1 {
		/*width: 1000px;
		height: 1000px;*/
		/*background: red;*/
	}

	header.landing-page h1 img#title,
	header.landing-page h1 svg#title {
		position: relative;
		top: 50%;
		height: 320px;
		margin: -160px 0 0 5%;
	}

	header.browsing {
		position: relative;
	}

	header.browsing h1 img {
		width: 80%;
	}

	header.browsing .title {
		z-index: 1;
		position: absolute;
		width: 90%;
		height: 50%;
		top: 50%;
		left: 5%;
		font-size: 2em;
		text-shadow: 2px 2px 4px black;
	}

	header.browsing,
	header.browsing .article-header {
		height: 100%;
		box-sizing: border-box;
	}

	header.browsing h1 {
		box-sizing: border-box;
		padding-top: 0px;
		background-color: rgba(0,0,0,.5);
	}

	header.browsing h1 a {
		display: block !important;
		width: 200px;
	}



	/* ----------------------------------------------------------------------
	 * CONTENT
 	 * ------------------------------------------------------------------- */

	#content, footer #summary {
		display: table; table-layout: fixed;
		overflow: hidden;
		/*margin-left: auto; margin-right: auto; /* ULTRAWIDE */
	}
	section, aside { display: table-cell;  overflow: hidden; }
	section { /*background-color: green;*/ }
	aside {
		width: 360px;
		height: 100%;
		box-sizing: border-box;
		padding: 0 20px 0 20px;
		/*background-color: red;*/
	}
	#aside-slider { display: none; }
	section article ol, section article ul { padding-left: 3em; }
	section article .article-content {	margin: 0 20px }
	section article .article-header { height: 350px; }
	section article .comment div:nth-child(1),
	section article .comment div:nth-child(1) img { width: 120px; }
	section article .comment div:nth-child(2) { display: table-cell; padding: 21px; }
	section article figure img {
		transform: scale(.95);
		transition: all 400ms ease-in-out;
	}
	section article figure img:hover { transform: scale(1); }
	/*section article .new-comment p+p { margin-top: inherit; }*/

	/**/

	.cols2,
	.cols3 { display: table; vertical-align: top; box-sizing: border-box; width: 100%; }

	.cols2 > *,
	.cols3 > * { display: table-cell; vertical-align: bottom; box-sizing: border-box; }

	.cols2 > * { width: 49%; }
	.cols2 > *:nth-child(1) { padding-right: 1%; }
	.cols2 > *:nth-child(2) { padding-left: 1%; }

	.cols3 > * { width: 33%; }
	.cols3 > *:nth-child(1) { padding-right: 1%; }
	.cols3 > *:nth-child(2) { padding-right: 1%; }

	footer {
		width: 100%;
		height: 250px;
		clear: both;
	}

	.sharethis-inline-share-buttons { display: block; width: 100%; }
	#options-block {
		width: 320px;
		box-sizing: border-box;
		margin-top: 70px;
		margin-bottom: 20px;
		border: 1px solid #e6e6e6;
		/*position: absolute;
		top: 0;
		left: 0;
		width: 400px;
		height: 400px;
		margin-top: 20%;*/
	}
	#theme-block { position: relative; }
	#theme-selector {
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%;
		overflow: hidden;
	}
	#theme-selector #wrapper {
		position: absolute; top: -50%; left: -50%;
		width: 200%; height: 200%;
		-webkit-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	/*#theme-selector #wrapper.ddd { left: -30%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
	#theme-selector #wrapper.nnn { left: -70%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }*/
	#theme-selector #wrapper.ddd { left: -15%; }
	#theme-selector #wrapper.nnn { left: -85%; }
	#day-theme, #night-theme { background-size: contain; }
	#day-theme { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: url('../img/day.jpg'); /*background-color: magenta;*/ }
	#night-theme { position: absolute; top: 0; right: 0; width: 50%; height: 100%;  background: url('../img/night.jpg'); /*background: mediumspringgreen;*/ }

	.sticky {
		position: fixed;
		top: 0;
		width: 100%;
	}

	.new-comment button:first-of-type {
		margin-right: 10px;
	}
	.new-comment button:not(:first-of-type, :last-of-type) {
		margin-left: 10px;
		margin-right: 10px;
	}
	.new-comment button:last-of-type {
		margin-left: 10px;
	}

	/* ----------------------------------------------------------------------
 	 * CONTACT
 	 * ------------------------------------------------------------------- */

	#contactPopinWrapper {
		width: 600px;
		max-height: 100%;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	#contactPopinSliders {
		margin-top: 50px;
		margin-bottom: 50px;
		max-height: calc(100% - 100px);
		overflow: visible auto;
		box-shadow:
				0 0 100px rgba(0,0,0,.25),
				0 0 90px rgba(0,0,0,.25),
				0 0 80px rgba(0,0,0,.25),
				0 0 70px rgba(0,0,0,.25),
				0 0 60px rgba(0,0,0,.25),
				0 0 50px rgba(0,0,0,.25),
				0 0 40px rgba(0,0,0,.25),
				0 0 30px rgba(0,0,0,.25),
				0 0 20px rgba(0,0,0,.25),
				0 0 10px rgba(0,0,0,.25)
	;
	}
	#contactPopin {
		padding: 20px 20px 0 20px;
		/*border: 1px solid #828282;*/
		border: 10px solid rgb(245,245,245);
		background-color: #414141;
	}
	#contactPopin h2 {
		margin: -20px;
		padding: 20px;
		color: #202020;
		background-color: rgb(245,245,245);
		position: relative;
	}
	.draggable h2.drag-me {
		cursor: grab;
	}
	.draggable h2.drag-me:before {
		z-index: -1;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		background-image: url(../assets/bg/drag-me.png);
		background-repeat: repeat;
		transition: opacity ease-in-out 200ms;
	}
	.draggable h2.drag-me:hover:before {
		opacity: 1;
	}
	#contactPopin form {
		margin: 21px -20px 0 -20px;
		padding: 14px 41px;
	}
	button.submit:hover {
		background-color: red;
	}

}

/*@media screen and (min-width: 2800px)
{
	#content { padding-top: 49px; }
	article {
		display: block;
		min-width: 600px; width: 600px; max-width: 600px; height: 1000px;
		margin: 0 70px 70px 0;
		box-sizing: border-box;
		overflow: hidden; overflow-wrap: break-word;
		float: left;
		border: 1px solid #e6e6e6;
		text-overflow: ellipsis;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}*/

/* ======================================================================
 *
 *                         Desktop from 1700px
 *
 * =================================================================== */

@media screen and (min-width: 1700px)
{

	body.article #content {
		margin-top: 60px; margin-bottom: 60px;
		/*box-shadow: 0 5px 10px 5px rgba(0,0,0,.25);*/
	}
	#content { /* ULTRAWIDE */
		width: inherit; max-width: inherit;
	}
	#content section { /* ULTRAWIDE */
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		align-items: flex-start;
	}
	#content section article { /* ULTRAWIDE */
		width: 1000px; /* RACINE */
		padding-top: 0;
	}
	#content section article:nth-last-child(n+2) {  /* ULTRAWIDE */
		margin-bottom: inherit;
	}
	#content section article .summary { /* ULTRAWIDE */
		margin-bottom: inherit;
	}
	section article .article-content { margin: 0 } /* RACINE */
	.article-overview .article-intro {
		/*width: 70%;*/
		margin: 500px 30px 0 30px; /* previous style margin: 200px 5% 0 5%; */ /* previous style margin: 500px 15% 0 15%; */
	}
	.article-overview .article-intro:before {
		height: 100px;
	}
	.article-overview .article-intro h2 {
		font-size: 2em;
	}
	.article-illustration {
		height: 600px; /* previous style 400 */
	}

}