* {
    box-sizing: border-box;
    padding: auto;
    margin: auto;
    font-family: 'Josefin Sans', sans-serif ;
  }
  
  html {
    scroll-behavior: smooth;
    
  }
  @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
  

  .navbar-em {
    z-index: 2;
    font-size: 18px;
    background-color: rgb(56, 62, 66);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;
    position: sticky;
}
.main-nav {
    list-style-type: none;
    display: none;
}
.lien-nav,
.logo {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
}

.main-nav li {
  text-align: center;
  margin: 25px auto;
}
.logo {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 20px;
}
  
.navbar-toggle {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer; 
  color: rgba(255,255,255,0.8);
  font-size: 24px;
}

.active {
  display: block;
}

@media screen and (min-width: 950px) {
  .navbar-em {
      display: flex;
      justify-content: space-between;
      padding-bottom: 0;
      height: auto;
      align-items: center;
      position: sticky;
  }
  .main-nav {
      display: flex;
      margin-right: 50px;
      flex-direction:row;
      justify-content:center;
  }
  .main-nav li {
      animation-name: gd;
      animation-duration: 2s;
  }
  .lien-nav {
      margin-left: 40px;
  }
  .logo {
      margin-top: 0;
      padding: 10px;
  }
 .navbar-toggle {
     display: none;
  }
  .nav-links:hover {
      color: rgba(255, 255, 255, 1);
  }
}

  
  @keyframes gd {
   from {margin-right: 50%;}
   to {margin-right: 0%;}
  }

  .bg-image-1 {
    background-color: rgba(1,173,187,255);
    height: 80vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  @keyframes appear { 
  from {opacity: 0;}
  to {opacity: 1;}
  
  }

  .logo1 {
    width: 30%;
    padding-bottom: 50px;
  }

  @media screen and (max-width: 660px) {
    .logo1 {width: 80%;
      padding-bottom: 100px;}

  }

  @media screen and (max-width: 1100px) and (min-width: 660px) {
    .logo1 {width: 50%;
      padding-bottom: 100px;}
    }

  footer {
    display: flex;
  }
  .layer-1 { width:100%; height:70px; }
.layer-1{
background: -moz-linear-gradient(312deg, rgba(155,227,191,1) 0%, rgba(155,227,191,1) 34%, rgba(88,136,218,1) 100%);
background: -webkit-linear-gradient(312deg, rgba(155,227,191,1) 0%, rgba(155,227,191,1) 34%, rgba(88,136,218,1) 100%);
background: -o-linear-gradient(312deg, rgba(155,227,191,1) 0%, rgba(155,227,191,1) 34%, rgba(88,136,218,1) 100%);
background: -ms-linear-gradient(312deg, rgba(155,227,191,1) 0%, rgba(155,227,191,1) 34%, rgba(88,136,218,1) 100%);
background: linear-gradient(138deg, rgba(155,227,191,1) 0%, rgba(155,227,191,1) 34%, rgba(88,136,218,1) 100%);
}

  .appear {
    animation-name: appear; 
    animation-duration: 3s;
    display: block;
    margin: auto;
  }

  .b1 {
    animation-name: appear;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: both;
  }

  .b2 {
    animation-name: appear;
    animation-duration: 1s;
    animation-delay: 0.7s;
    animation-fill-mode: both;
  }

  .b3 {
    animation-name: appear;
    animation-duration: 1s;
    animation-delay: 1.2s;
    animation-fill-mode: both;
  }

  button {
    width: 200px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0);
    border-color: whitesmoke;
    border-width: 5px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: larger;
    color: white;

  }

/*multibutton*/


  .multi-button {
    display: flex;
    width: 80%;
    box-shadow: var(--shadow) 4px 4px;
  }
  
  .multi-button button {
    flex-grow: 1;
    cursor: pointer;
    position: relative;
    padding:
      calc(var(--space) / 1.125)
      var(--space)
      var(--space);
    border: var(--border-size) solid black;
    color: var(--color-secondary);
    background-color: var(--color-primary);
    font-size: 15px;
    font-family: var(--font-family);
    text-shadow: var(--shadow) 2px 2px;
    transition: flex-grow var(--duration) var(--ease);
  }
  
  .multi-button button + button {
    border-left: var(--border-size) solid black;
    margin-left: calc(var(--border-size) * -1);
  }
  
  .multi-button button:hover,
  .multi-button button:focus {
    flex-grow: 2;
    color: white;
    outline: none;
    text-shadow: none;
    background-color: var(--color-secondary);
  }
  
  .multi-button button:focus {
    outline: var(--border-size) dashed var(--color-primary);
    outline-offset: calc(var(--border-size) * -3);
  }
  
  .multi-button:hover button:focus:not(:hover) {
    flex-grow: 1;
    color: var(--color-secondary);
    background-color: var(--color-primary);
    outline-color: var(--color-tertiary);
  }
  
  .multi-button button:active {
    transform: translateY(var(--border-size));
  }

  :root {
    --border-size: 0.125rem;
    --duration: 250ms;
    --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --color-primary: white;
    --color-secondary: black;
    --color-tertiary: dodgerblue;
    --font-family: 'Josefin Sans', sans-serif;
    --space: 1rem;
  }

  .title {
    font-family: 'Righteous', cursive;
    padding-top: 20px;
    font-size: 6vw;
    color: white;
    text-align: center;
    text-shadow: 1px 1px 0 #000000,
    1px -1px 0 #000000, -1px 1px 0 #000000,
     -1px -1px 0 #000000, 1px 0px 0 #000000,
      0px 1px 0 #000000, -1px 0px 0 #000000,
       0px -1px 0 #000000;
  }

  @media screen and (min-width: 800px) {
    .title {
       font-size: 36px;
    }
  }

