.banderole {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 300px;
    background-color: #878787;
    transition: transform 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top:20px;
    padding-bottom:20px;
}

.banderole.hidden {
  transform: translateY(100%);
}

.show-arrow {
  display: flex!important;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.banderole-content .arrow {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 100%;
  /* background-color: #9c9c9c; */
  cursor: pointer;
  text-align: center;
  line-height: 200px;
  flex-direction:column;
  justify-content:space-around;
}
body > div.footer > div.banderole > div > div.arrow img {
    width: 20px;
}

.banderole-2 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 300px;
  background-color: transparent;
  /* transition: transform 0.5s; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 0;
  z-index: 10;
}

.banderole-2-content {
  position: relative;
}

button.banderole-close {
  background: url(https://s1.lematin.ma/cdn/dfp/videojs/close_modal.png) no-repeat;
  background-color: transparent;
  width: 30px !important;
  height: 30px !important;
  display: block;
  cursor: pointer;
  float: right;
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 10;
  border: none;
  outline: none;
}


/* .banderole-2.hidden {
  display: none;
} */


@media only screen and (max-width: 600px) {
  
  img.img_ad {
      transform: scale(0.82);
  }
}