#tooltip {
	position: absolute;
	visibility: hidden;
	background-color: #FFEEC7;
	border: 1px solid black;
	padding: 0.5em 0.7em;
	font-size: 1.1em;
	left: 8px;
	top: 19px;
	border-radius: 8px; 
	z-index:2;
}

h1 {
   font-size: 1.5rem;
}

h2 {
   font-size: 1.35rem;
}
 
h3 {
   font-size: 1.2rem;
}

h4 {
   font-size: 1.15rem;
}

figcaption {
    font-size: 1.15rem;
    text-align: center;
    margin-top: 20px;
 }

body {
   background-color: #FFF8EC;
   color: black;
   margin: 0.3% 7% 1% 7%;
   box-sizing: border-box;
   font-size: 1.15rem;
   line-height: 140%;
}

main {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}   

p {
   text-align: justify;
}

blockquote {
   color:#9c7464;
}   


a:link {
   color: inherit;   
}

a:visited {
   color: inherit;   
}

a:active {
   color: #999999   
}

sup { 
   vertical-align: super; 
   font-size: 75%;
   font-style: italic; 
   line-height: 1em;
}

.italic {
   font-style: italic;  
}

.bold {
    font-weight: bold; 
 }

.normal {
   font-style:normal;  
}

.debug{outline:4px solid blue;}

.underline {
    border-bottom: 2px solid #8f9394;
}

.upperline {
    border-top: 2px solid #8f9394;
}

.no-text-justify { 
   text-align:justify;  
   text-justify:none;
}

.no-text-decoration { 
   text-decoration: none;
}

.no-max-width { 
   max-width:none;
}

.line-height-18 { 
    line-height: 1.8rem;
}

.line-height-20 { 
   line-height: 2rem;
}

.line-height-30 { 
   line-height: 3rem;
}

.popup-accueil {
   border-radius: 5%;
   width: 160px;
}

img {
   display:block;
} 

.img-button  {
   width: 100%;
   height:100%;
   border-radius: 10%;
}

.float-left {
   float: left;
   margin-right: 20px;
}

.float-right {
   float: right;
   margin-left: 20px;
}

