html,body{overflow-y: scroll; }

html {
	background-color: #e4dfd2;
	background-image: -webkit-radial-gradient(center 425px 45deg, circle closest-side, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
		-webkit-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 10%),
		-webkit-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px, rgba(231, 228, 222, 1) 388px, rgba(255, 255, 255, 0) 388px, rgba(243, 239,233,1) 388px,rgba(243, 239,233,1) 390px, rgba(206,195,187,1) 390px, rgba(230,222,216,1) 990px, rgba(230,222,216,1)),
		-webkit-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),
		-webkit-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),
		-webkit-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),
		-webkit-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);
	background-image: -moz-radial-gradient(center 425px 45deg, circle closest-side, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
		-moz-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 10%),
		-moz-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px, rgba(231, 228, 222, 1) 388px, rgba(255, 255, 255, 0) 388px, rgba(243, 239,233,1) 388px,rgba(243, 239,233,1) 390px, rgba(206,195,187,1) 390px, rgba(230,222,216,1) 990px, rgba(230,222,216,1)),
		-moz-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),
		-moz-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),
		-moz-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),
		-moz-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);
	background-image: -ms-radial-gradient(center 425px 45deg, circle closest-side, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
		-ms-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 10%),
		-ms-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px, rgba(231, 228, 222, 1) 388px, rgba(255, 255, 255, 0) 388px, rgba(243, 239,233,1) 388px,rgba(243, 239,233,1) 390px, rgba(206,195,187,1) 390px, rgba(230,222,216,1) 990px, rgba(230,222,216,1)),
		-ms-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),
		-ms-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),
		-ms-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),
		-ms-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);
	background-image: -o-radial-gradient(center 425px 45deg, circle closest-side, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
		-o-radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 10%),
		-o-linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px, rgba(231, 228, 222, 1) 388px, rgba(255, 255, 255, 0) 388px, rgba(243, 239,233,1) 388px,rgba(243, 239,233,1) 390px, rgba(206,195,187,1) 390px, rgba(230,222,216,1) 990px, rgba(230,222,216,1)),
		-o-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),
		-o-linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),
		-o-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),
		-o-linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);
	background-image: radial-gradient(center 425px 45deg, circle closest-side, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
		radial-gradient(center 425px 45deg, circle closest-side, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 10%),
		linear-gradient(rgba(231, 228, 222, 0), rgba(231, 228, 222, 1) 150px, rgba(231, 228, 222, 1) 388px, rgba(255, 255, 255, 0) 388px, rgba(243, 239,233,1) 388px,rgba(243, 239,233,1) 390px, rgba(206,195,187,1) 390px, rgba(230,222,216,1) 990px, rgba(230,222,216,1)),
		linear-gradient(0pt 50% , rgba(255, 255, 255, 0.07) 50%, transparent 50%),
		linear-gradient(0pt 50% , rgba(255, 255, 255, 0.13) 50%, transparent 50%),
		linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.17) 50%),
		linear-gradient(0pt 50% , transparent 50%, rgba(255, 255, 255, 0.19) 50%);
	background-size: 13px, 26px, auto, 13px, 29px, 37px, 53px;
	min-height:100%;
	overflow-x:hidden;
	/*background: #e9e9e7;
  	box-sizing: border-box;
	font-family: var(--sinSerif);
	font-size: 1rem;*/
}

*, *:after, *:before {box-sizing: inherit;}
* {
	margin		: 0;
	padding		: 0;
	border		: 0 none; 
	position	: relative;
}

:root {
	--sinSerif	: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--Nhexa		: 4;
	--gap		: 1vw;
	--size		: calc(calc(90vw / var(--Nhexa)) - var(--gap));
}

@media only screen and (min-width: 1100px) {
	:root {
		--Nhexa: 7;
	}
}

@media only screen and (max-width: 600px) {
	:root {
		--Nhexa: 2;
	}
	body {
		margin-right	: calc(var(--size) * .3);
	}
}


body {
	/*==================== Importé ======================*/
	overflow: auto;
	width: 100%;
	margin: 0 auto;
    height: 60%;
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1em;
    margin: 0;
    padding: 0;
    font-family:'Abel', arial, serif;
    text-transform: none;
    /*background:#313131 url(../img/fond-menu.png) no-repeat top center;*/
	/*===================================================*/
	color: #e9e9e7;
	/*padding-right: calc(var(--size) * .5);*/
	/*overflow-X: hidden;
	-webkit-hyphens: auto;
	    -ms-hyphens: auto;
	        hyphens: auto;*/
}
	/*==================== Importé ======================*/

