.wgl_partnergrid{
  margin: 0 0 40px;
}

.wgl_partnergrid-content{
  background-color: #fff;
  padding: 20px 15px;
  box-shadow: 1px 2px 3px 0px #e5e5e5;
}

.wgl_partnergrid .areatitle{
  width: 100%;
  overflow: hidden;;
}

.wgl_partnergrid h3{
  color: #1d202d;
  font: 900 20px / 22px var(--secondery-font);
  margin: 0 0 15px;
  text-align: left;
  width: auto;
  position: relative;
  float: left;
}

.wgl_partnergrid .sub-title{
  font: 400 18px / 22px var(--secondary-font);
  float: left;
  width: auto;
  color: var(--body-text-color);
  margin-left: 10px;
  float: left;
}

.wgl_partnergrid ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.wgl_partnergrid ul li{
  margin: 0 auto;
  width: 150px;
  flex: 1 0 11%;
  text-align: center;
}

.wgl_partnergrid ul li img{
  width: 150px;
  height: 150px;
  max-width: 150px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  transition: all 1s cubic-bezier(0, 0, .1, 1);
  transition-delay: .2s;
  margin: 10px;
}

.wgl_partnergrid ul a:hover img {
  transform: scale(1.1);
}

.wgl_partnergrid ul li p{
  text-transform: uppercase;
  font-weight: 700;
  color: #1d202d;
  padding: 10px 0;
}

.wgl_partnergrid ul li p,
.wgl_partnergrid ul li a{
  color: #1d202d;
}

.wgl_partnergrid ul li a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
}

.wgl_partnergridd .container ul li a::before {
	background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
	bottom: 10px;
	content: "";
	left: 10px;
	opacity: 1;
	-moz-opacity: 1; 
	-khtml-opacity: 1; 
	-webkit-opacity: 1;
	position: absolute;
	right: 10px;
	top: 10px;
	transform: scale(0);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	z-index: 1;

  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;

  width: 150px;
  height: 150px;
}
.wgl_partnergridd .container ul li:hover a::before {
	opacity: 0;
	-moz-opacity: 0; 
	-khtml-opacity: 0; 
	-webkit-opacity: 0;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transition-duration: 1s;
}

.wgl_facebookgrid{
  margin-bottom: 40px;
}

.wgl_facebookgrid .container{
  margin: 20px auto;
  padding-left: 15px;
  padding-right: 15px;
}

.wgl_facebookgrid .cadre{
  background-color: #2b314d;
  margin: 0 15px;
  padding: 20px 0;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
}

.wgl_facebookgrid .cadre , .wgl_facebookgrid ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}

.wgl_facebookgrid .areatexte h3{
  color: #fff;
  margin-bottom: 0;
}

.wgl_facebookgrid .areatexte .subtexte{
  color: #9f9f9f;
}

.wgl_facebookgrid ul{
  margin-bottom: 0;
  gap: 12px;
}

.wgl_facebookgrid ul li.facebook{
  width: auto;
}

.wgl_facebookgrid .container ul li.facebook{
  display: flex;
  align-items: center;
  flex-shrink: 1;
  max-width: 90px;
  transition: all 300ms ease-in-out;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  height: 40px;
  box-shadow: 0 0 5px -1px rgb(0 0 0 / 15%);
  -webkit-box-shadow: 0 0 5px -1px rgb(0 0 0 / 15%);
  -moz-box-shadow: 0 0 5px -1px rgba(0,0,0,.15);
  -ms-box-shadow: 0 0 5px -1px rgba(0,0,0,.15);
  -o-box-shadow: 0 0 5px -1px rgba(0,0,0,.15)
}

.wgl_facebookgrid li.facebook:hover{
  /* width: 90px; */
  flex-grow: 1.2;
}

.wgl_facebookgrid li.facebook:hover p{
  width: 50px;
  color: #fff;
  opacity: 1;
}

.wgl_facebookgrid .facebook a{
  padding: 0 10px;
}