.parallax-window {
    min-height: 400px;
    background: transparent;
}

section::after {
  filter: brightness(50%);
}

.rdv {
  border-radius: 4px;
  background-color: rgba(1,173,187,255) !important;
  border: none;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  font-size: 17px;
  padding: 20px;
  width: 200px;
  transition: all 0.4s;
  cursor: pointer;
  margin: 5px;
}
.rdv span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.4s;
}
.rdv span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.rdv:hover span {
  padding-right: 25px;
}
.rdv:hover span:after {
  opacity: 1;
  right: 0;
}

.map {
  border-radius: 4px;
  background: rgba(1,173,187,255);
  border: none;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  padding: 20px;
  width: 200px;
  transition: all 0.4s;
  cursor: pointer;
  margin: 5px;
  
}
.map span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.4s;
}
.map span:after {
  font-family: "Material Icons";
  content: '\e55b';
  position: absolute;
  opacity: 0;
  top: -2px;
  left: 157px;
  right: -20px;
  transition: 0.5s;
}
.map:hover span {
  padding-right: 25px;
}
.map:hover span:after {
  opacity: 1;
  right: 0;
}


mark{
  background-color:#ffffff;
  border-style:double;
  border-width: 3px;
  padding-left: 5px;
  padding-right: 5px;
 }

 .bg-acheter {
  background: rgb(1,176,187);
background: radial-gradient(circle, rgba(1,176,187,1) 31%, rgba(56,62,66,1) 100%);
  min-height: 50vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

@keyframes grayscale {
  from {filter: grayscale(1);}
  to {filter: grayscale(0);}
}

.bg-acheter:hover{
  animation-name: grayscale;
  animation-duration: 1s;
  animation-fill-mode:both;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(56, 62, 66); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 30px; /* Increase font size */
  box-shadow: rgb(56, 62, 66);
}

#myBtn:hover {
  background-color: rgba(1,173,187,255); /* Add a dark-grey background on hover */
}

.midtoup {
  display: inherit;
  font-size: 8vw;
  color: white;
  animation-name: midtoup;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1.5s;
  animation-fill-mode: both;
}

@keyframes midtoup {
  from {padding-top: 10%; padding-left: 33%;}
  to {padding: 3%; font-size: 4vw;}
}

.bg-vendre {
  background: rgb(1,176,187);
background: radial-gradient(circle, rgba(1,176,187,1) 31%, rgba(56,62,66,1) 100%);
  min-height: 60vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
animation-name: grayscale;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: both;
}

.vendre {
  justify-content: center;
  text-align: center;
  padding-left: 20%; padding-right: 20%;
}

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

  .vendre {
    padding-left: 10%; padding-right: 10%;
  }
  
}

.secondtxt {
  font-family: 'Josefin Sans', sans-serif;
  animation-name: textappear;
  animation-duration: 1s;
  animation-delay: 2.5s;
  animation-fill-mode: both;
  color: white;
  font-size: 5vw;
  padding-left: 15%; padding-right: 15%;
  justify-content: center;
  text-shadow: 1px 1px 0 #000000,
  1px -1px 0 #000000, -1px 1px 0 #000000,
   -1px -1px 0 #000000, 1px 0px 0 #000000,
    0px 1px 0 #000000, -1px 0px 0 #000000,
     0px -1px 0 #000000;
}

@keyframes textappear {
  from {color: transparent; text-shadow: none;}
  to {color: white;}
}

.produit {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 3px;
  justify-content: center;
}

.liste {

  background-color:white; margin-left: 23%; margin-right: 23% ; text-align:center; padding-top: 4%; padding-bottom: 4%;
}

.liste img {
  width: 90%;
}

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

  .liste {
    margin: 0%;
    padding-top: 8%;
    padding-bottom: 8%;
  }

  .liste img{
    width: 100%;
    height: 100%;
  }
  
}

/* Carousel  */

.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 66%;
  height: 70vh;
  margin-right: 10px;
  counter-increment: gallery-cell;
  padding-bottom: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.contour {
  text-shadow: 1px 1px 0 #000000,
   1px -1px 0 #000000, -1px 1px 0 #000000,
    -1px -1px 0 #000000, 1px 0px 0 #000000,
     0px 1px 0 #000000, -1px 0px 0 #000000,
      0px -1px 0 #000000;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 50vh;
  flex-wrap: no-wrap;
  padding-left: 10%;
  padding-right: 10%;
}

.container div {
  width: 50%;
  height: 600px;
}


@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .container div {
    width: 100%;
  }
  .hide {
    display: none;
  }
}

.emploi {
  justify-content: center;
  text-align: center;
  padding-left: 20%; padding-right: 20%; padding-top: 5%;
}