body_exep{
	overflow: auto;
	width: 100%;
	margin: 0 auto;
    height: 60%;
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1em;
    margin: 0;
    padding: 0;
    font-family:'Abel', arial, serif;
    text-transform: none;
    background:#313131 url(../img/fond-menu.png) no-repeat top center;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;
}

#fixe{
	display: inline;
	width: 100%;
	text-align: center;
	align-content: center;
}
/* couleur de la barre*/
#men{
	width: 100%;
    background: linear-gradient(90deg, #CCC,#CCC);
	}

.unselectable {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*color: #cc0000; //rouge   */
}

/*======================== Affichage en colonnes == Importé ===================*/

#conteneur {
	width: 60%;
	  height: 400px;
	  columns: 3;
	  column-width: 30ch;
	/*-webkit-columns: 3;
	-moz-columns: 3;
	-webkit-column-gap: 240px;
	-moz-column-gap: 240px;*/
	/*column-gap: 240px;
	-webkit-column-rule: 1px solid #000;
	-moz-column-rule: 1px solid #000);
	column-rule: 1px solid #000;*/
  }
  
  #col_2 {
	column-count: 2;
  }
  
  #col_3 {
	column-count: 3;
	  /*column-gap: 2em;*/
  }
  
  #col_4 {
	column-count: 4;
  
  }

/*==================================Menu Vertical======================================*/


#conteneur-menu2 {
    height: 180px;
    width: 320px;
    padding-top: 10px;

}

#conteneur-menu2 ul {
    padding: 0;
    margin: 0;
    margin-left: 20px;
    float: left;
}

#conteneur-menu2 ul li {
    list-style: inside;
    padding: 0px;
}

#conteneur-menu2 ul li a {
    text-decoration: none;
    font-size: 20px;
    padding: 4px;
    display: block;
    color: white;
    background: transparent;
    width: 330px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    line-height: 20px;
}


#conteneur-menu2 ul li a:hover {
    background: #54B6A8;
    padding-left: 20px;
    width: 280px;
	transform: translateY(-50%);
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
/*==================================Conteneur======================================*/
.diapo{
    position: relative;
    overflow: hidden;
}
/*==================================Flèches======================================*/
#nav-droite, #nav-gauche{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 3em;
}

#nav-droite{
    right: 20px;
}
#nav-gauche{
    left: 20px;
}

/*==================================Elements======================================*/
.elements{
    display: flex;
    transition: 1s linear;
}

.element{
    flex: 1 0 100%;
    position: relative;
}

.element > img{
    width: 100%;
}

.caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(255,255,255,0.4);
    padding: 30px;
}

