@font-face{
font-family:"DIN";
src: url('../css/font/DINLight.ttf');
font-display: swap;
}
@font-face {
font-family: "DIN";
font-weight: bold;
src: url('../css/font/DINMediumAlternate.ttf');
font-display: swap;
}
@font-face {
font-family: "UbuntuTitling";
src: url('../css/font/UbuntuTitling-Bold.ttf');
font-display: swap;
}
@font-face {
font-family: "Roboto";
src: url('../css/font/Roboto-Light.ttf');
font-display: swap;
}


body {

text-align: justify;color: black;
width:100%;
overflow-x: hidden;
}
ul li {
list-style: none;
}
h1, h2{
margin-bottom:2vh; font-size:2rem;font-weight:bold;
}
@media (max-width:800px){
h1, h2{
margin-bottom:2vh;font-size:1.5rem;
}
}
ul{
text-decoration: none;
list-style-type: none;
color: black;
padding: 0;
}
ul:hover{
text-decoration: none;
list-style-type: none;
color: black;
}
li{
text-decoration: none;
list-style-type: none;
color: #070707;
}
a:hover{
  text-decoration: none;
  list-style-type: none;
  color: black;
  }
li:hover{
text-decoration:#121417;
list-style-type: none;
color: black;
}
a{
text-decoration: none;
list-style-type: none;
color: #333333;
font-family: 'Sarabun', sans-serif;
}
.owl-carousel .owl-item img {
width:75%;
min-height: 210px;
}
#svg8{width:100%}
@media(max-width:800px){
#svg8{margin-top:-210px}
}
.animation {
  animation-timeline: view(50px 0px);

  animation-name: grow;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}
.animation2 {
  animation-timeline: view(800px 0px);
  animation-name: grow2;
  animation-fill-mode: both;
  animation-duration: 0.7ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}
.animation3 {
  animation-timeline: view(800px 0px);
  animation-name: grow3;
  animation-fill-mode: both;
  animation-duration: 0.7ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}
.animation4 {
  animation-timeline: view(600px 0px);
  animation-name: grow;
  animation-fill-mode: both;
  animation-duration: 0.7ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}
@keyframes grow {
  from {
    opacity:0;
  }
  to {
      opacity:1;
  }
}
@keyframes grow2 {
  from {
    transform:translateX(30%);
    opacity:0
  }
  to {
    transform:translateX(0%);
    opacity:1
  }
}
@keyframes grow3 {
  from {
    transform:scale(0%);
    opacity:0
  }
  to {
    transform:scale(100%);
    opacity:1
  }
}
/*MENU*/
/* Menu Container */
.nav {
display: flex;
justify-content: center;
position: sticky;
top: 0;
cursor: default;
z-index: 1200;
padding: 0;
background-color:rgb(255, 255, 255);

height:80px
   }
.nav .icon {
display: none;
}
/* Menu List */
.menubtn {
display: block;
color:#e6e1e1;
background-color:rgba(0,0,0,0);
text-align: center;
}
.rezopro{right: 2px;}
div #bouton-menu-carte {
margin: 0 auto;
}
/* Menu Links */
.nav > li > a {
position: relative;
display: block;
height: 90px;
padding: 0 20px;
line-height: 80px;
text-shadow: 0 0 0px rgb(0 0 0 / 0%);
font-size: 1rem;
color: black;
cursor:pointer;
transition: all .3s ease;
}
a:not([href]):not([tabindex]) {
  color: black;
  text-decoration: none;
  font-weight: bold;
}
@media (min-width:1000px){
  .nav > li > a {
  position: relative;
  display: block;
  height: 80px;
  padding: 0 20px;
  line-height: 80px;
  font-size: 1.1rem;
  color: black;

  transition: all .3s ease;
  }
.nav-column2 > ul {font-size:1.1rem}
  .nav > li:first-child > a {border-left: none;}
  }
@media (min-width:1100px){
.nav > li > a {
position: relative;
display: block;
height: 80px;
padding: 0 20px;
line-height: 80px;
font-size: 1.2rem;
color: black;

transition: all .3s ease;
}
.nav-column2 > ul {font-size:1.2rem}
.nav > li:first-child > a {border-left: none;}
}
@media (min-width:1330px){
  .nav > li > a {
  position: relative;
  display: block;
  height: 80px;
  padding: 0 20px;
  line-height: 80px;
  font-size: 1.4rem;
  color: black;

  transition: all .3s ease;
  }
.nav-column2 > ul {font-size:1.3rem}
  .nav > li:first-child > a {border-left: none;}
  }
@media (min-width:1546px){
  .nav > li > a {
  position: relative;
  display: block;
  height: 80px;
  padding: 0 20px;
  font-weight:500;
  line-height: 80px;
  font-size: 1.5rem;
  color: black;

  transition: all .3s ease;
  }
.nav-column2 > ul {font-size:1.3rem}
  .nav > li:first-child > a {border-left: none;}
  }
.nav > li:hover > a {
background: rgba(0,0,0, 0);
color: var(--couleur_btn) !important;
font-weight: bold !important;
text-decoration: solid !important;
}
/* Menu Dropdown */
.image_menu{
  width:100%;
  height:100%;
  object-fit: cover;
}
.nav > li > div {
  height: 18rem;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(-0px);
  visibility: hidden;
  color: white;
  background: rgba(0, 0, 0, 0.93);
  transition: all .6s ease;

}