.button {
   
   display: block;
   border: 1px solid #171414;
   border-radius: 15%;
   background: linear-gradient(#E0DDDD, #B59C70);
   background: -webkit-linear-gradient(top, #E0DDDD, #B59C70);
   background: -moz-linear-gradient(top, #E0DDDD, #B59C70);
   background: -ms-linear-gradient(top, #E0DDDD, #B59C70);
   background: -o-linear-gradient(top, #E0DDDD, #B59C70);
   background-color: #B59C70;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 3px #5E4401;
   transition: 0.3s;
   cursor: pointer;
   position:relative;


}

.button:hover {
   background: none;
   background-color: #B59C70;
   box-shadow: 0px 0px 5px 0px #AAAAAA;
   border: 1px solid #ffffff;
}

.button:active {
   top: 1px;
   position: relative;
}

.big {
   padding: 5%;
}

.small {
   padding: 7%;
}

.middle img {
   width:120px;
}

.footer{
   text-decoration: none;
   color: black;
   font-weight: bold;
   font-size: 1.2rem;
   cursor: pointer;
}

.noir{color: #000000;}
.violet{color: #990099; text-align: left;}
.violet-pali{color: #9900CC;}
.orange{color: #CC6633;}
.vert{color: #339900;}
.gris{color: #666666;font-size: 18px;}

.bleu-cr {
   color: #4F81BD;
}

.brun-dialog {
    color: #9c7464;
}

.rouge-titre {
    color: #990000;
} 

.list-fleche {
  list-style-type: "\279C";
} 

ul.list-lien {
   list-style: none;
}
 
 ul.list-lien li::before {
   content: "\27A4";
   color: #9c7464;
   padding-right: 0.5em;
   padding-left: 1rem;
   font-weight: bold;
   display: inline-block; 
   width: 1em;
   margin-left: -1.5em;
}

.max-height-300 {
   max-height: 300px;
}

.overflow-hidden {
   overflow: hidden;
}

.list-box {
   display: block;
   background-color: #e7e7e7;
   border-radius: 1rem;
   overflow: hidden;
   padding: 5px;
}

.list_no_puce {
list-style-type: none
}

/*Start Lightbox*/
.preview-container {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   max-height: 300px;
   overflow: hidden;
}

div.cssbox {
   display: block;
   width: 200px;
   height: 150px;
   overflow: hidden;
}
 
.object-fit-cover {
 object-fit: cover;
}

.preview-dim {
   min-height: 150px;
   max-width: 200px;
}
 
figcaption.lightbox {
   position: relative;
   color: rgb(255, 255, 255);
   font-size: 1.5rem;
   top: 90%; 
}
 
span.cssbox_full {
   z-index: 999999;
   position: fixed;
   height: 100%;
   width: 100%;
   background-color: rgba(0,0,0,0.9);
   top: 0;
   left: 0;
   opacity: 0;
   pointer-events: none;
   cursor: default;
   transition: opacity 0.5s linear;
   text-align: center;
   vertical-align: bottom;
}
 
span.cssbox_full img {
   position: fixed;
   background-color: white;
   margin: 0;
   padding: 0;
   max-height: 80%;
   max-width: 80%;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 20px black;
}
 
a.cssbox_close,
a.cssbox_prev,
a.cssbox_next {
   z-index: 999999;
   position: fixed;
   text-decoration: none;
   visibility: hidden;
   color: white;
   font-size:60px;
}
 
a.cssbox_close {
   top: 2%;
   right: 2%;
}
 
a.cssbox_close::after {
   content: '\00d7';
}
 
a.cssbox_prev,
a.cssbox_next {
   top: 50%;
   transform: translate(0%, -50%);
}
 
a.cssbox_prev {
   left: 5%;
}
 
a.cssbox_next {
   right: 5%;
}
 
a:target ~ a.cssbox_close,
a:target ~ a.cssbox_prev,
a:target ~ a.cssbox_next {
   visibility: visible;
}
 
a:target > img.cssbox_thumb + span.cssbox_full {
   visibility: visible;
   opacity: 1;
   pointer-events: initial;
}
 
/*End Lightbox*/

/*Start Video Slider*/
#slides{
   position: relative;
   width: 100%;
   height: 450px;
   padding: 0px;
   margin: 0px;
   list-style-type: none;
   text-align: center;
}
 
.slide{
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   z-index: 1;
 
   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;


}
 
.showing{
   opacity: 1;
   z-index: 2;
}

iframe{
   width: 672px;
   height: 378px;
} 
 

.controls{
   color:#9c7464;
   border: none;
   font-size: 70px;
   cursor: pointer;
   background-color: #fff8ec00;
   display:none;
}
 
.controls:hover{
   color: #333;
}
 
.video-container{
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
}

button.button-left{
  position:absolute;
  z-index:5;
  top:50%;
  left:0px;
  margin:-70px 0 0 0;

}


button.button-right{
  position:absolute;
  z-index:5;
  top:50%;
  margin:-70px 0 0 0;
}
 
.pause{
   visibility: hidden; 
}

.left{
   left: 0;
   border-radius: 0 3px 3px 0;
}

.right{
   right: 0;
   border-radius: 3px 0 0 3px;
}

/*End Video Slider*/

/*start myTable*/

table.myTable {
   border-spacing: 0;
   width: 100%;
   min-width: 1200px;
   border-radius: 1.5rem;
   overflow: hidden;
   border: 2px solid #54320b;
}


th.myTable {
   cursor: pointer;
   background-image: linear-gradient(#E0DDDD, #B59C70);
   color: #54320b;
}

th.myTable, td.myTable {
   text-align: left;
   padding: 0.75rem;
}

tr.myTable{
   background-color: #ebe4d8;
}

tr.myTable:nth-child(even) {
   background-color: #fff8ec;
}

/*end myTable*/
/*start arbre vie*/

.Art-hidden{
    display: none;
}

.BoutonTAB{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 2rem;
}

Button{
    color: #522f07;
    font-size: 1rem;
    font-family: inherit;
    background-color: #fff1cc;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    border-radius: 0.5rem; 
    cursor: pointer;
}

Button:hover {
    border: 3px solid #B59C70;
}

.Art-visible {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 2px solid #8f9394;
    padding-bottom: 3rem;
}

.list_class {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.85rem;
    color: #8f9394;
}

.list_event {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 1.25rem;
    font-weight: bold;
    margin-left: 2rem;
}
    
.list_comment {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 1.1rem;
    margin-left: 2rem;
}
    
.list_autor {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
    font-weight: bold;
    margin-left: 2rem;
}
    
.list_img {
    display: block;
    width: 50%;
    margin: auto;
    padding: 1rem;
}

/*end arbre vie*/


@media only screen and (max-width: 700px){
    
   .middle img {
        width:75px;
   }

   div.cssbox {
      width: 80px;
      height: 50px;
   }

   .prev-dim {
      min-height: 50px;
      max-width: 80px;
   }

   .preview-container {
      max-height: 100px;
   }


   #slides{
        width: 100%;
        height: 250px;
   }

   .button-left{
        top:50%;
        left:0px;
        margin:-85px 0 0 0;
   }
     
     
   .button-right{
        top:50%;
        right:0px;
        margin:-85px 0 0 0;
        width:20px;
   }

   iframe {
        width: 310px;
        height: 180px;
   }

   body {
        margin: 0.3% 5% 1% 5%;
   }

   main {
    max-width: 98%;
 }

   blockquote {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
   }

   .controls{
        font-size: 50px;
   }

   .list_class {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 0.85rem;
        color: #8f9394;
    }

    .list_event {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 1.25rem;
        font-weight: bold;
        margin-left: 0rem;
    }
    
    .list_comment {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 1rem;
        margin-left: 0rem;
    }
    
    .list_autor {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 0.9rem;
        font-weight: bold;
        margin-left: 0rem;
    }
    
    .list_img {
        display: block;
        width: 90%;
        margin: auto;
        padding: 1rem;
    }

    img {
        width: 90%;
    }
}