.picto-item {
  position: relative;  /*les .picto-item deviennent référents*/
  cursor: help;
  border-radius: 50%;
  margin-left:5px;
}

/* on génère un élément :after lors du survol et du focus :*/

.picto-item:hover:after,
.picto-item:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
 /* white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #26ae91;
  color: #fff;
  border-radius: 4px;
  width: 260px;
}

/* on génère un second élément en :before pour la flèche */

/*[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
 /* color: #26ae91;
}*/

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}
.pictos {
  text-align: center;
}
.slider-text-title {max-width:700px!important;}
.slider-text-description  {max-width:700px!important;text-align: justify;}

  }
@media screen and (min-width: 50px)and (max-width: 259px){
.bx-viewport {max-height:127px!important;height:127px!important;}
.bx-wrapper img {height: auto!important;max-height: 127px!important;max-width: 100%!important;}
  }
@media screen and (min-width: 260px) and (max-width: 290px){
.bx-viewport {max-height:142px!important;height:142px!important;}
.bx-wrapper img {height: auto!important;max-height: 142px!important;max-width: 100%!important;}
  }
@media screen and (min-width: 291px) and (max-width: 300px){
.bx-viewport {max-height:165px!important;height:165px!important;}
.bx-wrapper img {height: auto!important;max-height: 165px!important;max-width: 100%!important;}
  }
@media screen and (min-width: 301px) and (max-width: 340px){
.bx-viewport {max-height:172px!important;height:172px!important;}
.bx-wrapper img {height: auto!important;max-height: 172px!important;max-width: 100%!important;}
  }
@media screen and (min-width: 341px) and (max-width: 350px){
.bx-viewport {max-height:202px!important;height:202px!important;}
.bx-wrapper img {height: auto!important;max-height: 202px!important;max-width: 100%!important;}
  }
@media screen and (min-width: 351px) and (max-width: 360px){
.bx-viewport {max-height:218px!important;height:218px!important;}
.bx-wrapper img {height: auto!important;max-height: 218px!important;max-width: 100%!important;}
  }
  @media screen and (min-width: 361px) and (max-width: 375px){
.bx-viewport {max-height:229px!important;height:229px!important;}
.bx-wrapper img {height: auto!important;max-height: 229px!important;max-width: 100%!important;}
  }
  @media screen and (min-width: 376px) and (max-width: 390px){
.bx-viewport {max-height:240px!important;height:240px!important;}
.bx-wrapper img {height: auto!important;max-height: 240px!important;max-width: 100%!important;}
  }
@media screen and (min-width: 391px) and (max-width: 780px){
.bx-viewport {max-height:257px!important;height:257px!important;}
.bx-wrapper img {height: auto!important;max-height: 257px!important;max-width: 100%!important;}
  }
  @media screen and (min-width: 781px){
.bx-viewport {max-height:450px!important;height:450px!important;}
.bx-wrapper img {height: auto!important;max-height: 450px!important;max-width: 100%!important;}
  }