* {
  box-sizing: border-box;
  
}
div {
	  font-family: Arial, Helvetica, sans-serif;
}

.menu {
  float: left;
  min-width: 250px;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #888;
  background-color:rgba(109, 207, 246, 0.9);
}
	.menuitem a {
		text-decoration: none;
		color: #444444;
		font:  14px arial ;
		font-weight: 600;
    }
	.menuitem a:hover {	
		color: #eee;
		background-color: #012356;
    }
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
  text-align: center;
}
.right {
  /*background-color:rgba(255, 255, 255, 0.5);*/
  float: left;
  width: 75%;
  padding: 10px 15px;
  margin-top: 7px;
  text-align: center;
  
}
.form1 {
  /*background-color:rgba(255, 255, 255, 0.5);*/
  float: left;
  width: 100%;
  padding: 10px 15px;
  margin-top: 7px;
  text-align: center;
  
}
.imag2 {
  text-align: center;
  height:800px;
  overflow-y: auto ; 
  background-color:rgba(255, 255, 255, 0.5);
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}

.ima_b {
	height: 100%;
	max-width: 100%;
}
.ima_auto {
        display: block;
        margin: 0 auto;
        max-width: 100%;
}
.ima_b {
	border: 2px;
}



.coste {
	max-width: 800px;
}
.ima_coste {
	max-width: 100%;
	width: auto;
}
.tab_ima {
	background-color:#0F0;
	height: 600px;
	
}
.ima_thome {
	
	width: auto;
	max-height: 800px;
}
.bandeau {
	background-color:rgba(212, 224, 156, 0.5);
	text-align:center;
	width: 100%;
	height: 20%;
  padding:0px;  
}
.page {
background-color:#d4e09c;
background-image:url(img/foret.jpg);
background-repeat:no-repeat;
background-position:top;
background-attachment:fixed;
background-size:100%;
}
ul.zone_std {
background-color:rgba(255, 255, 255, 0.7);
list-style:none;
margin-top: 10px;
margin-bottom: 10px;
margin-left:0;
padding-left:0;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
text-indent: 10px;
}
.text_std {
    text-align: left;
    color: #000;
    font-size: 11pt;
    margin-top: 10px;
    font-weight: 300;
	padding: 20px;
}
.text_std_aa {
    text-align: justify;
    color: #000;
    font-size: 10pt;
    margin-top: 5px;
    font-weight: 500;
	padding: 10px;
}
.text_std_c {
    text-align: justify;
    color: #000;
    font-size: 11pt;
    margin-top: 10px;
    font-weight: 500;
	padding: 20px;
}

.text_std_c a {  
    color: #004bb0;

}
.text_std_c a:hover {  
    color: #000;
	font-weight: 700;

}
.text_t1 {
    text-align: center;
    color: #000;
    font-size: 11pt;
    margin-top: 5px;
    margin-left: 0px;
    font-weight: 600;
}
.text_t2 {
    text-align: center;
    color: #555;
    font-size: 10pt;
    margin-top: 5px;
    margin-left: 0px;
    font-weight: 600;
}
div.titre_10{
padding-top: 20px;
margin-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #004bb0;
text-align: center;
text-indent: 10px;
font-size: 16pt;
margin-top: 5px;
margin-left: 0px;
font-weight: 600;
}

div.band_timer {
	max-width:200px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 5px;
	}
div.m800 {
	max-width:600px;
	margin-left: auto;
    margin-right: auto;
	}
div.list_d {
	/* float:right; */
	width: 100%;	
	height:680px;
	overflow-x: none;
	overflow-y: auto ;
	background-color:#009;
	}
div.text_td {
	height: 25px;
	background-color:rgba(255, 255, 255, 0.5);
    text-align: center;
	padding-top: 5px;
    color: #000;
    font-size: 11pt;
    margin-top: 20px;
    font-weight: 600;
}
div.tc {
	background-color:#333;
	padding-top: 3px;
	padding-bottom: 3px;
    text-align: center;
	padding-top: 5px;
    color: #fff;
    font-size: 15pt;
    margin-top: 20px;
    font-weight: 600;
}
div.tc2 {
	background-color:#333;
	padding-top: 3px;
	padding-bottom: 3px;
    text-align: center;
    color: #fff;
    font-size: 12pt;
    margin-top: 5px;
    font-weight: 500;
}

