.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center; }

.xpandable-block {
  height: 500px;
  overflow: hidden;
  order: 0; }

.xpand-button {
  order: 1; }

input[type="checkbox"] {
  display: none; }

input[type="checkbox"]:checked + .xpandable-block {
  height: auto; }

label {
  order: 1;
  text-decoration: underline;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 20px;
  margin: 15px 20px;
  background-color: #f9a602;
  border-radius: 10px; }

.shadow-b {box-shadow: 0 0.1rem 0 rgba(249, 166, 2, 0.25) !important; }

.picto {margin: 20px 5px;height: 60px; }

.hidden {display: none; }

@media (max-width: 768px) {
  .hidden-xs {display: none !important;}
  .imgr {float: right; margin: 10px 0px 10px 20px;  width: 30%;}
  .imgl {float: left; margin: 10px 10px 10px 0px; width: 30%;}
  .txt-h1(font-size: 10px;)
  
}
@media (min-width: 768px) {
  .hidden-sm {display: none !important;}
  .imgr {float: right; margin: 10px 0px 0px 20px; width: 25%;}
  .imgl {float: left; margin: 10px 20px 10px 0px; width: 25%;}
  .picto {margin: 20px 10px;height: 80px;}
}
@media (min-width: 992px) {
  .hidden-md {display: none !important;}
  .imgr {float: right; margin: 10px 0px 10px 20px; width: 20%;}
  .imgl {float: left; margin: 10px 20px 10px 0px; width: 20%;}
  .picto {margin: 20px 10px;height: 90px; }
}
@media (min-width: 1200px) {
  .hidden-lg {display: none !important;}
  .imgr {float: right; margin: 10px 0px 10px 20px; width: 15%;}
  .imgl {float: left; margin: 10px 20px 10px 0px; width: 15%;}
  .picto {margin: 20px;height: 100px; }
}

.picto-txt {float: left; margin: 20px 20px 0px 0px;  width: 40px;}
.h1-in {font-weight: 300;}
.text-black {color:#000;}

.text-d:hover {text-decoration: underline;}

a img:hover {
    transform: scale(1.05); 
    transition: border 0.5s ease;
}