#bpc0 {
  position: fixed;
  display: none;
  top: 0px;
  right: 0px;
  padding: 0px;
  width: 100%;
  
  z-index: 12;
}
@media (max-width: 768px) {
  .news h1 {font-size: 26px}
  .imgr {
    float: right;
    margin: 10px 0px 10px 20px;
    width: 35%;
  }
  
  .imgl {
    float: left;
    margin: 10px 20px 10px 0px;
    width: 35%;
  }
  .img-n {
    float: left;
    margin: 3px;
    width: 30px;
  }
  .aspect-ratio-1x1 {margin: 10px 10px; width: 100%;}
  .text-logo {
    font-size: 16px;
    padding: 0px 0px 0px 0px;
  }
  .text-logo-bpc {
    font-size: 16px;
    padding: 0px 0px 0px 0px;
  }
  .text-mail {
    font-size: 16px;
    padding: 5px 0px 0px 0px;
  }
  .text-mail-bpc {
    font-size: 16px;
    padding: 10px 0px 0px 0px;
  }
}
@media (min-width: 768px) {
  .news h1 {font-size: 22px}
  .imgr {
    float: right;
    margin: 10px 0px 0px 20px;
    width: 30%;
  }
  .imgl {
    float: left;
    margin: 10px 20px 10px 0px;
    width: 30%;
  }
  .aspect-ratio-1x1 {margin: 10px 10px; width: 100%;}
  .text-logo {
    font-size: 30px;
    padding: 15px 0px 0px 0px;
  }
  .img-n {
    float: left;
    margin: 3px;
    width: 30px;
  }
  .text-logo-bpc {
    font-size: 20px;
    padding: 13px 0px 0px 0px;
  }
  .text-mail {
    font-size: 22px;
    padding: 20px 0px 0px 0px;
  }
  .text-mail-bpc {
    font-size: 20px;
    padding: 10px 0px 0px 0px;
  }
}
@media (min-width: 992px) {
  .news h1 {font-size: 26px}    
  .imgr {
    float: right;
    margin: 10px 0px 10px 20px;
    width: 20%;
  }
  .img-n {
    float: left;
    margin: 3px;
    width: 30px;
  }
  .imgl {
    float: left;
    margin: 10px 20px 10px 0px;
    width: 20%;
  }
  .aspect-ratio-1x1 {margin: 10px 10px; width: 100%;}
  .text-logo {
    font-size: 30px;
    padding: 20px 0px 0px 0px;
  }
  .text-logo-bpc {
    font-size: 19px;
    padding: 15px 0px 0px 0px;
  }
  .text-mail {
    font-size: 21px;
    padding: 30px 0px 0px 0px;
  }
  .text-mail-bpc {
    font-size: 20px;
    padding: 10px 0px 0px 0px;
  }
}
@media (min-width: 1200px) {
  .news h1 {font-size: 32px}
  .imgr {
    float: right;
    margin: 10px 0px 10px 20px;
    width: 15%;
  }
  .img-n {
    float: left;
    margin: 3px;
    width: 30px;
  }
  .imgl {
    float: left;
    margin: 10px 20px 10px 0px;
    width: 15%;
  }
  .aspect-ratio-1x1 {margin: 10px 10px; width: 100%;}
  .text-logo {
    font-size: 30px;
    padding: 22px 0px 0px 0px;
  }
  .text-logo-bpc {
    font-size: 20px;
    padding: 15px 0px 0px 0px;
  }
  .text-mail {
    font-size: 20px;
    padding: 30px 0px 0px 0px;
  }
  .text-mail-bpc {
    font-size: 20px;
    padding: 10px 0px 0px 0px;
  }
}

.height-picto {
  height: 35;
}
.height-logo {
  height: 200;
}
.height-icon {
  height: 60;
}
.height-text {
  height: 30;
  float: left;
  padding: 2px 6px 0px 0px;
}

.fon-white {
  background: #ffffff;
  border-radius: 4px;
}
.fon-white-50 {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}
.fon-white-70 {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
}
.fon-white-90 {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
}
.text-white {
  color: #ffffff;
}
.text-white:hover {
  color: #ededed;
  text-decoration: none;
}
.text-dark {
  color: #175ad2;
}
.text-dark:hover {
  color: #26334a;
  text-decoration: none;
}

.fon-grey {
  background: rgba(0, 0, 0, 0.05);
  /*padding: 4px;
  border-radius: 4px;*/
}

.fon-clear {
  /*padding: 4px;
  border-radius: 4px;*/
}

.bottom-menu {
  position: relative;
  padding: 5px 2px 5px 2px;
}
.btn-menu {
  position: relative;
  padding: 5px 2px 5px 2px;
}
.section-top {
  position: relative;
  padding: 5px 0px 0px 0px;
}
.section-top-bpc {
  position: relative;
  padding: 5px 0px 5px 0px;
}
.section-btn-bpc {
  position: relative;
  padding: 5px 2px 0px 2px;
}
.container-top {
  position: relative;
  padding: 5px 0px 0px 0px;
}
.txt-article {
  line-height: .95;
}
.text-black {
  color: #000000;
  
}
.btn {
  border-radius: 4px;
}

.img-thumbnail {
  border-radius: 20px;
}

.fon-h4 {
  background-color: #28a7e9;
  padding: 10px;
  color: #fff;
  font-size: 150%;
  border-radius: 4px;
}

.fon-h3 {
  background-color: #28a7e9;
  padding: 10px;
  color: #fff;
  font-size: 160%;
  border-radius: 4px;
}

.text-device {
  color: #26334a;
  font-size: 120%;
}

.text-big {
  text-transform: uppercase;
}
.fon-danger {
  color: #26334a;
}

.text-overlay {
position: absolute;
Bottom: -5%;
left: 50%;
transform: translate(-50%, -50%);
width: 84%;
background: rgba(40,167,233,.8);
border-radius: 3px;
padding: 3px;
color:#fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
line-height: .95;
}