body {
  --main-color: rgb(152, 205, 203);
  --main-grey: rgb(245, 244, 240);
  --main-fusion-black: rgba(0, 0, 0, 0.9);
  --main-width:100rem;
  --main-padding:3rem;
  background-color: var(--main-grey);
}

/* ### 404 ### */
.e404 {
  padding:4rem;
  font-size:2rem;
}

/* ### admin ### */
#admin-link{
  display:block;
  height:1.4rem;
  font-weight:bold;
  margin-bottom:0.5rem;
}

#admin-link img{
  width:auto;
  height:100%;
}

/* ### header ### */


header.main .container{
  height:11rem;
  max-width:var(--main-width);
  margin:auto;
  padding:2rem var(--main-padding) 1rem var(--main-padding);
  display: flex;
  justify-content: space-between;
}

header.main a.home{
  display:block;
  height:100%;
  display:flex;
}

header.main a.home .cerf{
  width:7rem;
  height:7rem;
  margin-right:2rem;
  background-color: var(--main-color);
  background-image: url('../img/cerf.png');
  background-blend-mode: multiply;
  background-size: contain;
  background-repeat: no-repeat;
}

header.main a.home .cerf-mask{
  width:7rem;
  height:7rem;
  margin-right:2rem;
  background-image: url('../img/cerf-mask.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left:0;
  top:0;
}

header.main a.home div.logo{
  margin-top:0.5rem;
}


header.main h1{
  font-size:2rem;
  color:var(--main-fusion-black);
}

header.main h1 span{
  display:block;
  font-size:1.3rem;
}

header.main h2{
  display:bold;
  font-size:1.2rem;
  margin-bottom:2rem;
  color:var(--main-fusion-black);
}

header.main div.language{
  color:--var(main-color);
}

header.main div.language input[type='radio']{
  display:none;
}

header.main div.language input[type='radio'] + label{
  display: block;
  padding:0.2rem 0;
  cursor: pointer;
  font-size:1.1rem;
}

header.main div.language input[type='radio']:checked + label{
  cursor: default;
  color:rgba(0,0,0,0.3);
}

nav.main{
  background-color: var(--main-color);
}

nav.main ul{
  max-width:var(--main-width);
  margin:auto;
  padding:0 var(--main-padding) 0 var(--main-padding);
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
}

nav.main ul li a{
  display:block;
  padding:1rem 0.8rem;
  font-weight:bold;
  color:var(--main-fusion-black);
  font-size:1.13rem;
}

nav.main ul li a:hover,
nav.main ul li a:focus{
  color:rgba(0,0,0,1);
  background-color:var(--main-fusion-black);
  color: var(--main-color);
}

body.camping nav.main ul li.camping a,
body.camping_point nav.main ul li.camping a,
body.accommodations nav.main ul li.accommodations a,
body.locations nav.main ul li.locations a,
body.perigord nav.main ul li.perigord a,
body.perigord_point nav.main ul li.perigord a,
body.contact nav.main ul li.contact a,
body.library nav.main ul li.library a,
body.workshops nav.main ul li.workshops a{
  color:var(--main-fusion-black);
  background-color: rgba(0,0,0,0.1);
}

body.camping nav.main ul li.camping a:hover,
body.camping_point nav.main ul li.camping a:hover,
body.accommodations nav.main ul li.accommodations a:hover,
body.locations nav.main ul li.locations a:hover,
body.perigord nav.main ul li.perigord a:hover,
body.contact nav.main ul li.contact a:hover,
body.library nav.main ul li.library a:hover,
body.workshops nav.main ul li.workshops a:hover,
body.camping nav.main ul li.camping a:focus,
body.accommodations nav.main ul li.accommodations a:focus,
body.locations nav.main ul li.locations a:focus,
body.perigord nav.main ul li.perigord a:focus,
body.perigord_point nav.main ul li.perigord a:focus,
body.contact nav.main ul li.contact a:focus,
body.library nav.main ul li.library a:focus,
body.workshops nav.main ul li.workshops a:focus{
  color:var(--main-fusion-black);
  background-color: rgba(0,0,0,0.1);
  cursor:default;
}

body.camping_point nav.main ul li.camping a:hover{
  cursor:pointer;
}

body.perigord_point nav.main ul li.perigord a:hover{
  cursor:pointer;
}

/* ### content ### */
.content {
  position: relative;
  max-width: var(--main-width);
  margin:auto;
  padding-top:0rem;
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  grid-gap:3rem;
  padding:var(--main-padding);
}

.content figure.header{
  overflow:hidden;
  grid-column: 1/4;
}

.content figure.header img{
  width:100%;
  height:auto;
}

.content h1{
  font-size:1.7rem;
  color:var(--main-fusion-black);
  font-weight:bold;
  grid-column: 1 / 4;
  text-align: center;
}

.content h1 span.title{
  display: inline-block;
  color: var(--main-color);
  text-align:center;
  font-size:3rem;
}

article.text p{
  padding-bottom: 1rem;
}

article.text p:last-child{
  padding-bottom: 0rem;
}

article.text p a{
  display:inline-block;
  background-color:white;
  padding:0.2rem 0.4rem;
}

article.text p a:hover,
section article.text p a:focus{
  background-color:var(--main-color);
}

.content section.description{
  font-size: 1.2rem;
  grid-column: 1 / 2;
}

figcaption{
  background-color: rgba(255,255,255,0.5);
  padding:0.5rem 1rem;
  font-size:1.2rem;
  border-radius:0.2rem;
  z-index:2;
  position:absolute;
  bottom:1rem;
  left:1rem;
  font-weight:bold;
  font-size:0.9rem;
  margin-right:1rem;
}

section.hat{
  position:relative;
  background-position: center center;
  background-size: cover;
  height:40vw;
  width:100vw;
  display: table-cell;
  vertical-align: middle;
}

section.hat div{
  position: relative;
  max-width: var(--main-width);
  margin:auto;
  padding:var(--main-padding);
  padding-top:0;
  display: grid;
  grid-template-columns:repeat(4, 1fr);
}

section.hat div h1{
  grid-column: 1 / 5;
  text-align: center;
}

section.hat div h1 span.title{
  display: inline-block;
  padding:1rem 1.4rem;
  border-radius:0.2rem;
  color: var(--main-color);
  font-size:4rem;
  font-weight:bold;
  text-align:center;
}

section.hat div article{
  background-color:white;
  grid-column: 2 / 4;
  padding:3rem;
  font-size:1.3rem;
  border-radius: 0.2rem;
}

/* ### camping ### */


body.camping .content .point_list{
  grid-column: 2 / 4;
}

body.camping .content .point_list .pages{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-gap:3rem;
}

body.camping .content .pages a,
body.point .content .pages a,
body.locations .content .pages a,
body.perigord .content .pages a,
body.workshops .content .pages a{
  display:block;
}

body.camping .content section.page,
body.point .content section.page,
body.locations .content section.page,
body.perigord .content section.page,
body.workshops .content section.page{
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

body.camping .content section.page h2,
body.point .content section.page h2,
body.locations .content section.page h2,
body.perigord .content section.page h2,
body.workshops .content section.page h2{
  z-index:2;
  margin-bottom:-2rem;
  font-size:1.2rem;
  font-weight:bold;
  padding:1rem 1.8rem;
  color: var(--main-fusion-black);
  background-color: var(--main-color);
  border-radius: 0.2rem;
}

body.camping .content .pages a:hover section.page h2,
body.point .content .pages a:hover section.page h2,
body.locations .content .pages a:hover section.page h2,
body.perigord .content .pages a:hover section.page h2,
body.workshops .content .pages a:hover section.page h2,
body.camping .content .pages a:focus section.page h2,
body.point .content .pages a:focus section.page h2,
body.locations .content .pages a:focus section.page h2,
body.perigord .content .pages a:focus section.page h2,
body.workshops .content .pages a:focus section.page h2{
  color: var(--main-color);
  background-color: var(--main-fusion-black);
}

body.camping .content section.page figure,
body.point .content section.page figure,
body.locations .content section.page figure,
body.perigord .content section.page figure,
body.workshops .content section.page figure{
  z-index:1;
  width:100%;
  display:block;
  border-radius: 0.2rem;
}

body.camping .content section.page figure img,
body.point .content section.page figure img,
body.locations .content section.page figure img,
body.perigord .content section.page figure img,
body.workshops .content section.page figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 0.2rem;
}

/* ### camping detail ### */



body.point .illustrations{
  grid-column: 2 / 4;
}

body.point .illustrations figure {
  width:100%;
  margin-bottom:3rem;
}

body.point .illustrations figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 0.2rem;
}


