@font-face {
  font-family: 'DKLemon'; /* Give your font a unique name */
  src: url('fonts/DK Lemon Yellow Sun.otf') format('opentype')
}
html{width: 100%; display: block; margin:0; padding: 0; font-size: 100%}
body{border: 0;padding: 0;margin: 0;width:100%; height: 100%; font-size: 1em; font-family: verdana; display: block}
header>span{color: #4a1c04; font-size:0.6em; display: block; margin: 3em 0 0 5%}
h1{font-family: DKLemon; position:relative; display: block; margin : 0 0 0 50px}
/*h1 span{font-size:.5em; color: #000}*/
h1>img{width: 400px}
.hide{display: none}
.vertical{font-family: DKLemon; font-size: 65px; color: #242426;display: block; position: absolute; left:380px; top:65px; transform: rotate(90deg); font-weight: 100}
.centredpicture{max-width: 1000px; width:80%; margin: 0 auto}
.centredpicture>img{width: 100%}


#bandeau{background-color: #4a1c04; color: #FFF;  padding: 2em; }
#bandeau>p{margin:0 0 0 5%}
#bandeauA{font-size: 1.5em; font-weight:normal}
#bandeauB{font-size: 2em; font-weight: bold}
main{margin-left: 5%}

h2{color:#4a1c04; font-size: 1.5em; font-weight: bold;margin-top: 2em; clear: both }
h3{margin-bottom: 0;margin-top: 1.5em; font-size: 1em; color: #764c34; text-decoration: underline;}
.serre{margin-top: 0;}
.special{color:#4a1c04}
.dateplanning{text-decoration: none}

footer{margin: 3em 0; height: 3em; background-color:#4a1c04; width: 100%; padding: 0}

.ambiance{display: block; margin:0 1em 1em 1em; float: left; }
.maraine{float:left; margin: 0 5px 5px 0;width: 200px;}
.planning{max-width: 95%;}
.planning tr td{border-bottom: 1px solid #c5a074 }
.planning tr td{padding: 5px 20px}
.planning tr td:first-child{border-left: 1px solid #c5a074}
.planning tr td.spe{border-right: 1px solid #c5a074}
.planning tr td.textegauche{text-align: left!important}
.planning tr td:last-child{border-right: 1px solid #c5a074; text-align: right}
.planning tr:first-child td{background-color:#4a1c04; color: #FFF; font-weight: bold}
.planning tr td[colspan="3"]{background-color: #c5a074; color: #4a1c04; font-weight: bold; padding-left: 20px; text-align: left}
.textepetit {font-size: .55em}

.planning2{max-width: 95%; font-size:.7em}
.planning2 tr td{border-bottom: 1px solid #c5a074 }
.planning2 tr td{padding: 5px 5px}
.planning2 tr td{border-left: 1px solid #c5a074}
.planning2 tr td.spe{border-right: none!important;text-align: left!important}
.planning2 tr td.centre{text-align: center}
.planning2 tr td:last-child{border-right: 1px solid #c5a074; text-align: right}
.planning2 tr:first-child td{background-color:#4a1c04; color: #FFF; font-weight: bold}
.planning2 tr td.separateur{border-bottom: 3px solid #4a1c04}
.planning2 tr td.textegauche{text-align: left!important}
.planning2 tr td.lieu{background-color:#c5a074; color: #FFFFFF; text-align: center; font-weight: bold}

/*.planning2 tr td[colspan="3"]{background-color: #c5a074; color: #4a1c04; font-weight: bold; padding-left: 20px; text-align: left}
*/


#bloc_intervenants{margin-top:1em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width: 100%}
.intervenant{margin:2em 0.5em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; width: 400px; }
.interspe{width: 450px !important;}
.intervenant h2 {width: 180px; height: 36px; background-image: url(img/planche.png); margin: 0; text-align: center; font-family: 'DKLemon'; color: #fff; font-size: 1.5em; margin: auto; padding-top: 0.1em; box-sizing: content-box;}
.intervenant .description{width:220px; font-size:.8em;background: linear-gradient(#fff 4%, #faba95 0%, #FFF 75% ); height: 100%}


nav{display: block;position: absolute; right:5%; top:1em ; margin: auto; width: 10%; height: 40px;margin-bottom:50px; background-color: #c5a074; font-size:1em; font-weight: bold; color:#4a1c04; text-align: center; padding-top: 5px }
nav>div{padding: 5px 0}
nav:hover{height: auto}
nav ul{display: none}
nav:hover ul{display: block}
nav ul{margin: 0; padding:0; list-style: none}
nav ul li a{display: block; padding: .5em; text-decoration: none; color:#FFF}
nav ul li a:hover{background-color:#4a1c04; color:#FFF; }



@media only screen and (max-width: 1000px) {
    .ambiance{display: block; margin: 1em auto; float: none; height: auto; width: 90%}
    .maraine{float:none; display: block; margin: 0 auto 5px auto; width: 50%;}
    .planning{width: 95%}
    nav{ width: 30%; height: auto; font-size:2em; }
    nav>div{padding: 1em 0}
    nav:hover{width: 90%}
    nav ul li a{font-size: 1.5em; padding: 1em; border-bottom:1px solid #FFF}
    .intervenant, .interspe {width: 70%!important }
    .intervenant div, .intervenant div,img{width: 100%; }
    .intervenant h2{width:100%; background-size: cover; background-repeat: no-repeat;font-size:4em;height: 1.9em;padding-top: .2em; box-sizing: content-box;}
    .intervenant .description{width:100%; font-size:2em;background: none  }
    .intervenant .description p{border-bottom: 2px solid  #4a1c04; padding-bottom: 3em; margin-bottom: 2em; }


    

    
    
}