/* Main */

html {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 200;
  color: #000;
  background: #EBE2CF;
  cursor: auto;
  -webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

* {
  margin: 0;
	padding: 0;
}

a {
	color: #000;
	text-decoration: none;
}

u {
	text-decoration: none !important;
}

element:hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

.highlight:hover {
	background-color: #F3F0E7;
}

::selection {
  color: #000;
  background: #808845;
}

main {
	position: relative;
}

/* List */

ul {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
}

li {
	list-style: none;
}

p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/* Rows Columns */

.row {
	width: 100%;
	display: flex;
}

.wrap {
	flex-wrap: wrap;
}

/* Fonts */

/* space-grotesk-regular - latin */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/space-grotesk-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/space-grotesk-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/space-grotesk-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/space-grotesk-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/space-grotesk-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/space-grotesk-v13-latin-regular.svg#SpaceGrotesk') format('svg'); /* Legacy iOS */
}

/* space-grotesk-700 - latin */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-grotesk-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/space-grotesk-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/space-grotesk-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/space-grotesk-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/space-grotesk-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/space-grotesk-v13-latin-700.svg#SpaceGrotesk') format('svg'); /* Legacy iOS */
}

/* Form & input */

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	outline-color: transparent;
	outline-style: none;
	padding: 0;
	border-radius: 0;
}

input:focus, input:focus-within, text:focus, select:focus {
	outline: none;
	outline-color: transparent;
	outline-style: none;
	background: transparent;
}

input::placeholder {
  font-family: "Space Grotesk";
  color: #000;
  opacity: 1;
}

input[type=text], input[type=submit] {
  width: 100%;
  margin: 0;
  border: 0;
  justify-content: center;
  align-items: flex-start;
  opacity: 1;
}

/* Fonts */ 

strong, .bold {
	font-weight: 700;
}

.cap {
	text-transform: uppercase;
}

/* Header */

header {
	display: flex;
	flex-wrap: wrap;
} 

#logo {
	width: 100%;
}

nav {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-bottom: 20px;
}

nav a {
	padding: 3px 8px 3px 8px;
}

nav a:hover {
	background-color: #F3F0E7;
}

ul#categories {
	display: flex;
	flex-wrap: nowrap;
}

ul#categories li:after {
	content: "/";
	margin-left: 10px;
	margin-right: 10px;
}

ul#categories li:last-child:after {
	content: "";
}

ul#menu {
	display: flex;
	flex-wrap: nowrap;
}

ul#menu li {
	padding-right: 20px;
}

ul#menu li a {
	white-space: nowrap;
}

ul#menu li:last-child {
	padding-right: 0;
}

/* Sections */

div.title a:hover {
	border-bottom: 4px solid #000;
}

a.title:hover div.title {
	opacity: 0.95;
}

div.button, span.button {
	width: 100%;
	display: flex;
	align-items: center;
}

div.button a, span.button span {
	width: 100%;
}

div.button span, span.button span {
	margin-left: 20px;
}

div.button span:after, span.button span:after {
	content: url('../pictos/black-arrow-right.svg');
	margin-left: 15px;
}

/* Home */

div#intro {
	width: 100%;
	display: flex;
}

div#intro div.text {
	padding-right: 40px;
	padding-bottom: 40px;
}

div#intro div.img {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: calc( 100vh - 190px );
}

div.title {
	width: 100%;
}

/* Services */

div#services a.category {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
} 

div#services a.category div.text {
	background-color: #EBE2CF;
}

div#services a.category:hover div.text {
	background-color: transparent;
}

div#services a.category div.image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
} 

/* Ressources  */

div#ressources div.table.articles {
	display: flex;
}

div#ressources a.cell.article {
	height: calc( 100% - 40px );
}

div#ressources a.cell.article div.image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.col-2.right-image {
	order: 2;
}

/* A propos */

div#a-propos .col-3 {
	position: relative;
}

div#a-propos div.image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: calc( 60vh );
}

div#a-propos div.small-title {
}

