@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
  src: url('courgette-v6-latin-regular.eot'); 
  src: local('Courgette Regular'), local('Courgette-Regular'),
       url('courgette-v6-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('courgette-v6-latin-regular.woff2') format('woff2'),
       url('courgette-v6-latin-regular.woff') format('woff'), 
       url('courgette-v6-latin-regular.ttf') format('truetype'), 
       url('courgette-v6-latin-regular.svg#Courgette') format('svg');
font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('roboto-v19-latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('roboto-v19-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('roboto-v19-latin-ext-regular.woff2') format('woff2'), 
       url('roboto-v19-latin-ext-regular.woff') format('woff'), 
       url('roboto-v19-latin-ext-regular.ttf') format('truetype'), 
       url('roboto-v19-latin-ext-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

*	{	margin:0 auto; padding:0;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;	}
html	{	font-size:15px; height:100%;	}
body {	background-color: #fff; font-family:'Roboto', 'Nimbus Sans L',-apple-system,BlinkMacSystemFont,"Segoe UI", sans-serif; color:#555;height:100%;}
header, section, footer, aside, nav, article, figure, figcaption, video {	display: block;	}
p, div, ul, ol, li, h1, h2, h3, h4, header, section, footer, aside, nav, article, figure, video, figcaption	{	 font-size:1.1rem; line-height:1.5rem; color:inherit; 	}
h1,h2,h3,h4	{	font-family: 'Courgette'; font-weight:normal;word-spacing:3px;	}
h1	{	margin:0 auto 15px auto; font-size:3rem; color:#d18e54; line-height:6rem;text-align:center;/*#b2aa8e*/;	}
h2	{	margin:0 auto 25px auto; font-size:2.5rem; line-height:3.5rem;	}
h3	{	margin:20px auto; font-size:1.8rem;line-height:2.2rem;	}
p, li	{	margin:0 auto 10px auto;	}
figcaption	{	font-size:1rem; margin:5px auto; text-align:center; font-style:italic;	}
header	{	background-color: #53536b; padding-bottom: 10px;	}
ul	{	list-style-position:inside; padding-left:10px;	}
footer	{	padding:20px 0;}
footer,.altern 	{	background-color: #53536b; color:white;	}
a	{	text-decoration:none;color: #d18e54;	}
.liens	{	background-color: #fff; padding:15px 15px; max-width:250px;-webkit-transition: all 650ms ease; -o-transition: all 650ms ease; transition: all 650ms ease;	}
.liens:hover	{background-color: #d18e54;-webkit-transform:scale(1.10); -ms-transform:scale(1.10); transform:scale(1.10);	}
.liens>a	{	color:#333;font-family: 'Courgette';	}
img	{	border:none; vertical-align:bottom;	}
form	{	display: flex;min-width: 0;	}
fieldset	{	flex: 1; border: solid 1px rgba(100,100,100,0.2);  width:50%; padding:1rem;	}
input, textarea	{	border: dashed 1px #53536b; border-radius:4px 4px;  font-family:inherit;  	}
input, textarea, label	{	font-size:1.1rem;line-height:1.6rem;	}
fieldset > p {	display: flex; margin:0 auto 20px auto; }
form input:not([type=submit]), textarea {	width:100%;background-color:#f1f1f4;padding:1px 4px;flex: 1; display: block; /* IE fix */ min-width: 0; /* fix for min-width: auto */	}
input[type=submit]	{	padding:5px 15px; background-color:#53536b; color:white; border-radius:4px 4px; margin:15px auto;	}
textarea {	min-height:200px;;	}
label	{	margin: 0 10px 0 auto;	}
*:required {	border-color:#ec0000;	}
*:valid {	border-color:#53536b;	}
.auCentre{text-align:center;}
.m0{margin:0 auto;}
.m10{margin:10px auto;}
.m20{margin:20px auto;}
.Vingt20{margin:20px 20px;}
.pad2020	{	padding:20px 20px;	}
.notes	{	font-size:0.9rem; font-style:italic;	}
.fullW{width:100%;}
.margeG	{	margin: 0 0 0 20px;display: flex; flex-direction: column;	}
.sections	{	display:-webkit-box;	display:-webkit-flex;	display:-ms-flexbox;	display:flex; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;min-height:500px; padding:30px 0;background-position: center bottom; background-repeat: no-repeat;	}
.wrap{display:flex; flex-wrap:wrap;}
.g50{gap:50px;}
.mainAudio{flex:2;}
.mainImg{flex:1; min-width:180px; max-width:250px;}
.box	{	-webkit-box-flex:1; -webkit-flex:1 1; -ms-flex:1 1; flex:1 1; padding-bottom:30px;	}
.bggrey	{	background-image: url('bg-down.png');background-position: center top;}
.bgwhite	{	background-image: url('bg-up.png'); 	}
.innerbox	{	width: 80%; max-width: 1300px; padding:20px 0;	}
.innerflex	{	display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;-webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;	}
.figflex	{	display:-webkit-box;	display:-webkit-flex;	display:-ms-flexbox;	display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap; margin:30px auto;	}
.figflex img	{	margin:10px 10px;-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s; border: solid 3px #d18e54; border-radius: 4px 4px;	}
.figflex img:hover {	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.39);	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.39);}
.items	{	-webkit-box-flex:1; -webkit-flex:1 auto; -ms-flex:1 auto; flex:1 auto; width:30%; min-width:300px; margin:20px 20px; display:flex; flex-direction:column; justify-content: center; padding:10px 10px;	}
.border{border:solid 1px rgba(100,100,100,0.2);}
.wall	{	-webkit-box-flex: 25%; -webkit-flex: 25%; -ms-flex: 25%; flex: 25%; max-width: 25%; padding: 0 5px;	}
.wall img	{	margin-top: 10px;vertical-align: middle;width:100%; border-radius:4px 4px;	}
#navmenu {height:45px;background:#53536b;padding-top:5px;}
#navmenu.fixed {height:65px;position:fixed;width:100%;top:0;left:0;z-index:900;}
#menu	{	text-align:center; padding-left:unset;	}
#menu li	{	display:inline;  padding:0 15px;line-height:2.2rem; margin:0 auto;	}
/*#menu.onTop li	{	line-height:28px;	}*/
#menu a	{	font-family:courgette;font-weight:normal;	}
#menu img	{	vertical-align:top;width:44px; height:44px;	}
#menu.onTop img	{	width:28px; height:28px; 	}
#menu span	{	display:none;	}
#menu.onTop span	{	display:inline;margin-left:8px;	}
#navmenu.fixed > #menu:before	{	content:"Paroles du Toulourenc"; display:block; font-size:1rem;line-height:1.6rem;letter-spacing:4px;font-family: 'Courgette';color:#eee;	}
div#slider,#enTete { width: 80%; max-width: 1260px;overflow: hidden; margin:0 auto 30px auto; } 
div#slider figure {	position: relative;width: 700%;font-size: 0;text-align: left;-webkit-animation: 40s slidy infinite; animation: 40s slidy infinite;	}
div#slider figure img { width: calc(100% / 7); height: auto; float: left; }
#enTete img	{	width:100%; height:auto;	}
@-webkit-keyframes slidy {
  0% { left: 0%; }
  12% { left: 0%; }
  14% { left: -100%; }
  26% { left: -100%; }
  28% { left: -200%; }
  40% { left: -200%; }
  42% { left: -300%; }
  55% { left: -300%; }
  57% { left: -400%; }
  70% { left: -400%; }
  72% { left: -500%; }
  86% { left: -500%; }
  88% { left: -600%; }
  100% { left: -600%; }
}
@keyframes slidy {
  0% { left: 0%; }
  12% { left: 0%; }
  14% { left: -100%; }
  26% { left: -100%; }
  28% { left: -200%; }
  40% { left: -200%; }
  42% { left: -300%; }
  55% { left: -300%; }
  57% { left: -400%; }
  70% { left: -400%; }
  72% { left: -500%; }
  86% { left: -500%; }
  88% { left: -600%; }
  100% { left: -600%; }
}

#myModal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding:30px 30px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.97);
}
.modal	{	opacity:0;	}
.opaque	{	opacity:1; -webkit-transition: opacity 750ms ease-in; -o-transition: opacity 750ms ease-in; transition: opacity 750ms ease-in;	}
/* Modal Content */
.modal-content {
  position: relative;
  width: 90%;
  height:100%;
}
#imgBox {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-content:center;
      -ms-flex-line-pack:center;
          align-content:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow:hidden;
}
#imgBox>img {	max-width:100%;	}
#caption {	color: white; font-size:0.9rem; 	}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,.close:focus {	color: #999; cursor: pointer;	}
.cursor {	cursor: pointer;	}

/* Next & previous buttons */
.prev,.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left:0;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  -webkit-transition: 0.6s ease;
  -o-transition: 0.6s ease;
  transition: 0.6s ease;
  -webkit-border-radius: 0 3px 3px 0;
          border-radius: 0 3px 3px 0;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
/* Position next */
.next {	left: calc(100% - 49px); border-radius: 3px 0 0 3px;	}
.prev:hover, .next:hover {	background-color: rgba(0, 0, 0, 0.8);	}

@media (max-width: 1020px) {
div#slider, #enTete, .innerbox	{	width:90%;	}
form {	flex-direction: column;	}
fieldset	{	width:100%;	}
.margeG	{	margin: 20px auto 0 auto;	}
label	{	margin:0 auto;	}
fieldset > p {	flex-direction: column; }
}
@media (max-width: 768px) {
h1	{	font-size:2.5rem; line-height:4rem;	}
.mainAudio{flex:unset;}
.wall	{	-webkit-box-flex: 50%; -webkit-flex: 50%; -ms-flex: 50%; flex: 50%; max-width: 50%; padding: 0 5px;	}
#myModal {	padding:10px 30px;	}
}
@media (max-width: 540px) {
h1	{	font-size:2rem; line-height:3rem;	}
div#slider, #enTete, .innerbox	{	width:100%;	}
.wall	{	-webkit-box-flex: 100%; -webkit-flex: 100%; -ms-flex: 100%; flex: 100%; max-width: 360px; padding: 0 5px;}
#menu.onTop img	{	width:44px; height:44px; 	}
#menu.onTop span	{	display:none; 	}
#navmenu.fixed > #menu:before	{	content:"Paroles du Toulourenc"; display:block; font-size:1rem;line-height:1.6rem;letter-spacing:2px;font-family: 'Courgette';color:#eee;	}
h2	{	text-align:center; line-height:3rem;	}
form input:not([type=submit]), textarea {	flex: unset;	}
}