.newsection {
position: relative;
background-color: white;
width: 100vw ;
height: auto ;
z-index: 999;

}

/* .newsection::after {
    animation: grain 8s steps(10) infinite;
    background-image: url(../img/noise.png);
    content: '';
    height: 300%;
    left: -50%;
    opacity: 0.6;
    position: fixed;
    top: -100%;
    width: 300%;
} */

@keyframes grain {
  0%, 100% { transform:translate(0, 0); }
  10% { transform:translate(-5%, -10%); }
  20% { transform:translate(-15%, 5%); }
  30% { transform:translate(7%, -25%); }
  40% { transform:translate(-5%, 25%); }
  50% { transform:translate(-15%, 10%); }
  60% { transform:translate(15%, 0%); }
  70% { transform:translate(0%, 15%); }
  80% { transform:translate(3%, 35%); }
  90% { transform:translate(-10%, 10%); }
}




.filterDiv {
  /* float: left;
  background-color: #2196F3; */
  color: #ffffff;
  /* width: 100%; */
  /* height:400px; */
 padding: 0px;
  padding: 5px;
  border-radius: 5px;
  overflow: hidden;
  display: none; /* Hidden by default */
  vertical-align: top;
  transition: all 0.5s;
}

/* .filterDiv:hover  .titrBtn{
transform: scale(1.01);
transition: all 0.5s;

} */
/* 
.filterDiv:hover a {
  
  background-position: center;
  background-size: 150%;
  transition: all 5s;
} */



/* 
.filterDiv:hover .ensavoir {
  transform : translateX(100%);
  transition: all 1s;

} */

/* The "show" class is added to the filtered elements */
.show {
  display: inline-block ;
}

/* Style the buttons */
/* .btn2 {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
} */

/* Add a light grey background on mouse-over */
.btn2:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
/* .btn2.active {
  background-color: #666;
  color: white;
} */


.newsection h2 {
max-width: 700px;
width: 100%;
color: #808080;
padding-top: 5vh;
height: auto;
margin-bottom: 5vh;
display: block;
position: relative;

}

.containtitre {
max-width: 80%;
position: relative;
width: 100%;
margin-bottom: 5vh;
margin-right: auto;
margin-left: auto;
}

.resetMenu  {
display: block;
background : none!important;
color: #808080!important;
text-decoration: underline;
padding-left: 0px;

}

.menuFilter {
display: flex;
flex-wrap: wrap;
justify-content: space-between ;
margin-bottom: 5vh;
max-width: 100%;
}

.btn2 {
background: none!important;
/* width:15%;  */
/* border-radius: 5px; */
height: 75px;
font-size: 15px;
border: none;
/* font-weight: bolder; */
text-align: left;
    color: rgb(128, 128, 128) !important;
    text-decoration: underline;
}
/* 
.btn2 lottieplayer {
max-width: 80%;
width: 100%;
display: block;
position: relative; 
margin: auto;
} */

#btnux {
max-width: 80%;
width: 100%;
display: block;
position: relative; 
margin: auto;
}

.masterGridBG a{
width: 100%; 
height: 100%;
display: block;
position: relative;
background-color: none;
}


.newsection .containerfilter {
position: relative;
/* display: block ; */
max-width: 80%;
display: flex;
margin: auto;
/* height: 300vh; */
}


.filterDiv .titrBtn {
text-align:left;
text-decoration: none!important; 
color: black;
font-size: 3em;
font-weight: bolder;
margin-bottom: 0px;

}




.filterDiv a {
text-decoration: none;
  border-radius: 15px;
  transition: all 5s;
}

.filterDiv .hastagtop{
color: black ;
font-size: 12px;
padding-top: 10px;
padding-left: 10px;
margin-bottom: 0px;
}

/* .correcSize {
font-size: 4em!important;
color: blue ;
} */

.operaback .imggrid {
background-image: url(opera.jpg)!important;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: block;
width: 100%;
height: 300px;
border-radius:20px ;
}

.imggrid {
width: 100%;
height: 300px;
border-radius:20px ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: block;
}

.fdtiback .imggrid, .fdtiback2 {
background-image: url(fdti-svg.jpg)!important;
}


.edsback .imggrid {
background-image: url(eds.jpg)!important;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: black;
}

