* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: "Ruda", sans-serif;
  scroll-behavior: smooth;
  /* list-style: none; */
  text-decoration: none;
  box-sizing: border-box;
  width:100fr;
}


header {
  background-size: cover;
  color: white;
  height: auto;
  
  /* border-bottom: solid 7px #d2b82e; */
  box-shadow: 0 5px 10px rgb(55, 55, 55);
  list-style: none; 
  text-decoration: none;
  max-width: 100vw;
}

#info_line,
#secondinfo_line {
  display: flex;
  justify-content: space-between;
  color:white;
  background-color: #18206d;
  height:3rem;
  font-style: italic;
  max-width: 100vw;
  z-index: 100;

}
#phone{
  font-size: 20px;
}

#info_line li,
#secondinfo_line li {
  display: flex;
  align-items: center;
  justify-content:center;
  padding: 1rem;

  
}


#button-resa,
#button-resaEn,
#secondbutton-resa{
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.3rem;
  color:white;
}
#button-resa a,
#secondbutton-resa a{
  color: white;
}

#button-resa a:active,
#secondbutton-resa a:active{
  color: white;
}

#button-resa a:hover,
#secondbutton-resa a:hover,
#button-resaEn a:hover {
  cursor: pointer;
  color: #d2b82e;
  transition: 0.6s;
}

#button-resaEn{
  display: none;
}

.info-icon{
  height:3.5rem;
  padding:0.5rem;
}

#firstnav{
  color: #18206d;
  display: flex;
  width: 100%;
  height:fit-content;
  justify-content:center;
  align-items: center;
  background-color: white  ;       
  height:10rem;
  z-index: 10;
  font-weight: 600;
  border-bottom: 7px #18206d solid;
  border-top: 7px #18206d solid;
  max-width: 100vw;
}

#firstnavEn{
  color: #18206d;
  display: none;
  width: 100%;
  height:fit-content;
  justify-content:center;
  align-items: center;
  background-color: white  ;       
  height:10rem;
  z-index: 10;
  font-weight: 600;
  border-bottom: 7px #18206d solid;
  border-top: 7px #18206d solid;
  max-width: 100vw;
}

#firstnavEn ul {
  display: flex;
  justify-content: space-between;
  width:100%;
  align-items: center;
  text-align: center;
}



.secondnav{
  display: flex;
  flex-direction: column;
  width: 100%;
  height:fit-content;
  justify-content:center;
  align-items: center;
  font-weight: 600;
  background-color: white;
  height:7rem;
  top:0;
  color:#18206d;
  visibility: hidden;
  transition: all 1s ease-in-out;
  position: fixed;
  top: 0;
  box-shadow: 0 7px 30px rgb(55, 55, 55); 
  z-index: 100;
}

#secondbutton-resa a {
  font-size: 15px;
}
.secondnavEn{
  display: none;
  width: 100%;
  height:fit-content;
  justify-content:center;
  align-items: center;
  font-weight: 600;
  background-color: white;
  height:4rem;
  color:#18206d;
  visibility: hidden;
  transition: all 1s ease-in-out;
  position: fixed;
  top: 0;
  box-shadow: 0 7px 30px rgb(55, 55, 55); 
  z-index: 100;
}

#firstnav ul,
.secondnav ul {
  display: flex;
  justify-content: space-between;
  width:100%;
  align-items: center;
  text-align: center;
  
}

nav li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin:0 1rem;
}

nav a {
  color:#18206d;
  font-family: "playfair display";
  font-size:20px;
}

#firstnav a:hover,
.secondnav a:hover {
 color:#b89e14;
 cursor: pointer;
 transition: 0.6s;
}

/**********************MENU BURGER*/
.navigation {
  display: flex;
  visibility: hidden;
  position: fixed;
  z-index: 100;
}

#burgermenu{
  display:flex;
  justify-content: left;
  align-items: center;
}


/* .nav-wrapper {
  position: absolute;
  z-index: 1;
} */
.nav-wrapper ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  list-style: none;
  width: 0;
  overflow: hidden;
  margin:10rem 2rem;
  opacity:90%;
}