.nav > li:hover > div {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-column{width: 35%;text-align: left;}
.nav-column2{
text-align:left;
}
.nav-column > ul {
padding-top: 5%;
padding-left: 5%;
text-align:left;
font-family: 'Sarabun', sans-serif;
text-transform:initial;
font-size: 1rem;}
.nav-column > ul > li > a{color: white;}
.nav-column2 > ul {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  height: 15rem;
}
.nav-column2 > ul > li{
margin-bottom:10px;
color:white;
}
.nav-column2 > ul > li > a{margin-left:5px;color:white}
.navbtn{
display: flex;
flex-wrap: wrap;
width: 20%;
text-align: center;
}
.navbtn > a {
padding: 3%;
margin: 2%;
width: 100%;
background-color: #0bb652;
font-size: 1rem;
}
.navbtn > a:hover{background-color: var(--couleur_btn);}
.nav-column > ul > li > a:hover{color:var(--couleur_btn);}
.nav-column2 > ul > li > a:hover{color:var(--couleur_btn);}
@media (max-width:999px){
.nav > li > a{font-size: 1rem;}
.nav-column > ul{font-size:0.75rem;}
.nav-column > h3{font-size: 1rem;}
.navbtn > a{font-size: 0.5rem;}
.btnmap > h3{font-size: 1rem;}
.btnmap > img {width: 3rem;}
.nav-column2 > ul{font-size:0.75rem;}
.nav-column2 > h3{font-size: 1rem;}
.navbtn > a{font-size: 0.75rem;}
.btnmap1 > img {width: 3rem;}
}
@media (min-width:1007px){
#menu-responsive {display: none}
}
@media (min-width: 1007px){
#myTopnav {
    display: flex;
}
}
@media (max-width:1006px){
#menu-responsive {display: flex}
#myTopnav {
    display: none;
}
}


@media (max-width:1200px){
.nav-column2 > ul {font-size: 0.9rem};
}
#menu-responsive {
background-color: #121417 !important;
text-transform: uppercase;
text-align: center;
}
.dropdown-menu{
  text-transform: none;
  }
.fa-home {color: black;}
#menu-responsive .navbar-toggler {border: none;}
#menu-responsive .navbar-toggler:active{border: none;}
#menu-responsive .dropdown-menu{
border: none;
background-color: rgba(0,0,0,0);
text-align: center
}
#menu-responsive .dropdown-item {font-size: medium;}
#menu-responsive .nav-link{
color:white;
margin: 0.2rem 0;

}
#menu-responsive .dropdown-item:active{background-color: rgba(0,0,0,0.6)}
/*HEADER*/
.header-page {
background: no-repeat ;
background-size: contain;
height: 44vh;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
#logo-header {
height: 100%;
width: auto;
}
@media (max-width:750px){
.header-page {height: 30vh;}
#logo-header {display: block;margin: 0 auto;}
}
/*FOOTER*/
footer {
background-color: rgba(255,255,255,1);
color: #333;
padding: 0.5rem 1rem;
text-align: center;
width: 100%;
}
footer a {color: white}
footer a:hover {
text-decoration: none;
background-color: none;
color: #0bb652;
}
.contact {
width: 80%;
background-color: rgba(255,255,255,1);
margin: 0 auto ;
overflow: hidden;
font-size: 1.1rem;
}
.link-footer {margin: 0 0 5rem;}
.footer-contact{width: 100%;}
.img-content img {
width: 25%;
margin: 0 auto;
min-width: 50px;
}
.img-content {
width: 80%;
background-color: rgba(255,255,255,1);
margin: 0 auto 2rem;
overflow: hidden;
}
@media (min-width: 750px) {
.contact {width:70%;}
.img-content {width:100%;}
}
@media (max-width:750px){
footer img {width: 10%;margin: 0 2%}
.link-footer {margin: 0 0 1rem;}
footer li {font-size: 0.6em;}
}
.legendecartethematique{
display:none;
padding:6px;
position:absolute;
z-index:999;
width:300px;
height:190px;
top:30px;
left:1150px;
background-color:white
}
@media (max-width:750px){
.legendecartethematique{
display:none;
padding:6px;
position:absolute;
z-index:999;
width:70%;
height:200px;
top:600px;
left:100px;
background-color:white
}
}
footer .row .contact ul{padding:inherit;}
.contact span {font-size: 1.2rem;}

.titre-home{
text-align: center;
padding-top: 15px;
padding-bottom:10px;
}
.titre-h1{display: none;}
@media (min-width:730px) and (max-width:956px){
.taille-h2{font-size: 1.7rem;}
}
@media (max-width:729px){
.taille-h2{font-size: 1.5rem;text-align: center;}
}
@media (min-width:957px){
.taille-h2{font-size: 2rem;}
}
.home-h4{
text-align: center;
vertical-align: middle!important;
}

#logo-home2 {
max-width: 100%;
width: 60vh;
margin: 2%;
background-color: rgba(255,255,255,0.8);
}
@media screen and (max-width: 600px){
#logo-home {
display: block;
width: 24vh;
margin:auto;
padding:2.5%;
background-color: rgba(255,255,255,0.9);
}
}

.logo_fit {
height:100%;
width:100%;
object-fit: contain;
padding:5px;
}

/*  Home Page actus */
h4.card-title.home-h4 {color: White;}
#actus-home{
padding-left: 25px;
padding-right: 25px;
overflow:hidden;
background-color:white;
margin-top:0;
position:relative
}
.owl-theme .owl.dots .owl-dot span{
height: 47px;
position: absolute;
width: 26px;
cursor: pointer;
top: 100px !important;
  }