/*===============================================================================*/
/*===============================================================================*/
nav  ul li { float:left; list-style: none; }
nav  ul ul {display:none; width:250px;}
nav  li {background:#CCCCCC;}
nav  li a {text-decoration: none; color: #000; padding: 4px 0 4px; display:block; width:250px;}
nav  ul {padding: 0; margin:0px; text-align:center;}
nav  ul.menu li.submenu:hover ul.niveau2{display:block;}
nav  li:hover {background: #EDD;}
nav  li.submenu:hover {background: #EBB;}
/*===============================================================*/
.photo {
	background-color:#fafbfc;
	border:1px solid #b0b0b0;
	margin:0 0 10px 10px;
	padding:5px;
  }

  img{
	width: 100%;
	transition: transform 0.1s;
  width : 640px;
	height : 390px;
	/*transition: transform 0.1s;*/
}

.image-zoom{
	height: 5%;
	width : 5%;
}

.noHover{
    pointer-events: none;
}

img:hover{
	-ms-transform: scale(2.5) translate(20px, 20px); /* IE 9 */
	-webkit-transform: scale(2.5) translate(20px); /* Safari 3-8 */
	transform: scale(2.5) translate(6px, 6px);
}

.header{
	font-weight: bold;
	font-style:normal;
	text-align: center;
	/*/////////////////*/
	width: 100%;
	font-size: 40px;
	color:#00aae5;
   	font-family:'Roboto', sans-serif;

}

.pp{
	color: #00aae5;
}

.ppp{
	display: block;
	background:#313131;

}

.MaClasse{
	text-align: center;
	color: chartreuse;
	font-size: 40px;
}

.unstyled-link{
  color: inherit;
  text-decoration: inherit;
  &:link, &:hover {
    color: inherit;
    text-decoration: inherit;
  }
}

/*==================================================================================*/
/*=========================== Header ==========================*/
.header{
	font-weight: bold;
	font-style:normal;
	text-align: center;
	/*/////////////////*/
	width: 100%;
	font-size: 40px;
	color:#00aae5;
   	font-family:'Roboto', sans-serif;

}

header_1{
	box-sizing: content-box;
	display:block;
	width: 100%;
	direction : ltr;
	font-weight: normal;
	color:#0000FF;
    text-transform: uppercase;
	font-family:Arial,Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-style:normal;
	text-shadow: 2px 3px 3px  #000000;
	}

header_2{
	box-sizing: content-box;
	display:block;
	width: 100%;
	direction : ltr;
	font-weight: bold;
	font-size: 30px;
	color:#0020C2;
    text-transform: none;
	font-family:Arial,Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	/*text-shadow: 2px 3px 3px  #000000;*/
	}

	.x{
		color:#FFA500;
		text-align: justify;
	  font-weight: normal;
	  font-size:25px;
	  /*      */
	  margin-right: 25px;
	  margin-left: 25px;
	  width:80%;
	  background-color: #313131;
	}
	
	
	#left-right{
		display: flex;
	}
	
	#same-line{
		font-family: 'Lato', sans-serif;
		  font-size: 30px;
		  background: #00aae5;
		  color: #fff;
		  text-shadow: 1px 2px 2px #117da8;
		  display: flex;
		  justify-content: center;
	}
	
	input,input[type="textarea"],textarea{
		-webkit-appearance: none;
		-moz-appearance: none;
		font:1.25rem/1.5 sans-serif;
		display: inline-block;
		appearance: none;
		background: white;
		border:2px solid #333;
		padding:0.5rem 0.75rem;
		width:100%;
		border-radius: 0.25rem;
		box-sizing: border-box;
	}
	
	input[type="textarea"],textarea{
		min-height: 10rem;
	}
	
/*=======================================================Polices  Pour Slider ============================================*/
h1_slider, h2_slider {
	text-align:center;
	margin-top:0;
}
h1_slider {
	padding: 1em 0;
	margin-left: 1.5em;
	font-size: 2.5em;
	font-family: 'Amaranth', Arial, Verdana, sans-serif;
}
h1_slider span {
	display:block;
	margin: 0.75em 0 0 -2em;
	line-height: 1em;
	font-size: 0.55em;
}
h1_slider .cursive {
	margin: 0 0 0 -3em;
	font-size: 2.1em;
	line-height:0.5em;
	color: green;
}
figure {
	display: inline-block;
}
a {
	text-decoration: none;
	border-bottom: 1px solid #bc9d88;
	color: #8f6b51;
}
a:hover,
a:focus {
	border-bottom: 1px dashed #bc9d88;
}
.sread {
	position: absolute;
	left:-9999px;
}
.cursive {
	font-family: 'Mr Dafoe', cursive;
	color: "chartreuse";
}
.center {
	text-align: center;
}

/*======================================================= SLIDE SHOW  ============================================*/

#slideshow {
	position: relative;
	width: 640px;
	height: 447px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;

	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

#slideshow_special {
	width: 60%;
	padding: 0 0 0 0;
	position: relative;
	border: 1px solid #ddd;
	margin: 0 auto 0;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;

	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/* avanced box-shadow : http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow */
#slideshow:before,
#slideshow:after {
	position: absolute;
	display:block;
	bottom:16px;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);

	z-index: -10;
}
#slideshow:before {
	left:0;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
}
#slideshow .commands {
	position: absolute;
	top: 45%;
	padding: 5px 13px;
	border-bottom:0;
	font-family: 'Amaranth', Arial, Verdana, sans-serif;
	font-size: 1.3em;
	color: #aaa;
	text-decoration:none;
	background-color: #eee;
	background-image: -webkit-linear-gradient(#fff,#ddd);
	background-image: -moz-linear-gradient(#fff,#ddd);
	background-image: -ms-linear-gradient(#fff,#ddd);
	background-image: -o-linear-gradient(#fff,#ddd);
	background-image: linear-gradient(#fff,#ddd);
	text-shadow: 0 0 1px #aaa;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#slideshow .commands:after {
	position: absolute;
	bottom: 65px; left:-18px;
	content: attr(title);
	width: 50px;
	padding: 12px;
	background: #fff;
	font-family: Georgia, Times, serif;
	font-size: 14px;
	text-align:center;
	text-shadow: 0 0 0;
	opacity: 0;

	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;

	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);

	-webkit-transition: opacity 0.7s, bottom 0.7s;
	-moz-transition: opacity 0.7s, bottom 0.7s;
	transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:before {
	position: absolute;
	bottom: 55px; left: 13px;
	content: " ";
	width: 1px; height: 1px;
	border-top: 10px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	z-index:100;
	opacity: 0;

	-webkit-transition: opacity 0.7s, bottom 0.7s;
	-moz-transition: opacity 0.7s, bottom 0.7s;
	transition: opacity 0.7s, bottom 0.7s;
}
#slideshow .commands:hover:before {
	bottom: 35px;
	opacity: 1;
}
#slideshow .commands:hover:after {
	bottom: 45px;
	opacity: 1;
}
#slideshow .commands:focus {
	outline: 0;
	-webkit-transform: translate(1px, 2px);
	-moz-transform: translate(1px, 2px);
	-ms-transform: translate(1px, 2px);
	-o-transform: translate(1px, 2px);
	transform: translate(1px, 2px);
}
#slideshow .commands:active {
	-webkit-transform: translate(0, 1px);
	-moz-transform: translate(0, 1px);
	-ms-transform: translate(0, 1px);
	-o-transform: translate(0, 1px);
	transform: translate(0, 1px);
}
#slideshow .prev {
	left: -48px;
}
#slideshow .next {
	right: -48px;
}
#slideshow .prev,
#slideshow .next {
	display:none;
}
#slideshow .prev,
#slideshow .next {
	display:none;
}
#slideshow .commands1 {
	display: block;
}