/* .nav-wrapper ul li {
  margin: 10px;
  font-size: 12px;
} */
.nav-wrapper.active ul {
  display: block;
  width: 40rem;
  left:10%;
  max-width: 80vw;
  border-radius: 10px;
  position: absolute;
  top: 100%;
  background-color: #3f4bb9;
}

.nav-wrapper ul li a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: 0.3s;
}
.nav-wrapper ul li a:hover {
  color: #9d8a28;
}

.nav-toogler {
  position: absolute;
  justify-content: center;
  align-items: center;
  padding:0.7rem;
  left:2rem;
  top:7rem;
  background-color: #18206d;
  color: white;
  font-size: 15px;
  border: 2px #9d8a28 solid;
  border-radius: 50%;
  position: fixed;
  opacity: 80%;
}



.navigation ul{
  box-shadow: 0 5px 10px rgb(55, 55, 55);
}

/***********Fin menu burger****************/

#logo{
  width:6.5rem;
}
#logomini{
  width:8rem;
}

#catchphraseIndex {
  text-transform: uppercase;
  background-image: url(./img/hheader.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  height:32rem;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: end;
}

#catchphraseAppart {
  text-transform: uppercase;
  background-image: url(./img/photograph/first/14.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  height:32rem;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: end;
}
#catchphraseContact{
  text-transform: uppercase;
  background-image: url(./img/photograph/first/15.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  height:32rem;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: end;
}

#catchphraseTarifs{
  text-transform: uppercase;
  background-image: url(./img/photograph/first/4.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  height:32rem;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: end;
}
/* #catchtext{
  padding:0.7rem;
  color: white;
  background-color: #d2b72e66;
  height:fit-content;
  border-radius: 10px;
  margin:1rem;
} */


main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top:5rem;
 
}

main a {
  text-decoration: none;
  color:white;
}

#pres{
 color:#d2b82e;
}

#maintitle{
  font-size: 45px;
  color:#18206d;
  font-family: "playfair display";

}

#attract,
#attractEn {
  padding:2rem;
  color:#18206d;
  font-size: 25px;
  width: 30rem;
  text-align: center;
  font-family: "playfair display";
  max-width: 90vw;
}

#attractEn {
  display: none;
}


#buttonbookEn{
  display:none;
}


button{
  padding:0.8rem;
  background-color: #d2b82e;
  color:white;
  border: none;
  border-radius: 5px;
}

.rdcbutton{
  font-size: 20px;
}

.buttondiv{
  margin:2rem;
}


button:hover{
  background-color: #18206d;
  transition: 0.6s;
  cursor: pointer;
}

#presentation {
  columns: 2 auto;
  margin: 1rem;
  max-width: 90vw;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: end;

}

#presentationtext,
#presentationtextEn{
  color:#18206d;
  width:30rem;
  max-width: 90vw;
  line-height: 2.8rem;
}

#presentationtextEn{
  display:none;
}

#presentationimg img{
  width:40rem;
  max-width: 90vw;
  padding-left: 3rem;
}


#pointsforts{
  background-color: #18206d;
  color:white;
  width: 100%;
  font-size: 18px;
  padding:2rem;
  margin-bottom: 10rem;
}

#pointsforts ul{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#pointsforts li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:15rem;
  text-align: center;
}

#pointsforts img{
  width:10rem;
  margin-bottom:1rem
}


#moredetailed {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("./img/photograph/second/10.JPG");
  height:30rem;
  width: 100%;
  max-width:100vw;
  background-position: 10%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-bottom: 5rem;
  
}

.bigButton,
.bigButtonEn {
  width:30rem;
  height:10rem;
  background-color: transparent;
  border: 3px #fff solid;
  font-size: 30px;
  font-weight: 600; 
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
}


.bigButton a,
.bigButtonEn a {
  color:#fff;
}

.bigButton:hover,
.bigButtonEn:hover{
  background-color: rgba(66, 86, 177, 0.318);
  transition: 0.8s ease-in-out;
}

