html{
  font-size:16px;
}

body{
  font-family:
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;

  font-size:1.05rem;
  line-height:1.75;
  color:#454545;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


h1{
  font-size:3rem;
  font-weight:700;
  line-height:1.15;
  margin-bottom:.8rem;
  color:#133178;
}

h2{
  font-size:2.2rem;
  font-weight:700;
  line-height:1.25;
  margin-bottom:2rem;
  color:#133178;
}

h3{
  font-size:1.55rem;
  font-weight:600;
  margin-bottom:.8rem;
}

h4{
  font-size:1.25rem;
  font-weight:600;
}

p{
  font-size:1.08rem;
  line-height:1.85;
  margin:0 0 1.5rem;
}

ul,
ol{
    margin:0 0 1.5rem 1.5rem;
}

li{
    margin-bottom:.5rem;
    line-height:1.7;
}

.major{
  margin-bottom:3rem;
}

.major h2{
  margin-bottom:.5rem;
}

article img{

  display:block;

  max-width:100%;

  height:auto;

  border-radius:10px;

  box-shadow:
      0 15px 40px rgba(0,0,0,.12);

  padding: 10px 20px;
}


a{

  transition:.25s;

  color:#133178;

  text-decoration:none;
}

a:hover{

  color:#3a78d4;
}

#titleBar {
  background: white !important;
}
/** mobile logo */
#titleBar .title {
  width: 215px;
  height: 34px;
  background: url(/media/biothermica-logo-and-text-360x57.png) no-repeat;
  background-size: 215px 34px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}
@media (min-width: 980px) {
  #titleBar {
    height: 70px;
  }
  #titleBar .title {
    width: 288px;
    height: 47px;
    background: url(/media/biothermica-logo-and-text-360x57.png) no-repeat;
    background-size: 288px 47px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 11px;
  }
  #titleBar .toggle:before {
    font-size: 40px;
    padding: 15px 40px;
    color: #133178;
  }
}
/** desktop logo */
#logo {
  width: 360px;
  height: 57px;
  display: block;
  background: url(/media/biothermica-logo-and-text-360x57.png) no-repeat;
}
/** header taller to accomodate logo */
#header .inner {
  height: 120px;
}
#nav {
  top: 60px !important;
  /** center nav */
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto !important;
  width: fit-content !important;
}
@media (min-width: 981px) {
}
/** No shadow on nav */
#nav a {
  text-shadow: none !important;
}
/** Apply only to top level */
#nav > ul > li > a {
  color: #C5DCE4 !important;
}
#header-wrapper.homepage-header {
  background: url('/media/air-1-bg.jpg');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0 !important;
}
#header-wrapper.homepage-header .header-wrapper-filter {
  backdrop-filter: blur(5px) brightness(50%) !important;
  padding: 44px 0 0 0 !important;
}
/** Sinon le menu va sur deux lignes */
#nav > ul > li > a, #nav > ul > li > span {
  padding-left: 0.1em;
  padding-right: 0.1em;
}

#nav > ul > li > a, #nav > ul > li > span {
  letter-spacing: 0em;
  font-size: 0.8em;
}
@media (min-width: 1172px) {
  #nav > ul > li > a, #nav > ul > li > span {
    padding-left: 0.3em;
    padding-right: 0.3em;
    letter-spacing: 0.075em;
    font-size: 0.95em;
  }
}
.my-icon {
  font-size: 2.5em;
}
.banner-image-wrapper {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.title-wrapper {
  padding: 50px 0 0 0;
  position: relative;
  z-index: 2;
}
.content-wrapper {
  padding: 0 0 50px 0;
  position: relative;
  z-index: 2;
}
.hexagon {
  width: 211.2px;
  height: 240px;
  background: #f6f9fa;
  clip-path: polygon(
    50% 100%,
    0% 75%,
    0% 25%,
    50% 0%,
    100% 25%,
    100% 75%
  );
}
.my-container-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
#footer-wrapper {
  background-repeat: no-repeat;
  background-image: linear-gradient(rgba(0,0,0,.95), rgba(0,0,0,.6)), url('/media/flame.png');
  background-size: auto;
  background-position: bottom left;
}
#main-wrapper {
  background-repeat: no-repeat;
  background-image: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,0)), url('/media/flame-light-blue.png');
  background-size: 350px 553.8px;
  background-position: bottom left;
}