/* play/pause commands */
.play_commands {
	position: absolute;
	width: 22px; height: 22px;
	top: 25px; right: 25px;
	z-index: 10;
	text-indent: -9999px;
	border:0 none;
	opacity: 0;

	-webkit-transition: opacity 1s, right 1s;
	-moz-transition: opacity 1s, right 1s;
	transition: opacity 1s, right 1s;
}
.play { right: 55px; cursor: default; }

.pause:hover { border:0 none; }
.play_commands:focus { outline:0; }

#slideshow:hover .pause,
#sl_play:target ~ #slideshow:hover .pause,
.play_commands:focus {
	opacity: 1;
}
.sl_command:target ~ #slideshow:hover .pause,
#sl_pause:target ~ #slideshow:hover .pause {
	opacity: 0;
}
.pause:after,
.pause:before {
	position: absolute;
	display: block;
	content: " ";
	top:0;
	width:38%;
	height: 22px;
	background: #fff;
	background: rgba(255,255,255,0.5);
}
.pause:after {
	right:0;
}
.pause:before {
	left:0;
}
.play {
	width: 1px;
	height: 1px;
	border-top: 10px solid transparent;
	border-left: 20px solid #fff;
	border-left: 20px solid rgba(255,255,255,0.5);
	border-bottom: 10px solid transparent;
	opacity: 0;
}
.play:hover,
.play:focus {
	border-bottom: 10px solid transparent;
}

#slideshow .container {
	position:relative;
	width: 640px;
	height: 447px;
	overflow: hidden;
}
/* timeline base */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	background: #999;
	width: 100%;
	height: 1px;
}

@-webkit-keyframes slider {
	0%,  5%, 100%	{ left: 0 }
	12.5%, 20%		{ left: -100% }
	25%, 35%		{ left: -200% }
	37.5%, 45%		{ left: -300% }
	50%, 60%		{ left: -400% }
	62.5%, 70%		{ left: -500% }
	75%, 80%		{ left: -600% }
	87.5%, 95%		{ left: -700% }

}
@-moz-keyframes slider {
	0%,  5%, 100%	{ left: 0 }
	12.5%, 20%		{ left: -100% }
	25%, 35%		{ left: -200% }
	37.5%, 45%		{ left: -300% }
	50%, 60%		{ left: -400% }
	62.5%, 70%		{ left: -500% }
	75%, 80%		{ left: -600% }
	87.5%, 95%		{ left: -700% }
}
@keyframes slider {
	0%,  5%, 100%	{ left: 0 }
	12.5%, 20%		{ left: -100% }
	25%, 35%		{ left: -200% }
	37.5%, 45%		{ left: -300% }
	50%, 60%		{ left: -400% }
	62.5%, 70%		{ left: -500% }
	75%, 80%		{ left: -600% }
	87.5%, 95%		{ left: -700% }
}