.bigButtonEn{
  display: none;
}

.langIcon {
  width:5rem;
}

.langIcon:hover{
  cursor: pointer;
  width:5.3rem;
}

/* appart ************/

.apparttitle,
.apparttitleEn{
  font-size:40px;
  text-transform: uppercase;
  padding:1rem;
  color:#18206d;
  border: 1px solid #d2b82e;
  border-radius: 5px;
  font-family: "playfair display";
  text-align: center;
  max-width: 90vw;
}

.apparttitleEn{
  display: none;
}


#privateParkEn{
  display: none;
}

/****60mcarrés*/

.apparttitle2,
.apparttitle2En{
  font-size:30px;
  text-transform: uppercase;
  padding:1rem;
  color:#18206d;
  border: 1px solid #d2b82e;
  border-radius: 5px;
  margin-top:5rem;
  margin-bottom: 2rem;
  text-align: center;
  max-width: 90vw;
  
}

.appartpres,
.appartpresEn{
  padding:2rem;
  color:#18206d;
  font-size: 21px;
  width:50rem;
  max-width: 80vw;
  text-align: center;
  line-height: 2.2rem;
  font-family: "playfair display";
}

.appartpresEn{
  display: none;
}

#cle a{
  margin: 3rem;
  color:white;
}
#cle{
  margin: 3rem;
}

#tarifsinfos,
#appartinfos{
  color:#fff;
  font-size: 18px;
  background-color: #3f4bb9;
  opacity:90%;
  padding:2rem;
  border-radius: 5px;
  text-align: center;
  max-width: 90vw;
}
#appartinfos{
  margin-top:3rem;
  line-height: 2.5rem;
}
#tarificon{
  width:5rem;
}
#tarifbutton{
  margin:3rem 0;
  font-size: 25px;
  max-width: 90vw;
}

#tipsicon{
  width:2rem;
}

.apparttitle2En {
  display: none;
}

.bedtitle{
  font-size:21px;
  font-weight: 600;
  color: #18206d;
}

.iconequip{
  width:4rem;
  margin:0.7rem;
  
}


#vuemerImg{
  background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), url(./img/photograph/second/11.JPG);
  height:30rem;
  width:100%;
  max-width: 100vw;
  background-position: 30%;
  background-attachment: fixed;
}

#vuemerbisImg{ 
  margin-top: 3rem;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(./img/photograph/communs/3.JPG);
  height:30rem;
  width:100%;
  max-width: 100vw;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: 10%;
  background-size: cover;
  background-repeat: no-repeat;
}

.case{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:0.7rem 0;
}


.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 18rem);
  grid-gap: 5px;
  grid-auto-rows: minmax(100px, auto);
  color:#574722;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
  text-align: center;
  max-width: 90vw;
}

#couch{
  display:flex;
  justify-content: center;
  align-items: center;
  max-width: 90vw;
  color: #18206d;
  font-size: 19px;
}

.couchimg{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:7rem;
  text-align: center;
  margin:1rem 4rem 3rem 4rem;
}
.divmezza{
  border:1px #d22e2e solid;
  padding:2rem 1rem;
  width:20rem;
  text-align: center;
}
.couchimgSup {
  display:flex;
  align-items: center;
  justify-content: center;

}
.divmezza img{
  width:2.2rem;
}

/* .apparttitle,
.appartpres,
.differentsAcces {
  animation-duration: 5s;
  animation-name: slidein;
} */

/* .differentsAcces {
  opacity: 0;
  position: relative;
  transition-duration: 2s;
} */

/* @keyframes slidein {
  from {
    margin-left: 30%;
  }

  to {
    margin-left: 0%;
  }
} */

#privatePark {
  margin: 2rem 0;
  color: #18206d;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 90vw;
}

#privateImg {
  width:40rem;
  max-width: 90vw;
}

#privatePark p {
  width:18rem;
  font-size: 20px;
  line-height: 2rem;
  padding:2rem;
}

dl{
  list-style-type:disc;
  width: 50rem;
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  padding:2rem;
}