.edsback p {
color: black!important;
}

.ensavoir {
color: black;
font-size: 12px;
text-align: left;
transition: all 1s;

}

.fdti1 {
/* background: radial-gradient(#ffffff, #dadada); */
}


/* .eurocon {
background: radial-gradient(#ffffff, #dadada);
} */

/* .eurocon p {
color: black!important;
z-index : 100!important;
position: relative!important;
} */


/* .fdti1 .titrBtn::after {
    content: "";
    background-image: url(fdti.png)!important;
    width: 200px;
    height: 200px;
    position: absolute; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
  
  z-index: 0!important;
    background-repeat: no-repeat;
    background-size: contain;

} */


.imgabove {
width: 300px;
height: 300px;
background-image : url(fdti.png );
display: block;
position: absolute; 
left: 0;
right: 0;
margin-right: auto;
margin-left : auto;
background-repeat: no-repeat;
background-size: contain ;
margin-top: -150px;
opacity: 0.5;

}

.imgabove2 {
background-image : url(euroconstruct.png )!important;
}

.eurocon .imggrid {
background-image: url(euroconstruct.jpg);
}


/* .fdti1 p {
z-index : 100!important;
/* position: relative!important; */
/* color:black!important; */


/* .fdti1 .titrBtn {
  color: white!important ;
} */

.correcp p{
color: black!important;

}

.fdtigeo .imggrid{
  background-image : url(fdti.jpg)!important;
  /* background-repeat: no-repeat; 
  background-size: cover; */
  
}

/* .fdtigeo p {
  color: black!important;
} */

.thegreen p, .thegreen .titrBtn{
color: black!important;
}

.thegreen .imggrid{
  background-image : url(thegreendata.jpg)!important;
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
  }

  .thegogo .imggrid{
    background-image: url(gogo.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
  }

  .thehabi .imggrid{
  background-image: url(habitat.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    transition: all 5s;
  }

   .paspeach .imggrid {
  background-image: url(peach.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
  }
/*
.abovegreen {
  background-image: url(thegreendata-front.png);
  background-repeat: no-repeat;
  background-size: cover;

  .the
  background-position: center;
  width: 100%;
  height: 100%; 
  display: block; 
  position: absolute;
  top: 0px;
  z-index: 999;
*/

.themobitype .imggrid {
    background-image: url(mobitype.jpg);
    background-position: right;
    background-size: cover;
    background-position: center;
}



.picardtof .imggrid{
    background-image: url(ypicard.jpg);
    background-position: right;
    background-size: cover;
  background-position: bottom ;
}

.themobitype p {
color: black!important;}


.newsection::before {
    animation: grain 8s steps(10) infinite;
    background-image: url(noise.png);
    content: '';
    height: 300vh;
    left: -100vw ;
    right: 0px;
    opacity: 0.6;
    position: fixed;
    top: -100vw ;
    width: 300vw;
}


@keyframes grain {
  0%, 100% { transform:translate(0, 0); }
  10% { transform:translate(-2%, -2%); }
  20% { transform:translate(-5%, 5%); }
  30% { transform:translate(7%, -5%); }
  40% { transform:translate(-2%, 2%); }
  50% { transform:translate(-5%, 5%); }
  60% { transform:translate(5%, 0%); }
  70% { transform:translate(0%, 5%); }
  80% { transform:translate(3%, 2%); }
  90% { transform:translate(-5%, 2%); }
}


.testrow div {
height: 300px; 
background-color: red;
display: inline-block;
}

.testrow {
/* width: 100%; */
/* display: block; */
/* display: flex; */
background-color: green;
height: 400px;
position: relative;
z-index: 99;
}

.testrow .yellow {
background-color: yellow;
}

.motionmobi .imggrid{
background-image : url(motion-mobility.jpg);
background-position: center;
background-size: cover;
}

.redstory .imggrid{
background-image: url(red.jpg);
background-size: cover;
background-position: center;
}



@media (max-width: 1200px){
.gridperso {
    flex: 0 0 auto;
    width: 33%;

    /* display: inline-block; */
}

.filterDiv {
/* height: 300px; */
}

.titrBtn {
    font-size: 2.5em!important;
}
}

@media (max-width: 750px){
.gridperso {
    flex: 0 0 auto;
    width: 100%;
}
}