#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 800%;
	height: 447px;

	-webkit-animation: slider 68s infinite;
	-moz-animation: slider 68s infinite;
	animation: slider 68s infinite;
}
.sl_i:target ~ #slideshow .slider {
	-webkit-transition: left 1s;
	-moz-transition: left 1s;
	transition: left 1s;
}
.sl_command:target ~ #slideshow .slider {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}
#slideshow .c_slider {
	position: absolute;
	left:0; top:0;
	width: 100%;
	height: 447px;
	background: url(img/img1.jpg) 0 0 no-repeat, url(img/img2.jpg) 640px 0 no-repeat, url(img/img3.jpg) 640px 0 no-repeat, url(img/img4.jpg) 640px 0 no-repeat, url(img/img5.jpg) 640px 0 no-repeat;
	/*background: url(img/img_1.jpg) 0 0 no-repeat, url(img/img_2.jpg) 640px 0 no-repeat, url(img/img_3.jpg) 1280px 0 no-repeat, url(img/img_4.jpg) 1920px 0 no-repeat, url(img/img_5.jpg) 2560px 0 no-repeat;*/
}
.sl_i:target ~ #slideshow .c_slider {
	-webkit-transition: background 1s;
	-moz-transition: background 1s;
	transition: background 1s;
}

#slideshow figure {
	position:relative;
	padding:0; margin:0;
}

@-webkit-keyframes figurer {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@-moz-keyframes figurer {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
@keyframes figurer {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;

	-webkit-animation: figurer 68s infinite;
	-moz-animation: figurer 68s infinite;
	animation: figurer 68s infinite;
}

@-webkit-keyframes figcaptionner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ bottom: -155px;}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ bottom: -58px;}
}
@-moz-keyframes figcaptionner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ bottom: -155px;}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ bottom: -58px;}
}
@keyframes figcaptionner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ bottom: -155px;}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ bottom: -58px;}
}

#slideshow figcaption {
	position:absolute;
	padding: 25px 20px; margin:0;
	left:0; right:0; bottom: 25px;
	text-align:center;
	letter-spacing: 0.03em;
	word-spacing: 0.03em;
	font-family: 'Amaranth', Arial, Verdana, sans-serif; /*Georgia, Times, serif;*/
	color: cyan;
	font-size :18px;
	font-weight: normal;
	background-color: #313131;
	background: rgba(255,255,255,0.7);
	background: #000;
	border-top: 1px solid rgb(225,225,225);
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);

	-webkit-animation: figcaptionner 32s infinite;
	-moz-animation: figcaptionner 32s infinite;
	animation: figcaptionner 32s infinite;
}

@-webkit-keyframes timeliner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 0;		} /*	0%, 25%, 50%, 75%, 100%	{ width: 0;		}*/

	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 640px;	}
}
@-moz-keyframes timeliner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 0;		}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 640px;	}
}
@keyframes timeliner {
	0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 0;		}
	5%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%	{ width: 640px;	}
}

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;

	-webkit-animation: timeliner 68s infinite;
	-moz-animation: timeliner 68s infinite;
	animation: timeliner 68s infinite;
}

/* dots styles */
.dots_commands  {
	position: relative;
	top: 32px;
	padding:0; margin:0;
	text-align:center;
}
.dots_commands li {
	display:inline;
	padding:0; margin:0;
	list-style:none;
}
.dots_commands a {
	position: relative;
	display:inline-block;
	height:8px; width: 8px;
	margin: 0 5px;
	text-indent: -9999px;
	background: #fff;
	border-bottom:0;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

	z-index:25;
}
.dots_commands li + li a {
	z-index:10;
}

@-moz-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}

	5%			{ opacity: 1; left: 0;		}
	9%			{ opacity: 0; left: 0;		}
	10%			{ opacity: 0; left: 18px;	}
12.5%			{ opacity: 1; left: 18px;	}

	13%			{ opacity: 1; left: 18px;	}
	15%			{ opacity: 0; left: 18px;	}
	20%			{ opacity: 0; left: 36px;	}
	25%			{ opacity: 1; left: 36px;	}

	28%			{ opacity: 1; left: 36px;	}
	33%			{ opacity: 0; left: 36px;	}
	35%			{ opacity: 0; left: 54px;	}
	37.5%		{ opacity: 1; left: 54px;	}

	39%			{ opacity: 1; left: 54px;	}
	43%			{ opacity: 0; left: 54px;	}
	45%			{ opacity: 0; left: 72px;	}
	50%			{ opacity: 1; left: 72px;	}

	53%			{ opacity: 1; left: 72px;	}
	55%			{ opacity: 0; left: 72px;	}
	60%			{ opacity: 0; left: 90px;	}
	62.5%		{ opacity: 1; left: 90px;	}

	63%			{ opacity: 1; left: 90px;	}
	65%			{ opacity: 0; left: 90px;	}
	70%			{ opacity: 0; left: 108px;	}
	75%			{ opacity: 1; left: 108px;	}

	78%			{ opacity: 1; left: 108px;	}
	83%			{ opacity: 0; left: 108px;	}
	85%			{ opacity: 0; left: 126px;	}
	87.5%		{ opacity: 1; left: 126px;	}

	89%			{ opacity: 1; left: 126px;	}
	93%			{ opacity: 0; left: 126px;	}
	95%			{ opacity: 0; left: 144px;	}
	95%			{ opacity: 0; left: 144px;	}

}
@-webkit-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}

	5%			{ opacity: 1; left: 0;		}
	9%			{ opacity: 0; left: 0;		}
	10%			{ opacity: 0; left: 18px;	}