#dlEn{
  display: none;
}

dt{
  font-size: 30px;
  font-weight: 600;
  color:#18206d;
}

dd{
  color:#9d8a28;
  padding:1rem;
  font-size: 19px;
  line-height: 2rem;
}

.differentsAcces{
  display: flex;
  flex-direction: column;
  margin:4rem;
  align-items: start;
  width:30rem;
  max-width: 95vw;
}

.buttonCar,
.buttonTrain,
.buttonBus{
  font-size: 22px;
  text-transform: uppercase;
  display: flex;
  width:30rem;
  max-width: 90vw;
  align-items: center;
  justify-content: space-between;
  font-family: "playfair display"; 
  box-sizing: border-box;
  border: 2px solid transparent;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  padding:1rem;
}


.buttonCar:hover,
.buttonTrain:hover,
.buttonBus:hover {
  /*transition: 1.5s ease-in-out;*/
    border: 2px solid #5747224a;
  
  /* background-color: blueviolet;  */

  cursor: pointer;
}



.firsticon {
  width:3rem;
  margin-right:1rem; 
}

.contenerTrain,
.contenerCar,
.contenerBus{
  display: none;
}

.hiddenText{
  color:#574722;
  width:30rem;
  max-width: 95vw;
  padding:1rem ;
}
.contenuhidden{
  font-size: 17px;
}
.contenuhidden a{
  color:#9d8a28;
  font-weight: 600;
}

.contenuhidden a:hover{
  color:#18206d;
  
  margin-left: 2rem;
  transition: 0.4s all ease-in-out;   
}
.contenuhidden p {
  font-size:20px;
  text-align: center;
  margin-bottom:1rem;
}
.contenuhidden ul{
  list-style:circle;
}
.contenuhidden li {
  padding:0.6rem;
}


.plus1,
.plus2,
.plus3,
.moins1,
.moins2,
.moins3 {
  width:2rem;
}

.plus1:hover,
.plus2:hover,
.plus3:hover {
  transform: rotate(140deg);
  transition: all ease-in-out;   
}

/* .moins1,
.moins2,
.moins3 {
  display:none;
} */

.carText{
  list-style-type: "↬ "; 
}

.accespic{
  width:35rem;
  height:100%;
}

#overlayduo{
  display: flex;
  
}


/* Conteneur principal */
.overlay-image {
  position: relative;
  width: 35rem;
  margin:2rem;
 }
 
 /* Image originale */
 .overlay-image .image {
  display: block;
  width: 100%;
  height: auto;
  
 }
 
 /* Texte original */
 .overlay-image .text {
  color: #fff;
  font-size: 25px;
  font-family: "playfair display";
  line-height: 1.5em;
  /* text-shadow: 2px 2px 2px #000; */
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
 }


 /* Overlay */
.overlay-image .hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease-in-out;
 }
 
 /* Apparition overlay sur passage souris */
 .overlay-image:hover .hover {
  opacity: 1;
 }

 /********* Hover background et texte uniquement *******/

.overlay-image .normal {
  transition: .5s ease;
 }
 .overlay-image:hover .normal {
  opacity: 0;
 }
 .overlay-image .hover {
  background-color: rgba(0,0,0,0.5);
 }
/* 
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  counter-increment: gallery-cell;
}

/* cell number */
/* .gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
} */ 


#formDiv{

  margin-top: 3rem;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(./img/photograph/communs/1.JPG);
  height:40rem;
  max-width: 100vw;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  background-position: 10%;
  background-size: cover;
  background-repeat: no-repeat;

}
  
  
form {
  width:30rem;
  max-width: 80vw;
  display: flex;
  flex-direction: column;
  align-items:center ;
  justify-content: center;
  color:#fff;
  text-transform: uppercase;
  border:#fff solid 3px;
  padding:2rem;
  background-color: #ffffff77;
}

form label {
  color:#151414;
  padding-top:1.2rem;
  letter-spacing: 0.2rem;
  font-weight: 600;
  font-size: 19px;
}