.card{
flex-direction: column;
align-items: start;
justify-content: center;
border: none;
}
@media (min-width:300px){
.bg-dark{width: 350px;}
.hauteurimg{height:180px;max-height:180px}
}
@media (min-width:1400px){
.bg-dark{width: 390px;}
.hauteurimg{height:195px;max-height:195px}
}
@media (min-width:1600px){
.bg-dark{width: 450px;}
.hauteurimg{height:205px;max-height:205px}
}
.card-img-overlay{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
color: white;
}
.card-img-overlaybis{
justify-content: center;
align-content: center;
color: white;
font-size:1rem;
}
.pad15{justify-content: center;}
/* Style Home Page Actus carousel */
.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative;}
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left;}
.MultiCarousel .MultiCarousel-inner .item { float:left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin-right:10px; margin-left:10px;color:#666;}
.MultiCarousel .rightLst { position:absolute; left:94%;border-radius:50%; top:calc(65% - 67.5px);}
.MultiCarousel .leftLst{ position:absolute; left:6%;border-radius:50%; top:calc(65% - 67.5px);}
.leftLst >img{width:45%}
.rightLst >img{width:45%}
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; display: none;}
@media (max-width: 450px){
.rightLst > img{width:30%}
.leftLst > img{width:30%}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%; top:calc(50% - 15.5px);}
.MultiCarousel .leftLst { left:-50px;}
.MultiCarousel .rightLst { right:-50px;}
#actus-home {
    padding-left: 15px;
    padding-right: 15px;
}

}
@media (max-width: 650px) and (min-width:451px){
.rightLst > img{width:33%}
.leftLst > img{width:33%}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%; top:calc(50% - 25.5px);}
.MultiCarousel .leftLst { left:-50px;}
.MultiCarousel .rightLst { right:-50px;}
#actus-home {
    padding-left: 15px;
    padding-right: 15px;
}
}
@media (max-width: 1050px) and (min-width:651px){
.rightLst img{width:35%}
.leftLst img{width:35%}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%; top:calc(50% - 35.5px);}
.MultiCarousel .leftLst { left:-50px;}
.MultiCarousel .rightLst { right:-50px;}
}
.MultiCarousel .btn-primary {
background-color: inherit;
border-color: inherit;
border: none;
}
#formation-home .row{margin: inherit;}

#coin-entreprise-home{
padding:1vh 8vh;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin:40px 0 40px
}
@media (max-width: 800px){
#coin-entreprise-home{
padding:1vh 2vh;
background-color: #fff;
display: flex;
flex-direction: column-reverse;
justify-content: space-evenly;
margin:40px 0 40px
}
}
.flex-coin{flex: initial;width: 100%;}
.btn-secondary{
margin-bottom: 25px;
margin-top: 25px;
background-color: rgba(11, 182, 82, .9);
color: white;
border-color: rgba(11, 182, 82, .9);
width: 325px;
text-align: center;
border-radius: 0;
}
.btn-secondary:hover{
background-color: rgba(20,20,20, .8);
border-color: black;
}
.btn-secondary2{
margin-bottom: 25px;
margin-top: 25px;
background-color: #0bb652;
color: black;
border-color: #0bb652;
font-weight: bold;
text-align: center;
border-radius: 0;
}
@media (max-width:800px){
#carte-home2 .btn{white-space:normal;}
.flex-home1 .btn{white-space:normal;}
#carte-home2 .flex-home1{padding:0}
}
.btn-secondary2:hover{
background-color: var(--couleur_btn_hover);
border-color: var(--couleur_btn_hover);
color:var(--couleur_text_btn_hover);
}
.btn-secondary3{
margin-bottom: 25px;
margin-top: 25px;
background-color: var(--couleur_btn);
color: white;
border-color: var(--couleur_btn);
font-weight: bold;
text-align: center;
border-radius: 5px;
font-size:1.2rem;
margin-right:10px
}
.btn-secondary3:hover{
background-color: var(--couleur_btn_hover);
border-color: var(--couleur_btn_hover);
color:var(--couleur_text_btn_hover);
}
/* Style Home Page Coin Entreprise responsive*/
@media (max-width: 750px){

}
@media (max-width: 750px){
.btn-secondary{
margin-top: 10px;
margin-bottom: 10px;
}
}
@media (max-width: 750px){
.flex-coin{
width: inherit;
padding-top: 15px;
width:70%;
margin:auto;
}
}

/* Style Home Page losange metiers */
.metiers-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.metiers-flex-item {
padding: 1rem;
margin-left: 3rem;
 margin-right: 3rem;
}
/* Style Home Page carte */
#carte-home {
color:black;
padding: 2vh  8vh;
background-color: #f1f1f1;
display: flex;
flex-direction:row;
align-items: center;
width: 100%;
justify-items: center;
}
.carte-home-info {
color:black;
padding: 2vh  8vh;
background-color: #f1f1f1;
display: flex;
flex-direction:row;
align-items: center;
width: 100%;
justify-items: center;
}
@media (max-width:1300px){
#carte-home {
padding: 1vh  6vh;
}
.carte-home-info {
padding: 1vh  6vh;
}
}
@media (max-width:1000px){
  #carte-home {
  padding: 1vh  4vh;

  }
  }
#carte-home2 {
color:white;
padding: 1vh  8vh;
background-color: #ffffff;
align-items: center;
width: 100%;
display:block
}
#carte-home3 {
  color:white;
  padding: 1vh  8vh;
  background-color: #f3f3f3;
  align-items: center;
  width: 100%;
  display:block;
  margin-top:15px
  }
@media (max-width:1300px){
#carte-home2 {
color:rgb(36, 36, 36);
padding: 1vh  6vh;
background-color: #ffffff;
align-items: center;
width: 100%;
display:block
}
}
@media (max-width:1000px){
  #carte-home2 {
  color:rgb(36, 36, 36);
  padding: 1vh  4vh;
  background-color: #ffffff;
  align-items: center;
  width: 100%;
  display:block
  }
  }
#carte-home .flex-home1{
 width: 100%;
padding: 3vh;
}
.carte-home-info .flex-home1{
 width: 100%;
padding: 3vh;
}
#carte-home .flex-home2{
display: flex;
flex-direction:row;
justify-content: center;
align-items: center;
width:70%
}
.carte-home-info .flex-home2{
display: flex;
flex-direction:row;
justify-content: center;
align-items: center;
width:70%
}
#carte-home2 .flex-home1{
 display: flex;