div#a-propos div.text {
	padding-bottom: 80px;
}

div#a-propos div.text p {
	margin-bottom: 10px;
}

div#a-propos div.button {
	position: absolute;
	bottom: 0;
}

/* Newsletter */

div#newsletter .col-3-2 {
	position: relative;
}

div#newsletter div.image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: calc( 60vh );
}

div#newsletter div.button {
	position: absolute;
	bottom: 0;
}

/* Instagram */

div#instagram div.row {
	position: relative;
}

a.post-insta {
	position: relative;
}

a.post-insta div.poster {
	height: 0;
	padding-top: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

a.post-insta:hover div.poster {
	opacity: 0.8;
}

/* Footer */

footer {
	position: absolute;
	bottom: -85px;
	width: 100%;
}

footer a#logo-footer {
	z-index: 100;
}

footer ul.links li a:hover {
}

footer ul.social {
	display: flex;
	flex-wrap: nowrap;
	z-index: 100;
}

footer ul.social li {
	display: flex;
	margin-right: 30px;
} 

footer ul.links li {
	display: block;
	margin-right: 30px;
	margin-bottom: 10px;
}

footer ul.social li:last-child, footer ul.links li:last-child {
	margin-right: 0;
}

footer ul.social li a {
	width: 20px;
	height: 20px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

footer a#facebook {
	background-image: url('../pictos/picto-facebook.png');
}

footer a#instagram {
	background-image: url('../pictos/picto-instagram.png');
}

footer a#mail {
	background-image: url('../pictos/picto-mail.png');
	width: 25px;
}

/* Pages */

div#intro.category.wrap div.text.col-2 {
	padding: 0;
	margin: 0;
}

/* Catégorie */

div#intro.category ul.services li span.title {
	margin-right: 10px;
}

div#intro.category ul.services li {
	list-style: disc;
	margin-left: 20px;
}

/* Article */