.wgl_facebookgrid .container ul li.facebook a::before {
  content: "";
  mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTU1LjEzOSAxNTUuMTM5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNTUuMTM5IDE1NS4xMzk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGlkPSJmXzFfIiBzdHlsZT0iZmlsbDojMDEwMDAyOyIgZD0iTTg5LjU4NCwxNTUuMTM5Vjg0LjM3OGgyMy43NDJsMy41NjItMjcuNTg1SDg5LjU4NFYzOS4xODQNCgkJYzAtNy45ODQsMi4yMDgtMTMuNDI1LDEzLjY3LTEzLjQyNWwxNC41OTUtMC4wMDZWMS4wOEMxMTUuMzI1LDAuNzUyLDEwNi42NjEsMCw5Ni41NzcsMEM3NS41MiwwLDYxLjEwNCwxMi44NTMsNjEuMTA0LDM2LjQ1Mg0KCQl2MjAuMzQxSDM3LjI5djI3LjU4NWgyMy44MTR2NzAuNzYxSDg5LjU4NHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K);
  -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTU1LjEzOSAxNTUuMTM5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNTUuMTM5IDE1NS4xMzk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGlkPSJmXzFfIiBzdHlsZT0iZmlsbDojMDEwMDAyOyIgZD0iTTg5LjU4NCwxNTUuMTM5Vjg0LjM3OGgyMy43NDJsMy41NjItMjcuNTg1SDg5LjU4NFYzOS4xODQNCgkJYzAtNy45ODQsMi4yMDgtMTMuNDI1LDEzLjY3LTEzLjQyNWwxNC41OTUtMC4wMDZWMS4wOEMxMTUuMzI1LDAuNzUyLDEwNi42NjEsMCw5Ni41NzcsMEM3NS41MiwwLDYxLjEwNCwxMi44NTMsNjEuMTA0LDM2LjQ1Mg0KCQl2MjAuMzQxSDM3LjI5djI3LjU4NWgyMy44MTR2NzAuNzYxSDg5LjU4NHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K);
  float: left;
  height: 16px;
  width: 16px;
  background: #fff
}

.wgl_facebookgrid .container ul li.facebookDunkerquois{
  background: #BFD400;
}

.wgl_facebookgrid .container ul li.facebookAudomarois{
  background: #60D041;
}

.wgl_facebookgrid .container ul li.facebookCotedOpale{
  background: #2CB9C3;
}

.wgl_facebookgrid .container ul li.facebookFlandres{
  background: #E06A12;
}

.wgl_facebookgrid .container ul li.facebookBassinMinier{
  background: #AD4489;
}

.wgl_facebookgrid .container ul li.facebookArras{
  background: #7835d2;
}

.wgl_facebookgrid .container ul li.facebookCambrais{
  background: #358D84;
}

.wgl_facebookgrid .container ul li.facebookLille{
  background: #C42C41;
}

.wgl_facebookgrid .container ul li.facebookDouai{
  background: #987967;
}

.wgl_facebookgrid .container ul li.facebookValenciennes{
  background: #d16767;
}

.wgl_facebookgrid .container ul li.facebookSomme{
  background: #02658C;
}

.wgl_facebookgrid .container ul li.facebookOise{
  background: #FDA922;
}

.wgl_facebookgrid .container ul li.facebookAisne{
  background: #d444e2;
}

.wgl_facebookgrid ul li p {
  display: block;
  float: left;
  width: 0;
  transition: all 400ms ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  order: 1;
  margin: 0;
  opacity: 0;
  text-align: right;
  font: 500 11px / 14px var(--secondary-font);
}

.wgl_facebookgrid .container ul li.facebookSeineMaritime{
  background: #0a50fa;
}

.wgl_facebookgrid .container ul li.facebookMaubeuge{
  background: #7f2e4e;
}

@media (max-width: 1300px) {
  .wgl_facebookgrid .areatexte{
    margin-bottom: 15px;
  }
}

@media (max-width: 992px) {
  .wgl_facebookgrid .container ,.wgl_facebookgrid ul {
    justify-content: center;
  }
  .wgl_facebookgrid ul {
    gap: 7px;
  }
  .wgl_facebookgrid .container{
    padding: 0 10px;
  }
  .wgl_facebookgrid .container ul li.facebook a::before{
    height: 11px;
    width: 11px;
  }
  .wgl_facebookgrid li.facebook:hover p{
    width: 27px;
  }
  .wgl_facebookgrid li.facebook:hover{
    width: 60px; 
  }
}

@media (max-width: 544px) {
  .wgl_partnergrid ul li{
    max-width: min-content;
  }

  .wgl_partnergrid ul li img{
    width: 70px;
    height: 70px;
  }

  .wgl_partnergrid ul li p{
    font-size: 10px;
    padding: 0;
    margin-bottom: 5px;
  }

  .wgl_partnergrid ul li a[title^='Agglomération Lilloise'] p{
    margin-bottom: 0;
  }
  .areatexte{
    text-align: center;
  }
  .wgl_facebookgrid ul {
    width: 300px;
    gap: 7px;
  }
  .wgl_facebookgrid ul:has(li.facebook:hover){
    width: 325px;
  }
  .wgl_facebookgrid .container ul li.facebook a::before{
    height: 11px;
    width: 11px;
  }
  .wgl_facebookgrid li.facebook:hover p{
    width: 50px;
  }
  .wgl_facebookgrid li.facebook:hover{
    width: 80px; 
  }
  .wgl_facebookgrid li.facebook{
    margin: 5px !important;
  }
}