12.5%			{ opacity: 1; left: 18px;	}

	13%			{ opacity: 1; left: 18px;	}
	15%			{ opacity: 0; left: 18px;	}
	20%			{ opacity: 0; left: 36px;	}
	25%			{ opacity: 1; left: 36px;	}

	28%			{ opacity: 1; left: 36px;	}
	33%			{ opacity: 0; left: 36px;	}
	35%			{ opacity: 0; left: 54px;	}
	37.5%		{ opacity: 1; left: 54px;	}

	39%			{ opacity: 1; left: 54px;	}
	43%			{ opacity: 0; left: 54px;	}
	45%			{ opacity: 0; left: 72px;	}
	50%			{ opacity: 1; left: 72px;	}

	53%			{ opacity: 1; left: 72px;	}
	55%			{ opacity: 0; left: 72px;	}
	60%			{ opacity: 0; left: 90px;	}
	62.5%		{ opacity: 1; left: 90px;	}

	63%			{ opacity: 1; left: 90px;	}
	65%			{ opacity: 0; left: 90px;	}
	70%			{ opacity: 0; left: 108px;	}
	75%			{ opacity: 1; left: 108px;	}

	78%			{ opacity: 1; left: 108px;	}
	83%			{ opacity: 0; left: 108px;	}
	85%			{ opacity: 0; left: 126px;	}
	87.5%		{ opacity: 1; left: 126px;	}

	89%			{ opacity: 1; left: 126px;	}
	93%			{ opacity: 0; left: 126px;	}
	95%			{ opacity: 0; left: 144px;	}
	95%			{ opacity: 0; left: 144px;	}
}
@keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}

	5%			{ opacity: 1; left: 0;		}
	9%			{ opacity: 0; left: 0;		}
	10%			{ opacity: 0; left: 18px;	}
12.5%			{ opacity: 1; left: 18px;	}

	13%			{ opacity: 1; left: 18px;	}
	15%			{ opacity: 0; left: 18px;	}
	20%			{ opacity: 0; left: 36px;	}
	25%			{ opacity: 1; left: 36px;	}

	28%			{ opacity: 1; left: 36px;	}
	33%			{ opacity: 0; left: 36px;	}
	35%			{ opacity: 0; left: 54px;	}
	37.5%		{ opacity: 1; left: 54px;	}

	39%			{ opacity: 1; left: 54px;	}
	43%			{ opacity: 0; left: 54px;	}
	45%			{ opacity: 0; left: 72px;	}
	50%			{ opacity: 1; left: 72px;	}

	53%			{ opacity: 1; left: 72px;	}
	55%			{ opacity: 0; left: 72px;	}
	60%			{ opacity: 0; left: 90px;	}
	62.5%		{ opacity: 1; left: 90px;	}

	63%			{ opacity: 1; left: 90px;	}
	65%			{ opacity: 0; left: 90px;	}
	70%			{ opacity: 0; left: 108px;	}
	75%			{ opacity: 1; left: 108px;	}

	78%			{ opacity: 1; left: 108px;	}
	83%			{ opacity: 0; left: 108px;	}
	85%			{ opacity: 0; left: 126px;	}
	87.5%		{ opacity: 1; left: 126px;	}

	89%			{ opacity: 1; left: 126px;	}
	93%			{ opacity: 0; left: 126px;	}
	95%			{ opacity: 0; left: 144px;	}
	95%			{ opacity: 0; left: 144px;	}
}
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
	position: absolute;
	top: 0; left: 0;
	content: " ";
	width: 8px; height: 8px;
	background: #bd9b83;
	z-index:20;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