div.title.article {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

div.title.article p.label-date {
	text-align: right;
}

div.back {
	width: 100%;
}

div.back p {
	text-align: center;
	margin: 20px;
	padding-top: 20px;
}

/* Block */

/* Left image */

div.block.container {
	height: 100%;
}

div.block.image {
	line-height: 0;
}

div.block.image img {
	width: 100%;
	height: auto;
}

/* Text contents */

div.component:last-child {
	border-bottom: 0;
}

div.block.heading, div.block.text, div.block.readmore {
	width: 100%;
}

div.block.readmore {
	box-shadow: 0px 1px 0px 0px #000000;
}

div.block.readmore {
	position: relative;
}

div.block.heading p, div.block.readmore p {
	padding-block-start: 18px;
	padding-block-end: 14px;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
	line-height: 1.2;
}

div.block.text p {
	padding-block-start: 6px;
	padding-block-end: 6px;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
	line-height: 1.5;
}

div.block.text a {
	border-bottom: 1px solid #000;
	padding-bottom: 3px;
}

div.block.text a:hover {
	border-bottom: 0;
}

div.block2x2 div.block.code div {
	padding-block-start: 20px;
	padding-block-end: 20px;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
}

img.block.image {
	width: 100%;
}

figure.block {
	line-height: 0;
}

figcaption.block {
	margin-top: 8px;
	line-height: 1.4;
}

figure.block.video {
}

iframe {
	width: 100%;
	border: 0;
}

div.block2x2 figure.block.video iframe {
}

/* Block 1x1 */ 

div.block1x1 {
	display: flex;
	justify-content: center;
}

div.block1x1 div.block.text {
	display: flex;
	align-content: center;
	flex-flow: column wrap;
}

div.block1x1 div.block.text p {
}

div.block1x1 div.block.button u {
	align-items: center;
}

div.block1x1 figure.block.video {
	width: 80%;
}

div.block1x1 figure.block.video iframe {
	height: 600px; /* Attention responsive */ 
}

div.block1x1 div.block.code {
	width: 80%; /* Attention responsive */ 
	padding-top: 20px;
}

/* Readmore */

a.readmore-button {
	cursor: pointer;
}

a.readmore-button:active {
	border-bottom: 0;
	color: #000;
}


a.readmore-button:hover {
	border-bottom: 0;
	color: #FFF;
}

a.readmore-button div:active {
	background-color: #FFF;
}

a.readmore-button div:hover {
	background-color: #000;
}

div.readmore.picto {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
}

div.readmore.picto {
	height: 100%;
	width: 55px;
	border-left: 1px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	font-size: 30px;
	font-weight: 200;
}

div.block.readmore.text {
	display: none;
}

div.block.readmore.text.display {
	display: block;
}

div.block.button ul {
	display: flex;
	padding-block-start: 20px;
	padding-block-end: 20px;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
}

div.block.button li {
	margin-right: 20px;
	white-space: nowrap;
	line-height: 1.2;
}

div.block.button a {
	padding: 0;
	border-bottom: 0;
}

div.block.button li:hover {
	background-color: #000;
	color: #EBE2CF;
}

/* Block Full Image */

div.block.fullimage {
	padding: 20px;
	line-height: 0;
}

div.block.fullimage img {
	width: 100%;
	height: auto;
}

/* Slideshow */

div.slideshow {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}

div.slide {
	position: relative;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

div.slide img {
	max-height: 800px;
}

div.slider-wrapper {
	width: 100%;
	height: 100%;
}

div.sp img {
	width: calc(100% - 16px);
}

div.sp {
	display:none;
	width: 100%;
	height: 100%;
}

div.sp.active{
	display: block;
	text-align: center;
}

div.half {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	cursor: pointer;
	z-index: 15;
}

div.left {
	left: 0;
	opacity: 0.3;
	transition: opacity 0.08s;
}

div.right {
	right: 0;
	opacity: 0.3;
	transition: opacity 0.08s;
}

div.left:hover, div.right:hover {
	opacity: 1;
}

div.slideshow div.previous {
	position: absolute;
	top: 50%;
	left: 0;
	margin: 8px;
	transform-origin: center;
	transform: translateY(-50%);
	border: 8px solid #FFF;
	background-color: #FFF;
	background-image: url('../pictos/min-arrow-left-black.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 15px;
	height: 15px;
}

div.slideshow div.next {
	position: absolute;
	top: 50%;
	right: 0;
	margin: 8px;
	transform-origin: center;
	transform: translateY(-50%);
	border: 8px solid #FFF;
	background-color: #FFF;
	background-image: url('../pictos/min-arrow-right-black.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 15px;
	height: 15px;
}

/* Pagination */

div.pagination ul {
	display: flex; 
	width: 100%;
	justify-content: center;
	align-items: center;
	height: 80px;
}

div.pagination li {
	padding: 20px;
	line-height: 1;
}

div.pagination a.active {
	pointer-events: none;
}

div.pagination li.previous, div.pagination li.next {
	height: 12px;
	width: 12px;
	margin-left: 15px;
	margin-right: 15px;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
div.pagination li.next {
	background-image: url('../pictos/min-arrow-right-black.svg');
}

div.pagination li.previous {
	background-image: url('../pictos/min-arrow-left-black.svg');
}

/* Responsive */

/* Small Devices, Tablets */

@media (min-width: 0px) and (max-width: 991px) {

	/* Main S */

	main {
	}

	/* Fonts S */

	.x-small {
		font-size: 14px;
		letter-spacing: 0.5px;
	}

	.small {
		font-size: 15px;
		letter-spacing: 0.5px;
	}

	.medium {
		font-size: 18px;
		line-height: 1.4;
	}

	.medium-large {
		font-size: 20px;
		line-height: 1;
	}

	.large {
		font-size: 22px;
		line-height: 1.2;
	}

	.x-large {
		font-size: 35px;
		line-height: 1;
	}

	/* Responsive S */

	.col-3-2 {
		width: 100%;
	}

	.col-2 {
		width: 100%;
	}

	.col-3 {
		width: 100%;
	}

	.col-4 {
		width: 100%;
	}

	.col-6 {
		width: 16.68%;
	}

	.col-12 {
		width: 8.33%;
	}

	.col-1 {
		width: 100%;
		flex-wrap: wrap;
	}

	.full-page {
		min-height: 66vh;
	}

	/* Header S */

	header {
		padding: 0px;
	}

	a.logo {
		margin-top: 40px;
		margin-bottom: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	nav a {
		padding: 0;
	}

	nav li:hover {
		background-color: #F3F0E7;
	}

	/* Home S */

	div#intro {
		flex-wrap: wrap;
	}

	div#intro div.text {
		order: 2;
		padding-left: 15px;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-right: 15px;
	}

	div#services a.category div.text {
		width: 100%
	}

	div#services a.category div.text p {
		padding: 15px;
	}

	div#services a.category div.text p.title {
		margin-bottom: 0;
	}

	div#services a.category div.image {
		width: 100%;
    height: 0;
    padding-top: 60%;
	} 

	div#services a.category div.image {
		order: 0;
	}

	div#ressources div.table.articles {
		flex-wrap: wrap;
	}

	div#a-propos div.row, div#newsletter div.row, div#instagram div.row {
		flex-wrap: wrap;
	}

	div#a-propos div.button, div#newsletter div.button {
		position: relative;
	}

	div#newsletter div.col-text {
		order: 2;
	}

	/* Sections S */

	div.title p {
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 15px;
		padding-right: 15px;
	}

	div.button, span.button {
		height: 50px;
		position: relative;
	}

	div.button span, span.button span {
		margin-left: 15px;
		font-size: 18px;
		display: flex;
	}

	div.button span:after, span.button span:after {
		content: url(../pictos/min-arrow-right-black.svg);
		width: 8px;
	}

	div.contents.row.wrap div.row {
		flex-wrap: wrap;
	}

	div.category.wrap div.row {
		flex-wrap: wrap;
	}

	div.category.wrap div.row div.img.col-2 {
		order: 0;
	}

	div#intro.category.wrap div.text {
		margin-top: 0;
	}

	/* Ressources S */

	div#ressources a.cell.article {
		padding: 15px;
		display: block;
	}

	div#ressources a.cell.article p.date, div#ressources a.cell.article p.title {
		margin-bottom: 10px;
	}

	div#ressources a.cell.article div.image {
		margin-bottom: 15px;
		padding-top: 60%;
	}

	.col-2.right-image {
		order: 0;
	}

	/* À propos S */

	div#a-propos div.small-title {
		margin-bottom: 15px;
	}

	div#a-propos div.text {
		margin: 15px;
		padding-bottom: 0;
	}

	/* Newsletter S */

	div#newsletter div.text {
		margin: 15px;
	}

	/* Footer S */

	footer {
		position: relative;
		bottom: 0;
		height: 60px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	footer ul.social {
		width: 100%;
		padding: 15px;
		padding-bottom: 30px;
		justify-content: space-evenly;
	}

	footer img {
		height: 60px;
		width: auto;
		margin-top: 30px;
	}

	footer ul.links {
		display: flex;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
		padding: 30px;
	}

	footer ul.links li {
		text-align: center;
		width: 100%;
	}

	/* Pages S */

	div.title.article {
		flex-wrap: wrap;
	}

	div.article.title p.label-date {
		padding-top: 0px;
	}

	/* Category S */

	div#intro.category div.text {
		margin-top: 15px;
	}

	div#intro.category ul.services {
		margin: 15px;
	}

	div#intro.category div.img {
		min-height: calc( 100vh - 190px - 66px ); /* 66px = height of title bar */
	}

	div#services a.category {
		flex-wrap: wrap;
	}

	/* Mobile Menu */

	div#mobile-menu {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #EBE2CF;
		border-bottom: 1px solid #EBE2CF;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		z-index: 80;
	}

	div#mobile-menu div.categories {
		padding: 15px;
	}

	div#mobile-menu div.hamburger-menu {
		width: 15px;
		height: 15px;
		background-image: url('../pictos/mobile-menu.svg');
		background-size: 40%;
		background-repeat: no-repeat;
		background-position: center;
		padding: 15px;
	}

	div#mobile-menu div.hamburger-menu.open {
		background-image: url('../pictos/close-mobile-menu.svg');
	}

	ul#categories {
		position: fixed;
		top: 50px;
		width: 100%;
		background-color: #EBE2CF;
		display: none;
		z-index: 100;
	}

	ul#categories li a {
		padding-top: 2px;
		padding-bottom: 2px;
	}

	ul#menu {
		position: fixed;
		top: 50px;
		width: 100%;
		background-color: #EBE2CF;
		display: none;
		z-index: 90;
	}

	.show {
		display: block !important;
	}

	#open-categories {
		cursor: pointer;
	}

	ul#categories li, ul#menu li {
		padding-left: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	ul#categories li:last-child, ul#menu li:last-child {
		margin-bottom: 0px;
	}

	ul#categories li:after {
		content: '';
	}

	ul#menu li {
		text-align: right;
	}

	ul#menu li:last-child {
		padding-right: 20px;
	}

	div#intro div.img {
		min-height: calc( 100vh - 240px );
	}
}

