body {
	scroll-behavior: smooth;
}
body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  margin-right: 20px;
  margin-left: 20px;
  background-color: #DCE1D7;
}
* {
  box-sizing: border-box;
}
a:active {color: #737A33}
a:visited {color: #737A33}
a:link {color: #737A33; text-decoration:none}
a:hover {color: #C84144}
.menu{
	color: #000000;
	font-weight: bold;
}
.menu:hover {
  color: #C84144;
  font-weight: bold;
}
a.menu:link, a.menu:visited {
  color: #000000;
}
h2{
	font-size: 24px;
	padding: 0 0 0 0; 
    margin: 12px 0 6px 0; 
}
ul, ol {
    padding: 0 0 0 1.25em; 
    margin: 0 0 0 0; 
}
img{
	max-width: 100%;
}
.photo_text{
	font-style: italic;
}
.source_text{
	font-size: 0.8em;
	font-style: italic;
}
.div_inline {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 5px 5px 5px;
}
.image_responsive {
  width: 100%;
  height: auto;
}
.image_variete {
  height:220px; 
  margin:3px;
}
div.image-center-cropped_big {
	width: 200px;
	height: 100px;
	overflow:hidden;
}
 div.image-center-cropped {
  width: 200px;
  height: 100px;
  overflow:hidden;
  display: inline-block; 
  vertical-align: middle;
     margin: 5px 5px 5px 5px;
}
div.image-center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}
.div_max{
	max-width:1000px;
	margin:0 auto;
	padding: 20px;
	background-color: #ffffff;
}
.italic { 
	font-style: italic;
	}
.texte_intro_section{
	font-size: large;
	margin-bottom: 10px;
}
.page_description{
	font-size: large;
}

/* GALLERY */
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

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

div.desc {
  padding: 15px;
  text-align: center;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 15.99999%;
}
.heather_title{
  font-family: "Barrio", system-ui;
  font-weight: 500;
  font-size: 6vw;
}
.logo{
	margin-bottom: 0.3rem;
}
.copyright{
	font-size: smaller;
}
.photo_text{
	font-style: italic;
	margin-bottom: 0.5rem;
	margin-bottom: 10px;
}
.texte_gris{
	color: #BDBDBD;
	color: #8E9B39;
	font-weight: bold;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.youtube_video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.hr_grid{
	width:100%;
	height:2px;
	border-width:0;
	color:#E9EBE7;
	background-color:#E9EBE7;
}
/* TABLEAU DEBUT*/
.td {
	vertical-align:top;
}
.img_table{
	max-width: 100%;
    max-height: 100%;
    display: block;
}
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #ecebec;
}
th { 
  color: white; 
  background: #727D34; 
}
td, th { 
  padding: 4px; 
  border: 0px solid #ccc; 
  text-align: left; 
}
/* TABLEAU FIN*/
/** BOUTON **/
.bouton{
	background-color: #737A33;
	color: #fff;
	border-radius: 2px;
	padding: .4em .7em;
	font-size: .9em;
	margin: 1em 0 0 0;
	border: none;
	cursor: pointer;
}
.bouton:hover {
  color: #fff;
  background-color: #6F6F6F;
  text-decoration: none;
}
a.bouton:link, a.bouton:visited {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
  cursor: default;
}
a.bouton:hover {
  color: #fff;
  background-color: grey;
  text-decoration: none;
}

/* VIDEO DEBUT */
.videoContainer {
	position: relative;
	max-width: 600px;
	width: 100%;
	overflow: hidden;
}
.embed_container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%;
	} 
.embed_container iframe, .embed_container object, .embed_container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	}
/* VIDEO FIN */	

/** BOUTON **/
@media only screen and (max-width: 900px) {
  .responsive {
    width: 33%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 700px) {
	.responsive {
		width: 49.99999%;
		margin: 6px 0;
	}
	.image_variete {
		width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 500px) {
	.responsive {
		width: 100%;
	}
	img{
		max-width: 450px;
	}
	.heather_title{
		font-size: 10vw;
	}
	.logo{
		margin-bottom: 1rem;
	}
}