flex-direction:row;
flex-wrap: wrap;
align-items: center;
width: 100%;
padding: 3vh;
}
#carte-home2 .flex-home2{
display: flex;
flex-direction:row;
align-items: center;
width:70%
}
#carte-home #img-responsive{display:none}
#carte-home2 #img-responsive{display:none}
.positionreseau{margin-top:40px}
.reseaufooter{font-size: 3em;list-style: none;}
@media (max-width: 800px) {
.reseaufooter{font-size:1.4em;}
.positionreseau{margin-top:1px}
#carte-home-info a{text-align:center;}
#carte-home-info h2{text-align:center;}
.carte-home a{text-align:center;}
.carte-home h2{text-align:center;}
#carte-home2 .taille-h2{text-align:center;}
#carte-home .taille-h2{text-align:center;}
#carte-home2 .flex-home1{text-align:left;}
#carte-home{text-align:center;}
.carte-home-info{text-align:center;}
.texte-carte-home{margin-top:6px}

#carte-home .flex-home1{
padding: 2vh;
display:block;
}
.carte-home-info .flex-home1{
padding: 2vh;
display:block;
}

#carte-home2 a{text-align:center;}
#carte-home2 h2{text-align:center;}
#carte-home2{text-align:center;}
#carte-home2 #img-responsive{
position: relative;
display: block;
width: 100%;
}


}
.controle{
position: absolute;
top:60px;
left:40px;
height:200px;
width: 300px;
background-color: white;
z-index: 999;
}
.btnmenu{
display: block;
margin-left: 10px;
margin-top: 10px;
}
h4#boutton-carte-home {
margin: 0;
padding: 0.5rem;
}
.btn-carte:hover{box-shadow: 2px 3px 18px 2px rgba(0,0,0,0.75);}
/* FICHE DETAIL */
.col-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
@media (min-width:751px){
img.image-carre-fiche{min-width: 18rem;margin: auto;}
}
@media (max-width:750px){
img.image-carre-fiche{max-width: 100%;padding-left: 1rem;}
}
.largeurbody{margin-left: auto;margin-right: auto;}
@media (min-width: 1150px) {
.largeurbody {width: 80%;}
}
@media (min-width:750px){
.largeur-text {width:95%;margin:auto;}
}
.largeur-text{padding: 0 1rem;}
.centre-text {text-align: center;}
.date-publication {text-align: center;}
.largeur-text-membre {text-align: justify;padding:3rem;}
.largeur-fulltext {padding:1rem}
.contenant-photo {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.largeur-photo {width: calc(100% / 2);}
.photo-article {
width: 100%;
display: block;
}
.position-photo {
float: left;
height: 0;
padding-bottom: 25%;
position: relative;
overflow: hidden;
margin-bottom: 3rem;
margin-top: 3rem;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/*    MEMBRE   */
.map-height {height: 300px;}
h3#h3-contact {padding: 1rem 0 0rem 2rem;}
.ul-membre{padding-left: 1rem;}
@media (min-width:750px){
.largeur80 {min-width: 80%;}
.largeur70 {width: 70%;}
.largeur60 {min-width: 60%;}
.largeur50 {min-width: 50%;}
.largeur30 {width: 30%;}
}
@media (max-width:750px){
.largeur70 {width: 100%;}
.largeur30 {width: 100%;}
}
/*LISTE ACTUS/ARTICLES*/
.btn-actu {color: #0d8f23;}
@media (max-width: 500px) {
.col-3 {display: none;}
}
.page-link {border: none;color:#0d8f23;}
.page-item .page-link {color:#0d8f23;}
.page-item.active .page-link {
z-index: 2;
color: #fff;
background-color: #0d8f23;
border-color: #007bff;
}
.content-mentions {padding: 3rem;text-align: center;}
.content-mentions h1 {margin: 0 0 3rem;}
/* ONE PAGE */
#nav-onep {
height: 97vh;
top: 8vh;
display: block;
position: sticky;
flex: 0 0 25%;
margin-left: 4vh;
padding: 5vh 0;
overflow: hidden;
}
#nav-onep li {
text-align: center;
font-size: 1.2rem;
padding: 3%;
margin: 4%;
background-color: #0d8f23;
color:white;
font-weight:bold;
}
#nav-onep2 {
height: 97vh;
top: 8vh;
display: block;
position: sticky;
flex: 0 0 25%;
margin-left: 4vh;
padding: 5vh 0;
overflow: hidden;
}
#nav-onep2 li {
text-align: center;
font-size: 1rem;
padding: 2%;
margin: 2%;
background-color:#07690a;
color:white;
font-weight:bold;
}
.titremosaiquelogo{
margin-top: 4vh;
margin-bottom: 5vh;
font-size: 1.5rem;
color: black;
padding-bottom: 0.7vh;
font-weight: bold;
border-bottom:#0d8f23 3px solid;
}
#nav-onep img {
display: block;
margin: auto;
width: 20vh;
}
@media (max-width:1200px){
#nav-onep {display: none;}
}
.image_cv{max-width:100%;}
hr {margin-top:5%;border-top: 0px solid rgba(0, 0, 0, 0);}
@media (max-width:750px){
.pdfcompterendu{max-width:30%;}
.bg-dark{width:100%;}
}
.liencardcompterendu{color:white;}
.liencardcompterendu:hover{color:rgb(163, 159, 159);}
#sectionb1 h3{margin-top:15px}
#sectionb1 a{color:#0d8f23;font-weight: bold;}
#sectionb2 a{color:#0d8f23;font-weight: bold;}
#sectionb3 a{color:#0d8f23;font-weight: bold;}
#sectionb4 a{color:#0d8f23;font-weight: bold;}
.accordion-item{min-width:100%;}
.filter-button{
font-size: 18px;
border: 2px solid #3F6184;
padding:5px 10px;
text-align: center;
color: #3F6184;
margin-bottom: 30px;
background:transparent;
}
.filter-button:hover,
.filter-button:focus,
.filter-button.active{
color: #ffffff;
background-color:#3F6184;
outline:none;
}
.gallery_product{
margin: 0px;
padding:0;
position:relative;
text-align: center
}
.gallery_product .img-info{
position: absolute;
background: rgba(0,0,0,0.5);
left: 0;
right: 0;
bottom: 0;
padding: 20px;
overflow:hidden;
color:#fff;
top:0;
display:none;
-webkit-transition: 2s;
transition: 2s;
}
.gallery_product:hover .img-info{
display:block;
-webkit-transition: 2s;
transition: 2s;
}
.fancybox img{
max-width:98%;
max-height:250px;
overflow:hidden;
margin-top:10px;
margin-left:1%;
margin-right:1%
}
.accordion-button {
position: relative;
display: flex;
align-items: center;
text-align: left;
width: 100%;
padding: 1rem 1.25rem;
font-size: 1rem;
color: #030303;
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0;
overflow-anchor: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
.accordion-button {transition: none;}
  }
