.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body, h1.h2, h2.h4  {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}
h2 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;  
}
.rounded-2, .rounded-4 {
  border-radius: 0!important;
}
.rounded-bottom-2, .rounded-bottom-4 {
  border-bottom-right-radius: 0!important;
  border-bottom-left-radius: 0!important;
}
#header-admin li.dropdown ul {
  z-index:9999;
}
#brand .col div {
  width:fit-content;
  margin:auto;
}
div#brand {
  width:fit-content;
  margin:auto;
}
#logo {
  float:left;
}
#logo img {
  height:43.2px;
}
#brandname {
  font-size:1rem;
  font-weight:400;
  display:inline;
}
#hbrand {
  font-size:1rem;
  font-weight:400;
  margin-top:0!important;
}
#hbrand .fr {
  letter-spacing:0.035rem;
}
#hbrand .us {
  letter-spacing:0.015rem;
}
#navbarmenu span.pipelng {
  color:var(--bs-navbar-active-color);
}
#titlearea .dropdown {
  bottom:.2rem;
}
h2 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
h2.h2rea {
  /* position: relative; */
  top:0px;
  left:0px;
  padding-top:10px;
  /* padding-left:56px;
  padding-right:56px; */
  margin-top: 0!important;
  margin-bottom: .5rem!important;
  z-index:999;
}
h2.h2rea a {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-style: normal;
  /* letter-spacing:0.2rem; */
  /* mix-blend-mode:difference; */
  /* text-shadow:1px 1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000; */
  /* text-shadow:2px 2px 1px #000; */
  /* text-shadow:1px 1px 0px #000; */
}
.card-image p.card-date {
  text-shadow:1px 1px 0px #000;
}
.card-image div.image-card {
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.card-image div img {
  flex-shrink:0;
}
.card-image div img.image-paysage-card {
  height:100%;
}
.card-image div img.image-portrait-card {
  width:100%;
}
.card-image div img.hover {
  /* filter:brightness(80%); */
  opacity: 50%;
}
.card-image p {
  /* color:white; */
  font-size:1.2rem;
  font-weight: 500;
  /* position: relative; */
  top:0px;
  left:0px;
  padding:56px;
}
.card-image p.hover {
  z-index:998;
}
.text-truncate-2lines {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-3lines {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ratio-custom{
  --bs-aspect-ratio: 125%;
}
.ratio-custom .imgproject {
  width:100%;
}
.ratio-custom-paysage{
  --bs-aspect-ratio: 80%;
}
.ratio-custom-paysage .imgproject {
  height:100%;
}
.navbar-toggler:focus {
  box-shadow:0 0 0 0;
}
#navbarmenu li {
  text-align:left;
  margin-left:0;
  font-weight:400;
}
#navbarmenu a.nav-link {
  font-weight: 500;
}
#navbarmenu a.nav-link.active span,
#navbarmenu a.nav-link:hover span,
#navbarmenu span.nav-link a.active,
#navbarmenu span.nav-link a:hover {
  border-bottom:1px solid var(--bs-navbar-active-color);
}
#navbarmenu span.nav-link a:hover {
  color: var(--bs-navbar-active-color)!important;
}
#header-div {
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  height:35vh;
}
#header-image {
  flex-shrink:0;
  min-width:100%;
  min-height:100%;
}
#header-video {
  flex-shrink:0;
  min-width:100%;
  min-height:100%;
}
.image-text {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align:center;
  opacity: 0;
  width:90%
}
.image-text h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size:1.5rem;
  /* letter-spacing:0.2rem; */
  color:white;
  /* text-shadow:1px 1px 0px #000; */
}
.image-text p {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-style: normal;
  /* letter-spacing:0.2rem; */
  color:white;
  /* text-shadow:1px 1px 0px #000; */
}
/* .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link-dark.active {
  border-color: black;
  border-bottom: 0;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link-dark:not(.active):hover {
  border-color: #ddd;
  border-bottom: 1px solid black;
} */
/* XS */
@media (max-width: 575px) {
  .px-xs-0 {
      padding-left:0;
      padding-right:0;
  }
}
/* SM */
@media (min-width: 576px) {
  #header-div {
      height:80vh;
  }
  .image-text {
    top: 40%;
  }
  .rounded-2, .rounded-4 {
      border-radius: var(--bs-border-radius)!important;
  }
  .rounded-bottom-2, .rounded-bottom-4 {
      border-bottom-right-radius: var(--bs-border-radius) !important;
      border-bottom-left-radius: var(--bs-border-radius) !important;
  }
  .gx-sm-custom {
      --bs-gutter-x: 5rem;
  }
}
@media (max-width: 991px) {
  #navbarmenu {
    padding-top: 10px;
    padding-right: 15px;
    /* padding-left: 35px; */
  }
  #navbarmenu li.nav-item {
    text-align: right!important;
  }
}
/* LG */
@media (min-width: 992px) {
  #navbarmenu li {
      text-align:center;
      margin-left:0;
  }
  .navbar {
    height:75px;
    background-color:rgba(255, 255, 255, 0)!important;
  }
  .navbar:hover {
    /* background-color:rgba(255, 255, 255, 1)!important; */
  }
  #header-div {
    height:100vh;
  }
  .firstcontainer {
    margin-top:-75px;
  }
  .image-text {
    top: 40%;
  }
}