div.text_td2 { /*----- Titre centrale -----*/
	height: 35px;
	background-color:rgba(255, 255, 255, 0.8);
    text-align: center;
	padding-top: 8px;
    color: #000;
    font-size: 14pt;
    margin-top: 20px;
    font-weight: 600;
}
div.text_td3 {
	/*height: 15px;*/
	background-color:rgba(255, 255, 255, 0.9);
    text-align: center;
	padding-top: 1px;
    color: #000;
    font-size: 10pt;
    margin-top: 5px;
    font-weight: 600;
	font-style: italic;
}
div.text_td4 {
	/*height: 15px;*/
	background-color:rgba(255, 255, 255, 0.9);
    text-align: left;
	padding-left: 20px;
	padding-top: 1px;
    color: #000;
    font-size: 12pt;
    margin-top: 5px;
    font-weight: 700;
	font-style: italic;
}
div.ima_pl {

	background-color:rgba(255, 255, 255, 0.8);
}
.ima_t1 {
	max-height: 700px;
	height:100%;
	width:auto;
}
.form5 {

	display: inline-block;
	color: #555;
	font-size: 10pt;
	margin-top:10px;
	margin-left: 10px;
}

 /*------------ Gestion planches images ---------------*/
figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0;
}
img, figcaption {
    transition: all .25s ease;
}

figcaption {
    position: absolute;
	text-align:center;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .3em;
    background: #000;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    opacity: 0;
}
figure:hover img {
    transform: scale(1.1);
}
figure:hover figcaption {
    opacity: 1;
}
 /*------------ Fin Gestion planches images ---------------*/
 

div#text_bouton {
	height: 20px;
	background-color:rgba(255, 255, 255, 0.8);
    text-align: left;
	padding-top: 0px;
	padding-left: 20px;
    color: #000;
    font-size: 10pt;
    margin-top: 5px;
    font-weight: 500;
}
div#text_bouton2 {
	height: 35px;
	background-color:rgba(255, 255, 255, 0.8);
    text-align: left;
	padding-top: 10px;
	padding-left: 20px;
    color: #000;
    font-size: 11pt;
    margin-top: 10px;
    font-weight: 500;
}
ul{
	list-style:none;	
}
li{
	list-style:none;	
}
ul.plante {
	list-style:none;	
}
ul.zone_select {
	list-style:none;
	text-align:left;
	font-family: arial;
	font-size:14px;
	padding-top:5px;
	padding-bottom:10px;
	margin-bottom: 7px;
	color:#222;
	width: 100%;
	right: 5px;
	background-color:rgba(255, 255, 255, 0.75);	
}
li.chap {
	background-color:#444;
	color: #FFF;
	font-size: 11pt;
	margin-top:2px;
	margin-left: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	width: 100%;
	font-weight:600;
	text-align:left;
	text-indent: 20px;
}
li.chap1 {
	background-color:#999;
	color: #000;
	font-size: 10pt;
	margin-top:2px;
	margin-left: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: 100%;
	font-weight:500;
	text-align:left;
	text-indent: 20px;
}

li.planc {
	background-color:#666;
	color: #FFF;
	font-size: 12pt;
	margin-top:2px;
	margin-left: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: 100%;
	font-weight:600;
	text-align:left;
	text-indent: 10px;
}
li.band1 {
	background-color:#444;
	color: #FFF;
	font-size: 12pt;
	margin-top:15px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
	font-weight:600;
	text-align:left;
	text-indent: 20px;
}
li.comm {
	color: #000;
	font-size: 10pt;
	margin-top:2px;
	margin-left: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	width: 100%;
	font-weight:500;
	line-height : 125%;
	text-align: justify;
	text-indent: 15px;	
}
li.attention {
	background-color:#f16423;
	color: #fff;
	font-size: 10pt;
	margin-top:10px;
	margin-left: 22px;
	padding-left: 10px;
	padding-right: 10px;
	width: 85%;
	font-weight:500;
	text-align: justify;
	text-indent: 15px;	
}
/* formulaires tarifs pro  */
form.code{
	margin-top: 1px;
	border:0px solid #777;
	background-color:transparent;
	font-size:12px;
	font-style:italic;

}
.decal{
	margin-left:10px;
	background-color:#ddd;
	width:120px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:1px solid #ccc;
}
.decal2{
	margin-left:56px;
	background-color:#ddd;
	width:120px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:1px solid #ccc;
}

