.template-hub2 #inner-container h1 {
  margin-bottom: 12px;
  color: #fff;
}

.template-hub2 #inner-container .subtitle {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 25px;
  font-weight: normal;
}

/* styles bouttons rond */
.page-content-nav {
  display: flex;
  justify-content: center;
  margin: 25px auto 0;
}
.page-content-nav .btn-rounded{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 270px;
  height: 40px;
  border-radius: 100px;
  background-color: #ffffff;
}
.page-content-nav .btn-rounded span{
  display: block;
  padding: 0 10px;
  font-size: 1rem; /* 16px */
  font-weight: bold;
  text-align: center;
}
.page-content-nav .btn-rounded + .btn-rounded{
  margin-left: 10px;
}
.page-content-nav .btn-rounded.orange{
  background: url('clientlib/img/arrow_orange@2x.png') no-repeat left 18px center;
  background-size: 6px 11px;
  border: solid 1px #fe5a00;
  color: #fe5a00;
}
.page-content-nav .btn-rounded.orange:hover{
  background: url('clientlib/img/arrow_white@2x.png') no-repeat left 22px center;
  background-size: 6px 11px;
  background-color: #fe5a00;
  opacity: 0.5;
  color: #fff;
}
.page-content-nav .btn-rounded.active.orange{
  background: url('clientlib/img/arrow_white@2x.png') no-repeat left 22px center;
  background-size: 6px 11px;
  background-color: #fe5a00;
  color: #fff;
}
.page-content-nav .btn-rounded.active.orange:hover{
  opacity: 1;
}
.page-content-nav .btn-rounded.blue{
  background: url('clientlib/img/arrow_blue@2x.png') no-repeat left 22px center;
  background-size: 6px 11px;
  border: solid 1px #005bbb;
  color: #005bbb;
}
.page-content-nav .btn-rounded.blue:hover{
  background: url('clientlib/img/arrow_white@2x.png') no-repeat left 22px center;
  background-size: 6px 11px;
  background-color: #005bbb;
  opacity: 0.5;
  color: #fff;
}
.page-content-nav .btn-rounded.active.blue{
  background: url('clientlib/img/arrow_white@2x.png') no-repeat left 22px center;
  background-size: 6px 11px;
  background-color: #005bbb;
  color: #fff;
}
.page-content-nav .btn-rounded.active.blue:hover{
  opacity: 1;
}

/* temp juste pour illustrer la maquette */
.page-content{
  margin-top: 25px;
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 5px, #f6f6f6 5px, #f6f6f6 10px);
  height: 500px;
}

@media screen and (max-width: 850px) {
  #menuPageNivOne a {
    width: 240px;
  }

  .page-content-nav .btn-rounded{
    width: inherit;
    height: inherit;
  }

  .page-content-nav .btn-rounded + .btn-rounded{
    margin-left: 0px;
  }

  .page-content-nav .btn-rounded.active.blue,.page-content-nav .btn-rounded.blue {
    background-size: 0;
  }

  .energyOptionTabChoice .offre-detail{
    margin: 0 0 20px;
  }
}

@media screen and (max-width: 1165px) {
  #menuPageNivOne,
  #menuPageNivTwo {
    margin: 0 20px;
  }
}

@media screen and (max-width: 1024px) {
  /* canceling some existing css behaviors in clientlibs*/
  #menuPageNivOne {
    padding: 0;
  }
  /* canceling some existing css behaviors in clientlibs*/
  #menuPageNivTwo ul {
    padding-left: 0 !important;
    /* !important was needed because it was used in the clientlibs css*/
  }

}