/* Medium Devices, Desktops */

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

	/* Main M */

	main {
		min-height: calc( 100vh - 285px);
	}

	/* Fonts M */

	.x-small {
		font-size: 14px;
		letter-spacing: 0.5px;
	}

	.small {
		font-size: 15px;
		letter-spacing: 0.5px;
	}

	.medium {
		font-size: 18px;
		line-height: 1.4;
	}

	.medium-large {
		font-size: 22px;
		line-height: 1;
	}

	.large {
		font-size: 30px;
		line-height: 1.2;
	}

	.x-large {
		font-size: 50px;
		line-height: 1;
	}

	/* Responsive M */

	.col-3-2 {
		width: 66.6%;
	}

	.col-2 {
		width: 50%;
	}

	.col-3 {
		width: 33.3%;
	}

	.col-4 {
		width: 25%;
	}

	.col-6 {
		width: 16.68%;
	}

	.col-12 {
		width: 8.33%;
	}

	.col-1 {
		width: 100%;
		flex-wrap: wrap;
	}

	.full-page {
		min-height: 66vh;
	}

	/* Header M */

	header {
		padding: 0px;
	}

	a.logo {
		margin-top: 40px;
		margin-bottom: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}

	ul#menu li:last-child {
		padding-right: 20px;
	}

	/* Home M */

	div#intro div.text {
		margin-left: 20px;
	}

	div#services a.category div.text {
		width: calc( 100% - 500px );
		padding: 20px;
	}

	div#services a.category div.text p.title {
		margin-bottom: 15px;
	}

	div#services a.category div.image {
		width: 500px;
		min-height: 330px;
	} 

	div#services a.category:nth-child(even) div.image {
		order: 0;
	}

	div#services a.category:nth-child(odd) div.image {
		order: 1;
	}

	/* Sections M */

	div.title p {
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 20px;
		padding-right: 20px;
	}

	div.button, span.button {
		height: 60px;
	}

	/* Ressources M */

	div#ressources a.cell.article {
		padding: 20px;
		display: block;
	}

	div#ressources a.cell.article p.date, div#ressources a.cell.article p.title {
		margin-bottom: 10px;
	}

	div#ressources a.cell.article div.image {
		margin-bottom: 15px;
		padding-top: 60%;
	}

	/* À propos M */

	div#a-propos div.small-title {
		margin-bottom: 20px;
	}

	div#a-propos div.text {
		margin: 20px;
	}

	/* Newsletter M */

	div#newsletter div.text {
		margin: 20px;
	}

	/* Footer M */

	footer {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	footer ul.social {
		margin-right: 20px;
	}

	footer img {
		height: 60px;
		width: auto;
		margin: 20px;
	}

	footer ul.links {
		position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	}

	/* Pages M */

	/* Category M */

	div#intro.category div.text {
		margin-top: 20px;
	}

	div#intro.category ul.services {
		margin: 20px;
	}

	div#intro.category div.img {
		min-height: calc( 100vh - 190px - 66px ); /* 66px = height of title bar */
	}

	/* Mobile Menu */

	div#mobile-menu {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #EBE2CF;
		border-bottom: 1px solid #EBE2CF;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		z-index: 80;
	}

	div#mobile-menu div.categories {
		padding: 20px;
	}

	div#mobile-menu div.hamburger-menu {
		width: 20px;
		height: 20px;
		background-image: url('../pictos/mobile-menu.svg');
		background-size: 40%;
		background-repeat: no-repeat;
		background-position: center;
		padding: 20px;
	}

	div#mobile-menu div.hamburger-menu.open {
		background-image: url('../pictos/close-mobile-menu.svg');
	}

	ul#categories {
		position: fixed;
		top: 50px;
		width: 100%;
		background-color: #EBE2CF;
		padding-top: 10px;
		padding-bottom: 20px;
		display: none;
		z-index: 100;
	}

	ul#menu {
		position: fixed;
		top: 50px;
		width: 100%;
		background-color: #EBE2CF;
		padding-top: 10px;
		padding-bottom: 20px;
		display: none;
		z-index: 90;
	}

	.show {
		display: block !important;
	}

	ul#categories li, ul#menu li {
		padding-left: 20px;
		margin-bottom: 10px;
	}

	ul#categories li:last-child, ul#menu li:last-child {
		margin-bottom: 0px;
	}

	ul#categories li:after {
		content: '';
	}

	ul#menu li {
		text-align: right;
	}

	ul#menu li:last-child {
		margin-right: 20px;
	}

	div#intro div.img {
		min-height: calc( 100vh - 240px );
	}

	/* Hide mobile UI M */

	span.mobile.button {
		display: none;
	}

}