button{
	color: #fef4e9;
	font-size:12px;
	font-weight:500;
	padding-top: 3px;
	border: solid 1px #041756;
	background: #0f44f4;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #0f44f4,  #0b31af);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
	width:120px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	height:25px;
	box-shadow: 1px 1px 8px #555;
	-moz-box-shadow: 1px 1px 8px #555;
    -webkit-box-shadow: 1px 1px 8px #555;
} 
button:hover{
	color:black;
	text-shadow:1px 1px 2px #ffffff;
	border: solid 1px #aabeff;
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #0f44f4,  #08278d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
	


}
/** --------- Diapo Plantes -------------- **/
.thumb {
    display: inline;
    max-height: 200px;
}
#thumblist {
    text-align: center;
    border-radius: 8px;
    padding: 0;
    
}
#thumblist img {
    border-radius: 8px;
}
.description {
      color: white;
      text-decoration: none;
}

/** relevant CSS Below **/

.lightbox {
    display: none; /**définit l'affichage par défaut pour masquer la lightbox jusqu'à ce que ce soit la cible:**/
    position: fixed; /**the rest of this styling makes the lightbox full screen when selected**/
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}
.lightbox img { /**définit le style de l'image dans la lightbox**/
    max-width: 80%;
    max-height: 90%;
    text-align: center;
    margin-top: 2%;
}
.lightbox:target { /**this is where the magic happens. makes the lightbox display when it's the target of a clickable link**/
    outline: none;
    display: block;
}
.previous { /**styling the left arrow**/
    position: fixed;
    left: 4px;
    top: 40%;
    width: 40px;
}
.exit { /**styling the exit button**/
    position: fixed;
    top: 4px;
    right: 4px;
    width: 40px;
}
.next { /**styling the right arrow**/
    position: fixed;
    right: 4px;
    top: 40%;
    width: 40px;
}
li.list_noms{
	background-color:rgba(255, 255, 255, 0.5);
	margin-top:2px;
	margin-left: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: 100%;
	font-weight:600;
	text-align:left;
	text-indent: 20px;
	text-decoration: none;
}
li.list_noms a{
	text-decoration: none;
	font-size: 9pt;
	color: #111;
}
li.list_noms a:hover{
	text-decoration: none;
	font-size: 10pt;
	color: #888;
}
li.list_noms img{
	width:125px;
}
li.list_quizz{
	background-color:rgba(255, 255, 255, 0.5);
	margin-top:2px;
	margin-left: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align; center;
	width: 100%;
	color: black;
	font-size: 9pt;
	font-weight:400;
	text-align:left;
	text-indent: 20px;
	text-decoration: none;
}
li.list_quizz img{
	width:125px;
}
/* --------- Tableau temperatures ----------------------------- */
table {
  width: 100%;
}
td.tr1 {
	font-family: arial;
	font-weight: 500;
	font-size: 10pt;
	background-color:rgba(50, 50, 50, 0.75);
	text-align: center;
	color: white;	
}
td.tr2 {
	font-family: arial;
	font-weight: 500;
	font-size: 10pt;
	background-color:rgba(236, 43, 39, 0.75);
	text-align: center;
	color: white;	
}
td.tr3 {
	font-family: arial;
	font-weight: 500;
	font-size: 10pt;
	background-color:rgba(162, 0, 255, 0.75);
	text-align: center;
	color: white;	
}
td.tr4 {
	font-family: arial;
	font-weight: 500;
	font-size: 11pt;
	background-color:rgba(10, 10, 10, 0.75);
	text-align: center;
	color: white;	
}
td.tr2017 {
	font-family: arial;
	font-weight: 500;
	font-size: 11pt;
	background-color:rgba(68, 114, 196, 0.75);
	text-align: center;
	color: white;	
}
td.tr2018 {
	font-family: arial;
	font-weight: 500;
	font-size: 11pt;
	background-color:rgba(4, 69, 125, 0.75);
	text-align: center;
	color: white;	
}
td.tr2019 {
	font-family: arial;
	font-weight: 500;
	font-size: 11pt;
	background-color:rgba(250, 60, 30, 0.75);
	text-align: center;
	color: white;	
}
td.tr2020 {
	font-family: arial;
	font-weight: 500;
	font-size: 11pt;
	background-color:rgba(255, 220, 10, 0.75);
	text-align: center;
	color: white;	
}
div#list_d2_t {
	/* float:right; */
	text-align:center;
	font-family: arial;
	font-size:12px;
	padding-top:5px;
	margin-bottom: 7px;
	color:#222;
	width: 100%;
	height: 20px;
	right: 5px;
	background-color:rgba(255, 255, 255, 0.5);
	}