form input,
form textarea {
  padding:0.6rem;
  text-align: center;
  background-color: #ffffff56;
  border:#d2b82e 1px solid;
  color:#403131;
  margin-bottom: 0.5rem;
}


footer {
  height: auto;
  margin-top: 5rem;
  border-top: 3px #29407a solid;
  border-top: 7px solid #18206d;
  max-width: 100vw;
}


#footer_content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #29407a;
  text-align:start;
  font-size: 15px;
}

#divlogof {
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  margin-top:1rem;
}
#divlogof img{
  width:80%;
}

iframe {
  margin: 1rem;
  max-width: 90vw;
}

#infos_contact {
  font-size: 120%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 2rem;
}

#infos_contact li{
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  font-style: italic;
  
}

#infos_contact img{
  width : 2rem;
  margin-right:  1rem;
}

#titlecontact{
  color:#d2b82e;
  font-size: 25px;
  font-weight: 600;

}

#phone_number {
  margin-top: 2rem;
}

#copyright {
  display: flex;
  justify-content: space-between;
  font-size: 80%;
  background-color: #18206d;
  color: white;
  padding: 0.5rem;
}




@media (max-width: 480px) and (orientation: portrait) {

#firstnav ul{
  display: flex;
  flex-direction: column;
}

#pointsforts ul{
  display: flex;
  flex-direction: column;
  max-width: 90vw;
}

#presentation{
  display: flex;
  flex-direction: column;
}
  
#presentationtext{
  text-align: center;
}


#footer_content{
  display: flex;
  flex-direction: column;
}


}

@media (max-width: 850px) and (orientation: portrait) {
  
  
  #firstnav {
    display: none;
  }
  .secondnav {
    display: none;
  }

  .navigation {
    visibility: visible; 
  }

   #info_line{
    display:flex;
    height:fit-content;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    width:100vw;
    box-shadow: 0 5px 10px rgb(55, 55, 55);
   
  } 

  #phone{
    margin-bottom: 1rem;

  }

  #language {
    position: absolute;
    top:0;
    right:0;
  }

  #info_line li{
    padding:none;
    margin:0.2rem;
    height:2.2rem;
  }

  #info_line img{
    padding:none;
  }
  
  #pointsforts ul{
    display: flex;
    flex-direction: column;
    max-width: 90vw;
  }
  
  #presentation{
    display: flex;
    flex-direction: column;
  }
    
  #presentationtext{
    text-align: center;
  }
  #presentationimg img{
    padding:0;
  }
  
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 45vw);
  grid-gap: 5px;
  align-self: center;
  grid-auto-rows: minmax(100px, auto);
  color:#574722;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
  text-align: center;
  max-width: 90vw;
}

#moredetailed {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("./img/photograph/second/10.JPG");
  height:20rem;
  width: 100%;
  max-width:100vw;
  background-position: 50%;
  background-size:cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin:0;
}

#catchphraseAppart {

  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  height:25rem;
}

#vuemerImg{
  height:13rem;
  width:100%;
  max-width: 100vw;
  background-position-x: 40%;
  background-size:cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
} 
#vuemerbisImg{ 
   height:15rem;
  background-attachment: fixed;
  background-position: 10%;
  background-size: cover;
  background-repeat: no-repeat;
} 
.bedtitle{
  text-align: center;
  max-width:95vw;
}

#privatePark{
  display:flex;
  flex-direction: column;
  margin:0;
}

#privatePark p{
  width:90vw;
}

#catchphraseTarifs{
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 10%;
  height:25rem;
}

#catchphraseContact{
  background-size: cover;
  background-position:center;
  background-position: 50%;
  height:25rem;
}

#footer_content{
  display: flex;
  flex-direction: column;
}
 
}

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

  #presentation{
    display: flex;
    flex-direction: column;
  }

    
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 45vw);
  grid-gap: 5px;
  align-self: center;
  grid-auto-rows: minmax(100px, auto);
  color:#574722;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
  text-align: center;
  max-width: 90vw;
}

#privatePark{
  display:flex;
  flex-direction: column;
  margin:0;
}
}