.wrapper.style3 {
  display: none;
}

.wrapper.style3 {
  display: none;
}

@keyframes fade{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

#footer-wrapper {
  padding: 2em 0 2em 0;
}

.wrapper {
  padding: 2.5em 0 1.5em 0;
}

#copyright {
  padding: 3em 0 0 0;
}

*{
  box-sizing:border-box;
}

body {
  background: unset;
}

body:not(.homepage) #page-wrapper {
  background: #303238 url("images/bg01.png");
  min-height: 100vh;
  display: grid;
}

.banner-image-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.banner-image-wrapper img {
  display: block;
  width: 100%;
  /* Keeps aspect ratio */
  height: auto;
  /* Optional: fills the container if you set a height */
  object-fit: cover;
}

#header-wrapper {
  padding: 0;
}

dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

dt {
  font-weight: bold;
}

dl.contact dd {
  margin: 0;
}

#navPanel .link {
  display: flex;
  height: auto;
  min-height: 44px;
}

#navPanel {
  background: #133178 !important;
}

.dropotron{
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.banner-image-wrapper{
  margin-bottom:2rem;
}

#footer p,
#footer li{
  line-height:1.7;
}


article{
  padding-bottom:2rem;
}


#footer h2{
  margin-bottom:1rem;
  font-size:1.2rem;
  color:white;
}

#footer p{
  color: rgb(172, 178, 191);
  font-size: 1.15rem;
}

@media(max-width:768px){

  h1{
    font-size:2.2rem;
  }

  h2{
    font-size:1.8rem;
  }

  h3{
    font-size:1.4rem;
  }

  body{
    font-size:1rem;
  }

  p{
    font-size:1rem;
    line-height:1.75;
  }

}

*{
  transition:
    color .2s,
    background-color .2s,
    border-color .2s;
}

table{
  width:100%;
  border-collapse:collapse;
}

td,
th{
  padding:14px;
  border-bottom:1px solid #ddd;
}

article{
  font-size:1.06rem;
  letter-spacing:.01em;
}

p{
  font-size: 1.3rem;
}

#navPanel .link:hover {
  background-color: #133178;
  color: #fff;
}

@media screen and (max-width: 10000px) {
  #navPanel .indent-1 {
      display: inline-block;
      width: unset;
  }
}

#navPanel .link.depth-1 {
  padding-left: 20px;
  padding-top: 20px;
  margin-left: 10px;
  line-height: 25px;
}

@media screen and (max-width: 10000px) {
  #navPanel .depth-0 {
    padding-top: 10px;
  }
}

/* Tablet */
@media screen and (max-width: 992px) {

  h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 2rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.45rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  p,
  li {
    font-size: 1.1rem;
    line-height: 1.8;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {

  html {
    font-size: 15px;
  }

  h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: .6rem;
  }

  h2 {
    font-size: 1.7rem;
    line-height: 1.3;
    margin-bottom: 1.2rem;
  }

  h3 {
    font-size: 1.35rem;
  }

  h4 {
    font-size: 1.15rem;
  }

  p,
  li {
    font-size: 1rem;
    line-height: 1.7;
  }

  ul,
  ol {
    margin-left: 1.2rem;
  }

  #footer p {
    font-size: 1rem;
  }
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================
   Mobile (767px and below)
========================== */
@media screen and (max-width: 767px) {

  #footer-wrapper {
      padding: 3em 20px 3em 20px;
  }

  .wrapper {
    padding: 3em 20px 3em 20px;
  }

  .splide__slide {
    padding: 3em 0 6em 0;
  }

  #banner, .splide__list {
    min-height: 0px !important;
  }

  .button,
  input[type="submit"],
  input[type="button"],
  button {
      padding: 8px 18px;
      font-size: 0.9rem;
  }

  .banner-image-wrapper {
    height: 220px;
  }


  h2, h3, h4, h5, h6 {
      font-size: 10pt !important;
  }
}