.accordion-button.collapsed {
border-bottom-width: 0;
font-weight:bold;
font-size:1.2rem;
background-color: #d4edcd;
}
.accordion-button:not(.collapsed) {
color: #0a792c;
font-weight:bold;
background-color: #dddddd;
font-size:1.2rem;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(180deg);
}
.accordion-button::after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 1.25rem;
transition: transform 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.accordion-button::after {transition: none;}
}
.accordion-button:hover {z-index: 2;}
.accordion-button:focus {
z-index: 3;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(85, 134, 97, 0);
}
.accordion-header {margin-bottom: 0;}
.accordion-item:first-of-type .accordion-button {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-width: 1px;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.accordion-item:last-of-type .accordion-collapse {
border-bottom-width: 1px;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.accordion-collapse {
border: solid rgba(0, 0, 0, 0.125);
border-width: 0 1px;
}
.accordion-body {padding: 1rem 1.25rem;}
.accordion-flush .accordion-button {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.accordion-flush .accordion-collapse {border-width: 0;}
.accordion-flush .accordion-item:first-of-type .accordion-button {
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.accordion-flush .accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Carte Formation */
.map{display: flex;width: 90%;margin: 4rem auto;}
.pasformationtrouvee{
position:absolute;
width:40%;
height:180px;
background-color:white;
top:600px;
left:30%;
z-index:9999;
text-align:center;
padding-top:30px;
}
.boutonfiltre{
color:black;
font-size:0.9rem;
border: 0px solid transparent;
}
.boutonfiltre:hover{
color:black;
font-size:0.9rem;
border: 0px solid transparent;
}
.espace{margin-bottom:0.4rem;}
@media (min-width:1060px) {
#petitecran{display:none}
#grandecran{display:block}
.filtre{
position: absolute;
top:0px;
left:0px;
width: 25%;
background-color: #efede7;
z-index: 1100;
padding: 0.7rem;
height: 700px;
}
}
@media (min-width:884px) and (max-width:1060px){
#petitecran{display:none}
#grandecran{display:block}
.filtre{
position: absolute;
top:0px;
left:0px;
width: 32%;
background-color: #efede7;
z-index: 1100;
padding: 0.7rem;
height: 700px;
}
}
@media (min-width:1328px){
#petitecran{display:none}
#grandecran{display:block}
.boutonfiltre{
color:black;
font-size:0.9rem;
border: 0px solid transparent;
}
.boutonfiltre:hover{
color:black;
font-size:0.9rem;
border: 0px solid transparent;
}
}
@media (min-width:1180px) and (max-width:1327px){
#petitecran{display:none}
#grandecran{display:block}
.boutonfiltre{
color:black;
font-size:0.8rem;
border: 0px solid transparent;
}
.boutonfiltre:hover{
color:black;
font-size:0.8rem;
border: 0px solid transparent;
}
}
@media (min-width:884px) and (max-width:1179px){
#petitecran{display:none}
#grandecran{display:block}
.boutonfiltre{
color:black;
font-size:0.7rem;
border: 0px solid transparent;
}
.boutonfiltre:hover{
color:black;
font-size:0.7rem;
border: 0px solid transparent;
}
}
.titrecarte{margin-top:8px;font-size:1.7rem}
@media (min-width:300px) and (max-width:883px){
#petitecran{display:block}
#grandecran{display:none}
.map{
display: block;
width: 90%;
margin:0rem;
margin-left:5%;
margin-right:5%;
margin-top: -10px;
}
.titrecarte{margin-top:6px;font-size:1rem}
#accordionExample{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
#val{font-size:0.7rem}
#zero{font-size:0.7rem}
.filtre{
position: relative;
width: 100%;
margin: 2rem auto;
min-height:950px;
background-color: #efede7;
text-align: initial;
padding: 0.7rem;
}
#col1{
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
#col2{
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.form-check-label{font-size:0.6rem;}
.boutonfiltre{
color:black;
font-size:0.7rem;
border: 0px solid transparent;
}
.boutonfiltre:hover{
color:black;
font-size:0.7rem;
border: 0px solid transparent;
}
}
.filtre2{
position: absolute;
top:10px;
left:10px;
width: 25%;
background-color: rgba(254,254,200,0);
z-index: 1100;
text-align: initial;
 }
.btnmenu{
display: block;
margin-left: 10px;
margin-top: 10px;
}
.nohover:hover > a{
  background: rgba(0,0,0, 0) !important;
  color:black
}
h1#carteh1 {color: black;}
/* CARTE MEMBRES DU CAMPUS*/
#map-membre-campus{height: 600px;margin-top: 2rem ;}
.tailleslide{height: 500px !important;}
@media screen and (max-width:450px){
.tailleslide{height: 250px !important;}
}
@media screen and (min-width:451px) and (max-width:1233px){
.tailleslide{height: 350px !important;}
}
@media screen and (min-width:1234px){
.tailleslide{height: 500px !important;}

}
.legend{position:absolute;z-index:9999;width:300px;height:150px;background-color:#FFFFFF;left:20px}
@media (min-width:300px) and (max-width:600px){
.legend{top:400px}
}
@media (min-width:601px) and (max-width:1000px){
.legend{top:590px}
}
@media (min-width:1001px) and (max-width:1200px){
.legend{top:580px;}
}
@media (min-width:1201px) and (max-width:1400px){
.legend{top:530px;}
}
@media (min-width:1401px) and (max-width:1500px){
.legend{top:550px;}
}
@media (min-width:1501px){
.legend{top:700px;}
}
@media (min-width:1300px){
.cmjmembres{
  padding-left:10%;
}
.cmjmembres img{
max-width:100%;
}
}
@media (max-width:1299px){
.cmjmembres{
padding-left:0%;
}
.cmjmembres img{
max-width:120%;
}
}
@media (min-width:1050px){
  .missionscmj{
    display:flex
  }
  .missionscmj2{
    display:none
  }
}
@media (max-width:1049px){
  .missionscmj{
    display:none
  }
  .missionscmj2{
    display:flex;
    padding-right:10%;padding-left:10%;padding-bottom:30px;
  }
}
.premierbtn_cmj{color:white}
@media (min-width:902px){
  .secondbtn_cmj{
    margin-left:2%
  }
}
@media (max-width:901px){
  .secondbtn_cmj{
    margin-left:0%;
    margin-top:0px;
  }
}
.boite{
transform:translate(0, 0);
transition:transform 2s;
opacity:1
}
.boite.bouger
{
transform:translate(100%, 0);
opacity:1
}
.bougeropacity{
  padding-top:20px;color:white;
  margin-top:30px;
  z-index:1;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: rgb(41, 133, 53);
height:100%;
  opacity:1
}
@media (min-width:903px){
.regroupe{
  position:relative;
  width:100%;
  height:60vh;
}
}
@media (max-width:902px){
  .regroupe{
    position:relative;
    width:100%;
    height:210vh;

  }
  }
  @media (min-width:903px){
    .remplace{
      padding-top:20px;color:white;
      margin-top:30px;
      z-index:1;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        background: rgb(41, 133, 53);
    height:100%;
    opacity:0
    }
      }
  @media (max-width:902px){
.remplace{
  padding-top:20px;color:white;
  margin-top:30px;
  z-index:1;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: rgb(41, 133, 53);
opacity:0
}
  }
@media (min-width:903px){
.rightcmj{
  padding-right:2%;
}
.leftcmj{
  padding-left:2%;
  text-align:left;
}
}
@media (max-width:902px){
  .rightcmj{
    padding-right:5%;padding-left:5%
  }
  .leftcmj{
    padding-right:5%;padding-left:5%
  }
  }
  @media (max-width:902px){
    .recadre{
      padding-left:15px
    }
  }
  @media (min-width:903px){
    .recadre{
      padding-left:20%
    }
  }
  .la3d a {
    position:relative;
    min-height: 60px;
    display:block;
    margin-bottom:25px;
    width:325px;
    margin: auto;
    margin-bottom: 3vh;
  }
  .la3d a .effet3d{
    width:100%;
    height:100%;
  }
  .la3d a .effet3d::before{

    text-align:center;
    line-height:normal;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:inherit;
    background:rgba(8, 185, 82, 0.84);
    color:#fff;
    transform-origin:top;
    transition:transform 0.5s;
  }
 .la3d a:hover > .effet3d::before{
transform:rotateX(90deg) translateY(-50%);
  }

.la3d a .effet3d::after{

    text-align:center;
    line-height:normal;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:inherit;
    background:rgba(0,0,0, .84);
    color:#fff;
    transform-origin:bottom;
    transition:transform 0.5s;
    transform:rotateX(90deg) translateY(50%);
  }
  .la3d a:hover:hover > .effet3d::after{
transform:rotateX(0deg) translateY(0);
  }

  .la3d .a13d .effet3d::before,
  .la3d .a13d .effet3d::after
  {
    content:'Compte-rendu du conseil municipal';
    padding-top:5px
  }
  .la3d .a23d .effet3d::before,
  .la3d .a23d .effet3d::after
  {
    content:'Les chantiers citoyens';
    padding-top:10px
  }
  .la3d .a33d .effet3d::before,
  .la3d .a33d .effet3d::after
  {
    content:"Informations de la communauté d'agglomération";
    padding-top:5px
  }
  .la3d .a43d .effet3d::before,
  .la3d .a43d .effet3d::after
  {
    content:'Règles de bon voisinage';
    padding-top:10px
  }
  .la3d .a13d .effet3d::after{
    background:rgba(0,0,0,0.84)
  }
  .la3d .a23d .effet3d::after{
    background:rgba(0,0,0,0.84)
  }
  .la3d .a33d .effet3d::after{
    background:rgba(0,0,0,0.84)
  }
  .la3d .a43d .effet3d::after{
    background:rgba(0,0,0,0.84)
  }
  @media (max-width: 750px){
  .la3d a {
width:100%
  }
  }

  .texte_header{
    position:absolute;
    top:50%;
    left:20px;
    z-index:999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color: rgb(118 110 110 / 40%);
    width:20%;
    transform: translateY(-50%);
  }
  .texte_header_h1{
    position: relative;
    font-size: 40px;
    font-weight: 760;
    color: #fff;
margin-top:20px;
margin-bottom: 0;

  }
  .texte_header h2{

    font-size: 2.5rem;
    font-weight: 800;
    color: #e9e7e7;
margin-top:5px;

  }
  .img_header{
    width:80%;

  }
  .div_h2{
    position: relative;
    margin-top: -100px;
  }

  @media (min-width:1328px) and (max-width:1600px){
     .texte_header{
    position:absolute;
    top:50%;
    left:20px;
    z-index:999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color: rgb(118 110 110 / 40%);
    width:25%;
    transform: translateY(-50%);
  }
  .texte_header_h1{
    position: relative;
    font-size: 40px;
    font-weight: 760;
    color: #fff;
margin-top:20px;
margin-bottom: 0;

  }
  .texte_header h2{

    font-size: 2.5rem;
    font-weight: 800;
    color: #e9e7e7;
margin-top:5px;

  }

    .div_h2{
      position: relative;
      margin-top: -100px;
    }
  }
@media (min-width:1234px) and (max-width:1327px){
  .texte_header{
    position:absolute;
    top:50%;
    left:20px;
    z-index:999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color: rgb(118 110 110 / 40%);
    width:25%;
    transform: translateY(-50%);
  }
  .texte_header_h1{
    position: relative;
    font-size: 35px;
    font-weight: 760;
    color: #fff;
margin-top:20px;
margin-bottom: 0;

  }
  .texte_header h2{

    font-size: 2rem;
    font-weight: 800;
    color: #e9e7e7;
margin-top:5px;

  }

  .div_h2{
    position: relative;
    margin-top: -100px;
  }
}
@media (min-width:956px) and (max-width:1233px){
   .texte_header{
    position:absolute;
    top:50%;
    left:20px;
    z-index:999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color: rgb(118 110 110 / 40%);
    width:25%;
    transform: translateY(-50%);
  }
  .texte_header_h1{
    position: relative;
    font-size: 30px;
    font-weight: 760;
    color: #fff;
margin-top:20px;
margin-bottom: 0;

  }
  .texte_header h2{

    font-size: 1.9rem;
    font-weight: 800;
    color: #e9e7e7;
margin-top:5px;

  }

  .div_h2{
    position: relative;
    margin-top: -70px;
  }
}

@media (min-width:595px)and (max-width:955px){
   .texte_header{
    position:absolute;
    top:50%;
    left:20px;
    z-index:999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px;
    background-color: rgb(118 110 110 / 40%);
    width:35%;
    transform: translateY(-50%);
  }
  .texte_header_h1{
    position: relative;
    font-size: 25px;
    font-weight: 760;
    color: #fff;
margin-top:20px;
margin-bottom: 0;

  }
  .texte_header h2{

    font-size: 1.5rem;
    font-weight: 800;
    color: #e9e7e7;
margin-top:5px;

  }

  .div_h2{
    position: relative;
    margin-top: -50px;
  }
}
@media (min-width:451px) and (max-width:594px){
   .texte_header{
        position: absolute;
        top: 25%;
        left: 50%;
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-color: rgb(118 110 110 / 40%);
        width: 45%;
        transform: translate(-50%);
  }
  .texte_header_h1{
    position: relative;
    font-size: 25px;
    font-weight: 760;
    color: #fff;
margin-top:20px;
margin-bottom: 0;

  }
  .texte_header h2{

    font-size: 1.5rem;
    font-weight: 800;
    color: #e9e7e7;
margin-top:5px;

  }

  .div_h2{
    position: relative;
    margin-top: -50px;
  }
}
@media (max-width:450px){
   .texte_header{
        position: absolute;
        top: 25%;
        left: 50%;
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-color: rgb(118 110 110 / 40%);
        width: 50%;
        transform: translate(-50%);
  }
  .texte_header_h1{
    position: relative;
    font-size: 22px;
    font-weight: 760;
    color: #fff;
margin-top:20px;
margin-bottom: 0;

  }
  .texte_header h2{

    font-size: 1.3rem;
    font-weight: 800;
    color: #e9e7e7;
margin-top:5px;

  }

  .div_h2{
    position: relative;
    margin-top: -50px;
  }
}
.vire_titre{
  display:none
}
.bloc_droite_actu{

     display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: -30px;
    justify-content: flex-start;
    padding-left: 8vh;
}


.gros_actu{
  color:rgb(105 144 104);font-size:6rem;
  font-weight:bolder;
}
.gros_actubis{
  color:rgb(105 144 104);font-size:5rem;z-index:0;
  font-weight:bolder;
}
.gros_actu2{
 color:rgb(47 47 47);font-size:4rem;margin-left:10px;
    height: 6rem;
    display: flex;
    align-items: flex-end;
}
.gros_actu2bis{
  color:rgb(47 47 47);font-size:3rem;z-index:0;margin-top:-40px
 }
.les_btn_actu{
      width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: flex-end;
    padding-right: 8vh;

  }
.row_actu{margin-top:10px;margin-bottom:45px}
.card_actu{
  width:500px;margin-top:5vh
}
.la_date{
 width:10%;writing-mode: vertical-lr;text-orientation: mixed;font-size:2.2rem;color:white;background-color: #333;text-align: center;
padding-right: 2%;
}
.bloc_img_actu{
  display:flex;flex-direction:row;justify-content:center;height:35vh;width:100%
}

.bloc_titre_actu{
  font-size:1.2rem;font-weight:bold;text-align:center;width:100%;margin:auto;margin-top:5px;color:black
}
@media (max-width:450px){

}
@media (min-width:451px) and (max-width:900px){

}
@media (min-width:1450px) and (max-width:1550px){

}
@media (min-width:1350px) and (max-width:1449px){

}
@media (min-width:1250px) and (max-width:1349px){

}
@media (min-width:1150px) and (max-width:1249px){

}
@media (min-width:1020px) and (max-width:1149px){

}
@media (min-width:856px) and (max-width:1019px){


}
@media (min-width:732px) and (max-width:876px){
.gros_actu{font-size:4rem}
.gros_actu2{font-size:2rem;height:4rem}
.gros_actubis{font-size:4rem}
.gros_actu2bis{font-size: 2rem;margin-top: -30px;}
}
@media (min-width:588px) and (max-width:731px){
.bloc_droite_actu{justify-content: center;align-items: center;padding-left: 0;}
.gros_actu{font-size:3rem}
.gros_actu2{font-size:2rem;height:3.2rem}
.gros_actubis{font-size:3rem;text-align: center;}
.gros_actu2bis{font-size: 2rem;margin-top: -20px;text-align: center;}
.les_btn_actu{padding-right: 0;justify-content: center;}
.btn-secondary3{font-size: 1rem;}
#carte-home3{padding: 1vh  2vh;}
}
@media (min-width:0px) and (max-width:587px){
.bloc_droite_actu{justify-content: center;align-items: center;padding-left: 0;}
.gros_actu{font-size:2rem}
.gros_actu2{font-size:1.5rem;height:2.4rem}
.gros_actubis{font-size:2rem;text-align: center;}
.gros_actu2bis{font-size: 1.5rem;margin-top: -15px;text-align: center;}
.les_btn_actu{padding-right: 0;justify-content: center;}
.btn-secondary3{font-size: 1rem;}
#carte-home3{padding: 1vh  2vh;}
}
.actu_item{
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:start;align-items: center;width:80%;max-width: 1496px;
}
@media (min-width:1857px){
  .actu_item{
    display:flex;flex-direction:row;flex-wrap:wrap;justify-content:start;align-items: center;width:80%;max-width: 2000px;
  }
.card_actu {
  width: 700px;
  margin-top: 5vh;
}
.bloc_img_actu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 40vh;
  width:100%
}

.la_date{
  padding-left: 1%;
 }
 .bloc_titre_actu{
  font-size:1.5rem;
}
}
@media (min-width:1650px) and (max-width:1856px){
  .actu_item{
    display:flex;flex-direction:row;flex-wrap:wrap;justify-content:start;align-items: center;width:80%;max-width: 1800px;
  }
.card_actu {
  width: 600px;
  margin-top: 5vh;
}
}
@media (min-width: 1024px){
.owl-theme .owl-dots, .owl-theme .owl-nav {
    text-align: center;
    margin-top: 15px;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    left: 500px;
}
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #2d302f;
}
@media (max-width:1019px) and (min-width:980px){
.actu_item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    width: 100%;
}
.card_actu {
  width: 480px;
  margin-top: 5vh;
}
  .owl-carousel .owl-item img {
    width: 100%;
    min-height: 180px;
}
}
@media (max-width:979px) and (min-width:837px){
.actu_item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    width: 100%;
}
.card_actu {
  width: 410px;
  margin-top: 5vh;
}
  .owl-carousel .owl-item img {
    width: 100%;
    min-height: 180px;
}
}
@media (max-width:836px){
.actu_item {
  display: block;
  width: 100%;
}
.card_actu {
  width: 100%;
  margin-top: 5vh;
}
.owl-carousel .owl-item img {
  width: 100%;
  min-height: 200px;
}
}
.pastille{
  font-size: 1.9rem;
  margin-right: 15px;
}
.pastillea{
  color: rgb(20, 20, 20);
  font-size: 1.4rem;
  display: inline-flex;
  width: 350px;
    height: 100px;
    align-items: center;
    margin-left:10px;
    font-weight: bold;
}

.pastillea:hover i{
  color:#405d4a
}
.texte-carte-home{
  display:flex;
  flex-direction: row;
  width:100%;
  flex-wrap: wrap;
}
.texte-carte-home ul{
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
    align-items: center;
    width: 40%;
}
.texte-carte-home li{
margin-bottom: 20px;
}
@media (max-width:1285px){
  .pastillea{
  font-size: 1.3rem;
  }
}
@media (max-width:1200px){
  .pastillea{
  font-size: 1.1rem;
  }
}
@media (max-width:1080px){
  .pastillea{
  font-size: 0.98rem;
  }
}
@media (max-width:960px){
  .pastillea{
  font-size: 1rem;
  }
  .texte-carte-home ul{
  width:100%;
  align-items: flex-start;
  }

}
@media (max-width:960px){
.sectionb6{
  margin-top:50px
}
.sectionb6 h2{
  border-top: solid 1px #cbd1cd;margin-bottom:15px
}
}
.bg-dark {
  background-color: #63a37e!important;
}
.change_taille_pagemairie{
  margin-bottom:30px;width:80%;margin:auto;
}
.hauteur_photo_page_conseilmunicpal{
  font-weight:bold;height:176px
}
.container_image_cv{height:154px}
.image_cv{height:100%;object-fit: cover;}
@media (max-width:767px){
  .change_taille_pagemairie{
    margin-bottom:30px;width:92%;margin:auto;
    }
  .hauteur_photo_page_conseilmunicpal{
    font-weight:bold;height:250px
  }
  .container_image_cv{height:230px}
}
#portfolio {
  width: 100%;
  margin:auto;
  margin-top:15px;
  min-height: 400px;
  background: #d8d8d8;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 4px;
  margin-bottom:30px
}

.project {
  position: relative;
  background: #fff;
  overflow: hidden;
  height:100%;
  width:100%
}
@media screen and (max-width: 1200px) {
  #portfolio {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    min-height: 600px;
    grid-gap: 8px;
    }
    .project{height:300px}
}