.dots_commands li:first-child a:after {
	-webkit-animation: dotser 68s infinite; /* webkit can't animate pseudo-element =_= :L: */
	-moz-animation: dotser 68s infinite; /* thanks moz ! :D */
	animation: dotser 68s infinite;
}
.dots_commands li:first-child a:before {
	display:none;
}




/* need a stop ! */

/* actions when target ! */
.sl_command { display: none; }

.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow figure:after,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}

#sl_play:target ~ #slideshow .slider,
#sl_play:target ~ #slideshow figure:after,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running;
}

.sl_command:target ~ #slideshow .pause 	{ opacity:0; }
.sl_command:target ~ #slideshow .play 	{ opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .pause 	{ opacity:0; }
#sl_play:target ~ #slideshow .play 		{ opacity:0; right: 55px; cursor: default;}

.sl_i:target ~ #slideshow .slider									{ visibility: hidden }
.sl_i:target ~ #slideshow .slider figcaption						{ visibility: hidden }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after		{ display:none; }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before	{ display:block; }}

#sl_i1:target ~ #slideshow .commands								{ display: none; }
#sl_i1:target ~ #slideshow .commands1								{ display: block; }
#sl_i1:target ~ #slideshow .c_slider								{ background-position: 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0; }
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before	{ left:0; }

#sl_i2:target ~ #slideshow .commands								{ display: none; }
#sl_i2:target ~ #slideshow .commands2								{ display: block; }
#sl_i2:target ~ #slideshow .c_slider								{ background-position: -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0; }
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before	{ left:18px; }

#sl_i3:target ~ #slideshow .commands								{ display: none; }
#sl_i3:target ~ #slideshow .commands3								{ display: block; }
#sl_i3:target ~ #slideshow .c_slider								{ background-position: -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0; }
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before	{ left:36px; }

#sl_i4:target ~ #slideshow .commands								{ display: none; }
#sl_i4:target ~ #slideshow .commands4								{ display: block; }
#sl_i4:target ~ #slideshow .c_slider								{ background-position: -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0; }
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before	{ left:54px; }

#sl_i5:target ~ #slideshow .commands								{ display: none; }
#sl_i5:target ~ #slideshow .commands5								{ display: block; }
#sl_i5:target ~ #slideshow .c_slider								{ background-position: -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0; }
#sl_i5:target ~ #slideshow .dots_commands li:first-child a:before	{ left:72px; }

#sl_i6:target ~ #slideshow .commands								{ display: none; }
#sl_i6:target ~ #slideshow .commands6								{ display: block; }
#sl_i6:target ~ #slideshow .c_slider								{ background-position: -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0; }
#sl_i6:target ~ #slideshow .dots_commands li:first-child a:before	{ left:90px; }

#sl_i7:target ~ #slideshow .commands								{ display: none; }
#sl_i7:target ~ #slideshow .commands7								{ display: block; }
#sl_i7:target ~ #slideshow .c_slider								{ background-position: -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i7:target ~ #slideshow .dots_commands li:first-child a:before	{ left:108px; }

#sl_i8:target ~ #slideshow .commands								{ display: none; }
#sl_i8:target ~ #slideshow .commands8								{ display: block; }
#sl_i8:target ~ #slideshow .c_slider								{ background-position: -4480px 0, -3840px 0, -3200px 0, -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0; }
#sl_i8:target ~ #slideshow .dots_commands li:first-child a:before	{ left:126px; }
/*=========================== Paramètres de Slider entête ============================*/

.ideal-image-slider {
	position: relative;
	overflow: hidden;
}
.iis-slide {
	display: block;
	bottom: 0;
	text-decoration: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	text-indent: -9999px;
}

/* Slide effect */
.iis-effect-slide .iis-slide {
	opacity: 0;
	-webkit-transition-property: -webkit-transform;
	   -moz-transition-property: -moz-transform;
		 -o-transition-property: -o-transform;
			transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	   -moz-transition-timing-function: ease-out;
		 -o-transition-timing-function: ease-out;
			transition-timing-function: ease-out;
	-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
			transform: translateX(0%);
}
.iis-effect-slide .iis-current-slide {
	opacity: 1;
	z-index: 1;
}
.iis-effect-slide .iis-previous-slide {
	-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
			transform: translateX(-100%);
}
.iis-effect-slide .iis-next-slide {
	-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
			transform: translateX(100%);
}
.iis-effect-slide.iis-direction-next .iis-previous-slide,
.iis-effect-slide.iis-direction-previous .iis-next-slide { opacity: 1; }