div#list_actif {
	text-align:center;
	font-family: arial;
	font-size:12px;
	padding-top:5px;
	margin-bottom: 7px;
	color:#FFFFFF;
	width: 100%;
	height: 20px;
	right: 5px;
	background-color:rgba(32, 88, 187, 1);
	}
div#list_sep {
	text-align:center;
	font-family: arial;
	font-size:12px;
	padding-top:5px;
	margin-bottom: 7px;
	color:#FFFFFF;
	width: 100%;
	height: 10px;
	right: 5px;
	background-color:rgba(50, 50, 50, 1);
	}
div#titre_droit {
	/* float:right; */
	text-align:center;
	font-family: arial;
	font-size:14px;
	font-weight: 600;
	padding-top:7px;
	margin-top: 15px;
	margin-bottom: 7px;
	color:#222;
	width: 100%;
	height: 30px;
	right: 5px;
	background-color:rgba(255, 255, 255, 0.8);
	}
div#wid {
	/* float:right; */
	text-align:center;
	padding-top:7px;
	margin-top: 15px;
	margin-bottom: 7px;
	color:#222;
	width: 100%;
	background-color:rgba(255, 255, 255, 0.8);
	}
div.txt_com {
	/* float:right; */
	text-align:left;
	font-family: arial;
	font-size:12px;
	font-weight: 500;
	font-style:italic;
	padding-top:7px;
	margin-top: 15px;
	margin-bottom: 0px;
	margin-left: 15px;
	color:#222;
	width: 100%;
	height: 30px;
	}

/* --------- FIN Tableau temperatures ----------------------------- */
/* ------------ Definition pour images au survol ----------------- */
.gallerycontainer{
position: relative;
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
height: 200px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
right: 0;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 20px;
right: 10px; /*position où l'image agrandie doit être décalée horizontalement */

z-index: 50;
}

div#genere {
width:100%;
height: 43px;
background:url("img/bout_gene.png") no-repeat;
background-size: 150px 43px;
background-position: center;
text-decoration: none;
text-align: center; 
} 
div#genere:hover {
background:url("img/bout_gene1.png") no-repeat;
background-size: 150px 43px;
background-position: center;
}

/*--------------  Smart Photo ----------------------------- */
.imag_det{
    width:100%;
    margin: 0 auto;
	background-color: #666;
}

.masonry {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  -moz-column-fill: initial;
  -webkit-column-fill: initial;
  column-fill: initial;
  background-color: #aaa;

}
.masonry .brick {
  margin-bottom: 30px;
  overflow: hidden;

}
.masonry .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

}
.masonry .brick:hover img {
  opacity: .75;
}
.masonry.bordered {
  -moz-column-rule: 1px solid #eee;
  -webkit-column-rule: 1px solid #eee;
  column-rule: 1px solid #eee;
  -moz-column-gap: 50px;
  -webkit-column-gap: 50px;
  column-gap: 50px;
}
.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}
.masonry.gutterless {
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
}
.masonry.gutterless .brick {
  margin-bottom: 0;
}

.span {
  -moz-column-span: all;
  -webkit-column-span: all;
  column-span: all;
  *margin: 30px 0;
}

@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .imag_det {
    width: 80%;
    padding: 2em;
  }

  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .imag_det {
    width: 85%;
    padding: 1.5em;
  }

  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}


/*--------------  Formulaire inscription quiz ----------------------------- */
.form_q1{
	margin-left:56px;
	background-color:#fff;
	width:300px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:1px solid #000;
}