/* Large Devices, Wide Screens */

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

	/* Main L */

	main {
		min-height: calc( 100vh - 310px);
	}

	/* Fonts L */

	.x-small {
		font-size: 14px;
		letter-spacing: 0.5px;
	}

	.small {
		font-size: 15px;
		letter-spacing: 0.5px;
	}

	.medium {
		font-size: 20px;
		line-height: 1.4;
	}

	.medium-large {
		font-size: 30px;
		line-height: 1;
	}

	.large {
		font-size: 35px;
		line-height: 1.2;
	}

	.x-large {
		font-size: 55px;
		line-height: 1;
	}

	/* Responsive L */

	.col-3-2 {
		width: 66.6%;
	}

	.col-2 {
		width: 50%;
	}

	.col-3 {
		width: 33.3%;
	}

	.col-4 {
		width: 25%;
	}

	.col-6 {
		width: 16.68%;
	}

	.col-12 {
		width: 8.33%;
	}

	.col-1 {
		width: 100%;
		flex-wrap: wrap;
	}

	.full-page {
		min-height: 66vh;
	}

	/* Header L */

	header {
		padding: 20px;
	}

	/* Home L */

	div#intro div.text {
		margin-left: 20px;
	}

	div#services a.category div.text {
		width: calc( 100% - 500px );
		padding: 20px;
	}

	div#services a.category div.text p.title {
		margin-bottom: 15px;
	}

	div#services a.category div.image {
		width: 500px;
		min-height: 330px;
	} 

	div#services a.category:nth-child(even) div.image {
		order: 0;
	}

	div#services a.category:nth-child(odd) div.image {
		order: 1;
	}

	/* Sections L */

	div.title p {
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 20px;
		padding-right: 20px;
	}

	div.button, span.button {
		height: 60px;
	}

	/* Ressources L */

	div#ressources a.cell.article {
		padding: 20px;
		display: block;
	}

	div#ressources a.cell.article p.date, div#ressources a.cell.article p.title {
		margin-bottom: 10px;
	}

	div#ressources a.cell.article div.image {
		margin-bottom: 15px;
		padding-top: 60%;
	}

	/* À propos L */

	div#a-propos div.small-title {
		margin-bottom: 20px;
	}

	div#a-propos div.text {
		margin: 20px;
	}

	/* Newsletter L */

	div#newsletter div.text {
		margin: 20px;
	}

	/* Footer L */

	footer {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	footer ul.social {
		margin-right: 20px;
	}

	footer img {
		height: 60px;
		width: auto;
		padding: 20px;
	}

	footer ul.links {
		position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	}

	/* Pages L */

	/* Category L */

	div#intro.category div.text {
		margin-top: 20px;
	}

	div#intro.category ul.services {
		margin: 20px;
	}

	div#intro.category div.img {
		min-height: calc( 100vh - 190px - 66px ); /* 66px = height of title bar */
	}

	/* Hide mobile UI L */

	div#mobile-menu {
		display: none;
	}

	span.mobile.button {
		display: none;
	}

}