/* Touch styles */
.iis-touch-enabled .iis-slide { z-index: 1; }
.iis-touch-enabled .iis-current-slide { z-index: 2; }
.iis-touch-enabled.iis-is-touching .iis-previous-slide,
.iis-touch-enabled.iis-is-touching .iis-next-slide { opacity: 1; }

/* Fade effect */
.iis-effect-fade .iis-slide {
	-webkit-transition-property: opacity;
	   -moz-transition-property: opacity;
		 -o-transition-property: opacity;
			transition-property: opacity;
	-webkit-transition-timing-function: ease-in;
	   -moz-transition-timing-function: ease-in;
		 -o-transition-timing-function: ease-in;
			transition-timing-function: ease-in;
	opacity: 0;
}
.iis-effect-fade .iis-current-slide {
	opacity: 1;
	z-index: 1;
}


#cadre_sb {
	display:block;
  	width: 60%;
  	height: 20px;
  	background: cyan;
	color:#0000FF;
	font-family:Arial,Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-style:normal;
	text-shadow: 2px 3px 3px  #000000

}

#cadre_ab {
	display:block;
  	width: 60%;
  	height: 180px;
  	padding-top:20px;
  	padding-bottom:20px;
  	border: 3px solid blue;
  	background: cyan;
	color:#0000FF;
	font-family:Arial,Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-style:normal;
	text-shadow: 2px 3px 3px  #000000

}

.content-box {
  box-sizing: content-box;
  /* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
     Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
     Largeur de la boîte de contenu : 160px
     Hauteur de la boîte de contenu : 80px */
}

.border-box {
  box-sizing: border-box;
  /* Largeur totale : 160px
     Hauteur totale : 80px
     Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
     Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
}
	/*===================================================*/
	/*===================================================*/

section {
  margin: calc(var(--size) * .5) auto 0;
  width: calc(var(--size) * calc(var(--Nhexa) - 1));
	display: grid;
	grid-template-columns: repeat(var(--Nhexa), 1fr);
	grid-gap: var(--gap);
}

article {
	background			: cadetblue;
  	width				: var(--size); 
  	height				: calc(var(--size) / 1.1111111);
	-webkit-clip-path	: url(#hexagono);
		clip-path		: url(#hexagono);
  	-webkit-clip-path	: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
		clip-path		: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  	margin-right		: calc(var(--size) / 2);
	color				: #fff;
	/*overflow			: hidden;*/
}

article:nth-child(2n) {
	margin: calc(var(--size) * -.5) calc(var(--size) * -.25) 0 calc(var(--size) * -.75);
}

article::before {
	content: '';
	float: left;
	width: 15%;
	height: 100%;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	        clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}

article:hover img {
	transform		: translate(-50%, -50%) rotate(-110deg);
}

h2_menu {
	margin-right	: 10px;
	/*line-height		: var(--size);*/
	vertical-align	: middle;
	font-size		: calc(9 / var(--Nhexa) * 1vw);
	font-style		: bold;
	font-weight		: 400;


}

article img{
	width		: var(--size); 
	height		: var(--size);
	position	: absolute;
	top			: 50%;
	left		: 50%;
	transform			: translate(-50%, -50%);
	transform-origin	: 0% 50%;
	transition			: .75s;
	-webkit-clip-path	: url(#hexagono);
	        clip-path	: url(#hexagono);
	-webkit-clip-path	: inherit;
	        clip-path	: inherit;
	z-index				:  10;
}

figure_menu span{
	margin-left		: -30px;
	vertical-align	: middle;
}

figure_menu {
	display			: inline-flex;
	flex-direction	: column;
	flex-wrap		: nowrap;
	justify-content	: center;
	max-width		: 90%;
	height			: 100%;
	font-size		: calc(9 / var(--Nhexa) * 1vw);
	font-style		: bold;
	font-weight		: 400;
	line-height		: 15px;
	color			: #fff;
	transition		: .75s .05s;
  	text-align		: center;
	vertical-align	: middle;
}

figure p {
	font-size		: 70%;
	line-height		: 15px;
	width			: 100%;
}

h1_menu {
	width			: 100vw;
	background		: #FF0066;
	position		: sticky;
	top				: 0;
	z-index			: 1;
	margin-bottom	: calc(var(--size) * .55 + var(--gap));
	padding			: 2vh 0;
	text-align		: center;
	font-weight		: 400;
	color			: #fff;
}

body > p {
	font-size		: 1.5rem;
	margin			: 2rem 0 1rem calc(var(--size) * .5);
	font-weight		: 200;
}