:root {
  --main-color: #3f7b99;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}


/* HEADER */

.wh_header {
  background-image: none;
  background-color: var(--main-color);
  padding: 2em 0;
}

@media only screen and (min-width: 768px) {
  .wh_topic_page .wh_header {
    padding: 2em 0;
  }
}

/* LOGO */
.wh_logo img {
  width: 200px;
}

.wh_publication_title {
  display: none;
}

/* SEARCH BAR */
.wh_search_button {
  height: 100%;
}


/* BREADCRUMB */

.wh_breadcrumb ol .active a {
  color: var(--main-color);
  font-weight: bold
}

/* MENU GAUCHE */

.wh_publication_toc .active > .topicref a {
  color: var(--main-color);
  font-weight: bold;
}

/* LINKS */
a,
a:hover {
  color: var(--main-color);
  font-weight: bold;
}

/* TILES */
.wh_tile {
  border-radius: 6px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}



/* FOOTER */

.wh_footer {
  background-image: none;
  background-color: var(--main-color);
  padding: 2em 0;
}


/* CAROUSEL */
/* index.html */
#loadedCarousel {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* https://flickity.metafizzy.co/style */

.carousel,
.main-carousel {
  height: 60vh;
  max-height: 900px;
  aspect-ratio: 16/9 !important;
}

.carousel-cell {
  width: 100%;
  max-width: 1600px;
  margin: 10px;
  aspect-ratio: 16/9 !important;
}

/* move page dots into carousel */
.flickity-page-dots {
  top: 80%;
}













/* footer */

footer {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

div.footer-container {
  margin-left: unset !important;
  margin-right: unset !important;
}

div.copyright_info {
  text-align: center;
}






/* useful classes */

.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center,
.flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-top {
  display: flex;
  justify-content: center;
  align-items: top;
}

table {
  width: 100% !important;
}

.no-margin-top {
  margin-top: 0px;
}

.no-margin-top-bottom {
  margin-top: 0px;
  margin-bottom: 0px;
}

.no-margin-bottom {
  margin-bottom: 0px;
}

.background-transparent {
  background: transparent;
}



.border-bottom-thin {
  border-bottom: 1px solid black;
}


.border-left-thin {
  border-left: 1px solid black;
}