/* X-Large Devices */

@media (min-width: 1400px) {

	/* Main XL */

	main {
		min-height: calc( 100vh - 325px);
	}

	/* Fonts XL */

	.x-small {
		font-size: 15px;
		letter-spacing: 0.5px;
	}

	.small {
		font-size: 16px;
		letter-spacing: 0.5px;
	}

	.medium {
		font-size: 22px;
		line-height: 1.4;
	}

	.medium-large {
		font-size: 32px;
		line-height: 1;
	}

	.large {
		font-size: 40px;
		line-height: 1.2;
	}

	.x-large {
		font-size: 60px;
		line-height: 1;
	}

	/* Responsive XL */

	.col-3-2 {
		width: 66.6%;
	}

	.col-2 {
		width: 50%;
	}

	.col-3 {
		width: 33.3%;
	}

	.col-4 {
		width: 25%;
	}

	.col-6 {
		width: 16.68%;
	}

	.col-12 {
		width: 8.33%;
	}

	.col-1 {
		width: 100%;
		flex-wrap: wrap;
	}

	.full-page {
		min-height: 66vh;
	}

	/* Header XL */

	header {
		padding: 20px;
	}

	/* Home XL */

	div#intro div.text {
		margin-left: 20px;
	}

	div#services a.category div.text {
		width: calc( 100% - 500px );
		padding: 20px;
	}

	div#services a.category div.text p.title {
		margin-bottom: 15px;
	}

	div#services a.category div.image {
		width: 500px;
		min-height: 330px;
	} 

	div#services a.category:nth-child(even) div.image {
		order: 0;
	}

	div#services a.category:nth-child(odd) div.image {
		order: 1;
	}

	/* Sections XL */

	div.title p {
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 20px;
		padding-right: 20px;
	}

	div.button, span.button {
		height: 70px;
	}

	/* Ressources XL */

	div#ressources a.cell.article {
		padding: 20px;
		display: block;
	}

	div#ressources a.cell.article p.date, div#ressources a.cell.article p.title {
		margin-bottom: 10px;
	}

	div#ressources a.cell.article div.image {
		margin-bottom: 15px;
		padding-top: 60%;
	}

	/* À propos XL */

	div#a-propos div.small-title {
		margin-bottom: 20px;
	}

	div#a-propos div.text {
		margin: 20px;
	}

	/* Newsletter XL */

	div#newsletter div.text {
		margin: 20px;
	}

	/* Footer XL */

	footer {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	footer ul.social {
		margin-right: 20px;
	}

	footer img {
		height: 60px;
		padding: 20px;
		width: auto;
	}

	footer ul.links {
		position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	}

	/* Pages XL */

	/* Category XL */

	div#intro.category div.text {
		margin-top: 20px;
	}

	div#intro.category ul.services {
		margin: 20px;
	}

	div#intro.category div.img {
		min-height: calc( 100vh - 190px - 66px ); /* 66px = height of title bar */
	}

	/* Hide mobile UI XL */

	div#mobile-menu {
		display: none;
	}

	span.mobile.button {
		display: none;
	}
}