body.point .point_list{
  margin-top:5rem;
  padding-top:5rem;
  border-top:0.2rem solid var(--main-color);
  grid-column: 1 / 4;
}


body.point .point_list .pages{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-gap:3rem;
}



/* ### accommodations ### */


body.accommodations .content section.points {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body.accommodations .content section.points h2{
  text-align:center;
  padding:1.6rem 1rem 0.6rem 1rem;
  border-bottom: 0.4rem solid var(--main-color);
  margin-bottom:1rem;
  font-weight:bold;
  font-size:1.6rem;
  color: var(--main-fusion-black);
}

body.accommodations .content section.points article.text{
  text-align: center;
  font-size:1.2rem;
}

/* ### locations ### */

body.locations .content .main_description{
  grid-column: 2 / 3;
  margin:0 -5rem;
  font-size:1.4rem;
  text-align: center;
}

body.locations .content .locations .prices{
  grid-column: 1 / 3;
  margin-bottom:2rem;
  font-size:0.9rem;
}

body.locations .content .locations .prices dl{
  padding:0.7rem;
}

body.locations .content .prices{
  grid-column: 2 / 4;
  font-size:1rem;
}

body.locations .content .prices div.images{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 3rem;
  margin-top:3rem;
}

body.locations .content .prices div.images figure img{
  display:block;
  width:100%;
  height:auto;
}

body.locations .content .prices dl{
  display: flex;
  padding:1rem;
}

body.locations .content .prices dl:nth-child(even){
  background-color:white;
}

body.locations .content .prices dt{
  width:40%;
  padding-right:1rem;
}

body.locations .content .prices dd{
  width:30%;
  padding-right:1rem;
}

body.locations .content .prices dl span{
  font-weight:bold;
  display:block;
}

body.locations .content h3{
  grid-column: 1 / 4;
  font-size:1.6rem;
  font-weight:bold;
  color:var(--main-fusion-black);
}

body.locations .content div.locations {
  grid-column: 2 / 4;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:var(--main-padding);
}

body.locations .content a.location{
  display:block;
}

body.locations .content a.location:hover section.page h2,
body.locations .content a.location:focus section.page h2{
  background-color:var(--main-fusion-black);
  color:var(--main-color);
}

body.locations .content a.location:hover article.prices,
body.locations .content a.location:focus article.prices{
  background-color:var(--main-color);
  color:var(--main-fusion-black);
}

body.locations .content a.location article.prices{
  width:100%;
  display:flex;
  font-size:0.9rem;
  justify-content: space-between;
  background-color:white;
  padding:1rem;
}

body.locations .content a.location article.prices span{
  display:block;
}

body.locations .content a.location article.prices .size{
  font-weight:bold;
}

/* ### location ### */

body.locations.location h3{
  display:block;
  margin-bottom:2rem;
}

body.locations.location .illustrations {
  grid-column: 2 / 4;
}

body.locations.location .illustrations figure{
  margin-bottom:3rem;
}


body.locations.location figure img{
  display:block;
  width:100%;
  height:auto;
}

body.locations.location .description .prices div{
  margin-top:2rem;
  margin-bottom:0.5rem;
}

body.locations.location .description .prices div span{
  display:block;
  font-weight:bold;
}

body.locations.location div.locations{
  margin-top:5rem;
  padding-top:5rem;
  border-top:0.2rem solid var(--main-color);
  grid-column: 1 / 4;
  display: grid;
  grid-gap:var(--main-padding);
  grid-template-columns: repeat(3,1fr);
}

/* ### perigord ### */
body.perigord h3{
  margin-top:3rem;
  margin-bottom:3rem;
  font-size:1.6rem;
  font-weight:bold;
  color:var(--main-fusion-black);
}

body.perigord div.point_list{
  grid-column: 1 / 4;
}

body.perigord div.point_list h1{
  margin-bottom:3rem;
  margin-top:3rem;
}

body.perigord div.point_list h1:first-child{
  margin-top:0rem;
}

body.perigord.list div.point_list{
  grid-column: 2 / 4;
}

body.perigord div.pages{
  display: grid;
  grid-gap: var(--main-padding);
  grid-template-columns: repeat(3,1fr);
}

body.perigord.list div.pages{
  grid-template-columns: repeat(2,1fr);
}

body.perigord.list div.description h1{
  margin-bottom:3rem;
}

/* ### workshops ### */
body.workshops .content div.description{
  grid-column: 1 / 2;
  font-size:1.2rem;
}

body.workshops_list .content div.point_list{
  grid-column: 2 / 4;
}

body.workshops_list .content div.pages{
  display: grid;
  grid-gap: var(--main-padding);
  grid-template-columns: repeat(2,1fr);
}

/* ### library ### */
body.library div.images{
  grid-column: 1 / 4;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

body.library figure{
  margin:0.5rem;
}

body.library figure img{
  display:block;
  width:auto;
  height:20rem;
  border-radius: 0.2rem;
}

/* ### contact ### */
body.contact .map{
  grid-column: 2 / 4;
}

body.contact .map iframe{
  width:100%;
}

body.contact .form{
  padding-top:2rem;
}

body.contact .form .field{
  padding-bottom:1rem;
}

body.contact .form .field label{
  display:block;
}

body.contact .form .field input{
  width:100%;
  height:auto;
  display:block;
  width:100%;
  padding:0.7rem;
  border:1px solid rgba(0,0,0,0.2);
  outline:0px !important;
  appearance:none;
  transition: border 0.2s;
  font-size:1rem;
}

body.contact .form .field input:focus{
  border:1px solid rgba(0,0,0,0.8);
}

body.contact .form .field textarea{
  display:block;
  width:100%;
  height:20rem;
  padding:0.7rem;
  border:1px solid rgba(0,0,0,0.2);
  outline:0px !important;
  appearance:none;
  transition: border 0.2s;
  font-size:1rem;
  resize: none;
}

body.contact .form .field textarea:focus{
  border:1px solid rgba(0,0,0,0.8);
}

body.contact .form .field input[type='submit']{
  display:block;
  width:auto;
  padding:0.6rem;
  margin:0;
  border:0px;
  background-color: var(--main-color);
  color: var(--main-fusion-black);
  font-size:1.1rem;
  font-family:'open_sans', sans-serif;
  font-weight:bold;
  cursor: pointer;
  border-radius: 0.2rem;
}

body.contact .form .field input[type='submit']:hover{
  background-color: var(--main-fusion-black);
  color:var(--main-color);
}

body.contact .form .field.captcha{
  border:1px solid black;
  padding:1rem;
  background-color:white;
  margin-bottom:2rem;
  width:20rem;
}

body.contact .form .field.captcha img{
  width:100%;
  height:auto;
}

body.contact .form .field.captcha label{
  font-weight:bold;
}

body.contact .form .field .error{
  background-color:red;
  color:white;
  font-weight:bold;
  padding:1rem;
  margin:0.5rem 0;
}

body.contact .form ul.messages{
  background-color: var(--main-color);
  font-weight:bold;
  padding:1rem;
}

/* ### footer ### */
.footer {
  margin-top:6rem;
  border-top:3rem solid var(--main-color);
  font-size:1.1rem;
  background-color: var(--main-fusion-black);
  color:var(--main-color);
}

.footer .infos{
  max-width:var(--main-width);
  margin:auto;
  padding:2rem var(--main-padding) 6rem var(--main-padding);
  color:var(--main-color);
  display:flex;
  justify-content: space-between;
}

.footer .infos p{
  color:var(--main-color);
  padding-bottom:0.2rem;
}

.footer .infos div.title{
  font-size:1.3rem;
  padding-bottom:0.5rem;
}

.footer .infos div.title span{
  display:block;
}

.footer .infos div.title span.title{
  font-size:2rem;
}

.footer .infos div.title span.location{
  font-size:1rem;
}


.footer .infos .facebook{
  display:block;
  height:3rem;
  background-image: url('../img/facebook.svg');
  background-repeat: no-repeat;
  background-size: 2.5rem;
  font-size:2rem;
  padding-left:3.5rem;
}

/* ### Responsive ### */
@media only screen and (max-width: 1300px) {
  html{
    font-size: 10px;
  }
}

@media only screen and (max-width: 1000px) {


  #admin-link {
    margin-bottom:0.5rem;
  }

  header.main h1 span {
    font-size:1.2rem;
  }

  header.main h1{
    font-size:1.8rem;
  }

  header.main h2 {
    font-size:1rem;
  }

  .content {
    display:block;
  }

  .content section.description{
    margin-bottom:3rem;
    margin-top:3rem;
  }

  body.camping .content .point_list .pages {
    display:block;
  }

  body.point .point_list .pages{
    display:block;
  }

  body.locations .content div.locations{
    display:block;
  }

  body.perigord div.pages{
    display:block;
  }

  body.perigord.list div.point_list{
    display:block;
  }

}