@media screen and (max-width: 650px) {
  #portfolio {
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
}
.project img {
    position: absolute;
    opacity: 0.9;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.project p {
    position: absolute;
    text-align: center;
    min-height:120px;
    width: 100%;

    text-transform: uppercase;

    font-weight: bold;
    color: white;
    background-color: rgba(0,0,0,0.6);
    z-index: 3;


}

.project .grid__title {
  position: absolute;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  bottom: 0;
  font-weight: 100;
  font-size: 0.8em;
  z-index: 3;
  text-transform: uppercase;
  color: #474545;
  letter-spacing: 2px;
}

.project:hover .grid__overlay {
  transform: translateY(0%);
}

.grid__overlay {
  background: rgba(2,2,2, .9);
  height: 100%;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  transform: translateY(101%);
  transition: all 0.3s ease-in-out;
}

.grid__overlay button {
  background: none;
  outline: none;
  font-weight: 100;
  letter-spacing: 2px;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-transform: uppercase;
  padding: 10px;
}

.grid__overlay button:hover {
  transition: all 0.3s ease-in-out;
  background: #ffffff;
  color: #D1A39E;
  transform: scale(1.05);
}

.overlay {
  position: fixed;
  background: rgba(#474545, 0.7);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 3;
}

.overlay.open {
  display: grid;
  align-items: center;
  justify-items: center;
}

.overlay__inner {
    background: #fff;
    width: 700px;
    padding: 20px;
    position: relative;
    opacity: 1;
  }

  .close {
    position: absolute;
    top: 3px;
    right: 10px;
    background: none;
    outline: 0;
    color: #000;
    border: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  .close:hover {
      color: #D1A39E;
    }


  /* .project__image {
    margin-left: -50%;
  } */