@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
:root {
  --global-font-family: 'Montserrat', sans-serif;
  --global-font-size: 100%;
  --global-font-weight-normal: 400;
  --global-font-weight-bold: 700;
  --global-max-width: 1200px;
  --global-line-height: 1.4;
  --global-margin: 1rem;
  --global-padding: 1rem;
  
  /*
   * Base colors
  */
  
  --primary-color: #057823; /* Ortis base green */
  --primary-color-light: #e5f1e8;
  --secondary-color: #d60020; /* Ortis base red */
  --primary-color-hover: #005516;
  --secondary-color-hover: #9b0219;
  --white: #ffffff;
  --black: #000000;
  
  /*
   * Products specific colors
  */
  
  --immuno-primary-color: #006eaf; /* immuno */
  --immuno-primary-color-hover: #004f7e;
  --immuno-primary-color-light: #edf6ff;
  
  --gastrointestinale-primary-color: #8cbe0f; /* gastrointestinale */
  --gastrointestinale-primary-color-hover: #6c9609;
  
  --gastrointestinale-secondary-color: #fa9200;
  --gastrointestinale-secondary-color-hover: #df7409;
  --gastrointestinale-secondary-color-light: #fbf2e6;
  
  --detoxine-primary-color: #66c1d5; /* detoxine */
  --detoxine-primary-color-hover: #34a9c2;
  --detoxine-primary-color-light: #e5f5fd;
  
  --microbiota-primary-color: #4c8482;
  --microbiota-primary-color-hover: #306a68;
  --microbiota-primary-color-light:;
  
  /* OrtisWomen colors */
  
  --ortiswomen-primary-color: #f9a21b;
  --ortiswomen-primary-color-hover : #f9911b;
  --ortiswomen-primary-color-light: #feecd0;
}

html,
body {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--white);
  color: var(--black);
  font-family: var(--global-font-family);
  font-size: var(--global-font-size);
  font-style: normal;
  font-weight: var(--global-font-weight-normal);
  line-height: var(--global-line-height);
  overflow-x: hidden;
}

body {
  padding: 0 23px 23px 23px; /* 1/6 of logo's height */
}

html {
  scroll-behavior: smooth;
}

.row-fluid [class*="span"] {
  min-height: auto;
}

@media screen and (min-width: 768px) {
  body {
    padding: 0 2.875rem 2.875rem 2.875rem; /* 1/3 of logo's height */
  }
}

strong {
  font-weight: var(--global-font-weight-bold);
}

em {
  font-style: italic;
}

p {
  font-size: 1rem;
  line-height: var(--global-line-height);
  margin-bottom: calc(var(--global-padding) * 2);
}

a             { color: var(--primary-color); }
.secondary a  { color: var(--secondary-color); }
.white a      { color: var(--white); }
.black a      { color: var(--black); }

.immuno-link-primary a,
a.immuno-link-primary {
  color: var(--immuno-primary-color);
  font-weight: var(--global-font-weight-bold);
}

.gastrointestinale-link-primary a,
a.gastrointestinale-link-primary {
  color: var(--gastrointestinale-primary-color);
  font-weight: var(--global-font-weight-bold);
}

.gastrointestinale-link-secondary a,
a.gastroinstestinale-link-secondary {
  color: var(--gastrointestinale-secondary-color);
  font-weight: var(--global-font-weight-bold);
}

.detoxine-link-primary a,
a.detoxine-link-primary {
  color: var(--detoxine-primary-color);
  font-weight: var(--global-font-weight);
}

.ortiswomen-link-primary a,
a.ortiswomen-link-primary {
  color: var(--ortiswomen-primary-color);
  font-weight: var(--global-font-weight-bold);
}

.microbiota-link-primary a,
a.microbiota-link-primary {
  color: var(--microbiota-primary-color);
  font-weight: var(--global-font-weight-bold);
}

a:hover {
  text-decoration: none;
}

.iframe {
  width: 100%;
  max-width: var(--global-max-width);
}

/*
 * Helpers 
*/

.text-center {
  text-align: center;
}

.text-contain {
  max-width: 680px;
  margin: 0 auto !important;
  float: none !important;
}

.lead {
  font-size: 1.4rem;
}

.small {
  font-size: 0.8rem;
}

.uppercase {
  text-transform: uppercase;
}

/* Margins */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--global-margin); }
.mt-2 { margin-top: calc(var(--global-margin) * 2); }
.mt-3 { margin-top: calc(var(--global-margin) * 5.5); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--global-margin); }
.mb-2 { margin-bottom: calc(var(--global-margin) * 2); }
.mb-3 { margin-bottom: calc(var(--global-margin) * 5.5); }

/* Paddings */

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--global-margin); }
.pt-2 { padding-top: calc(var(--global-margin) * 2); }
.pt-3 { padding-top: calc(var(--global-margin) * 5.5); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--global-margin); }
.pb-2 { padding-bottom: calc(var(--global-margin) * 2); }
.pb-3 { padding-bottom: calc(var(--global-margin) * 5.5); }

/* Colors */

.white, .white h1, .white h2, .white h3, .white h4 { color: var(--white); }
.black, .black h1, .black h2, .black h3, .black h4 { color: var(--black); }

/*
 * Headlines
*/

h1,
h2,
h3,
h4 {
  line-height: 1.1;
  font-weight: var(--global-font-weight-bold);
  color: var(--primary-color);
  margin-bottom: calc(var(--global-padding) * 2);
}

h1 { font-size: 2.5rem !important; margin-top: 1rem; }
h2 { font-size: 1.8rem; margin-top: 0.8rem; }
h3 { font-size: 1.5rem; margin-top: 1rem; }
h4 { font-size: 1.125rem; margin-top: 1rem; }

@media screen and (min-width: 768px) {
  h1 { font-size: 3rem; margin-top: 1rem; }
  h2 { font-size: 2.2rem; margin-top: 0.8rem; }
  h3 { font-size: 1.8rem; margin-top: 1rem; }
  h4 { font-size: 1.125rem; margin-top: 1rem; }
}

.mb-0 h1,
.mb-0 h2,
.mb-0 h3,
.mb-0 h4 {
  margin-bottom: 0;
}

.mb-1-headline h2 {
  margin-bottom: var(--global-margin);
}

/* Headlines specific colors */

.immuno-headline h1,
.immuno-headline h2,
.immuno-headline h3,
.immuno-headline h4 {
  color: var(--immuno-primary-color);
}

.gastrointestinale-headline h1,
.gastrointestinale-headline h2,
.gastrointestinale-headline h3,
.gastrointestinale-headline h4 {
  color: var(--gastrointestinale-primary-color);
}

.gastrointestinale-headline-secondary h1,
.gastrointestinale-headline-secondary h2,
.gastrointestinale-headline-secondary h3,
.gastrointestinale-headline-secondary h4 {
  color: var(--gastrointestinale-secondary-color);
}

.detoxine-headline h1,
.detoxine-headline h2,
.detoxine-headline h3,
.detoxine-headline h4 {
  color: var(--detoxine-primary-color);
}

.ortiswomen-headline h1,
.ortiswomen-headline h2,
.ortiswomen-headline h3,
.ortiswomen-headline h4 {
  color: var(--ortiswomen-primary-color);
}

.microbiota-headline h1,
.microbiota-headline h2,
.microbiota-headline h3,
.microbiota-headline h4 {
  color: var(--microbiota-primary-color);
}

.pre-title {
  text-transform: uppercase;
  font-weight: var(--global-font-weight-bold);
}

/*
 * Buttons
*/

/* Base button */
.button a, /* selector for button component inside the editor */
a.button { /* selector for button created as CTA with the Hubspot tool */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  
  margin-bottom: var(--global-margin);
  padding: var(--global-margin) calc(var(--global-margin) * 2);
  
  line-height: 1;
  text-align: center;
  font-size: calc(var(--global-font-size));
  font-weight: 700;
  text-transform: uppercase;
  
  background-color: var(--primary-color);
  color: var(--white);
  border: 2px solid var(--primary-color);
  text-decoration: none;
  
  transition: 0.3s;
}

.button a:focus,
.button a:hover,
a.button:focus,
a.button:hover {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover)
}

@media screen and (max-width: 768px) {
  .button a {
    font-size: var(--global-font-size);
  }
}

/* Base button - A/B test link version */
.is-link .button a,
.is-link a.button {
  padding: 0;
  text-align: left;
  font-weight: 400;
  text-transform: none;
  
  background-color: transparent;
  color: var(--primary-color);
  border: none;
  text-decoration: underline;
}

.is-link .button a:focus,
.is-link .button a:hover,
.is-link a.button:focus,
.is-link a.button:hover {
  background-color: transparent;
  border-color: none;
  text-decoration: none;
}

.is-link.gastrointestinale--secondary a.hs-button {
  color: var(--gastrointestinale-secondary-color);
}

.is-link.microbiota--primary a {
  color: var(--microbiota-primary-color);
}

/* Base button - Secondary */

.button.button--secondary a {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.button.button--secondary a:focus,
.button.button--secondary a:hover {
  background-color: var(--secondary-color-hover);
  border-color: var(--secondary-color-hover);
}

/* Base button - White */

.button.button--white a,
a.button.button--white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--primary-color);
}

.button.button--white a:focus,
.button.button--white a:hover,
a.button.button--white:focus,
a.button.button--white:hover {
  background-color: var(--primary-color-hover);
  border-color: var(--white);
  color: var(--white);
}

/* Base button - Hollow */

.button.button--hollow a {
  background-color: transparent;
  border: solid 2px var(--primary-color);
  color: var(--primary-color);
}

.button.button--hollow a:focus,
.button.button--hollow a:hover {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

/* Base button - Hollow secondary */

.button.button--hollow-secondary a {
  background-color: transparent;
  border: solid 2px var(--secondary-color);
  color: var(--secondary-color);
}

.button.button--hollow-secondary a:focus,
.button.button--hollow-secondary a:hover {
  background-color: var(--secondary-color);
  color: var(--white);
  border-color: var(--secondary-color);
}

/* Base button - Hollow white */

.button.button--hollow-white a {
  background-color: transparent;
  border: solid 2px var(--white);
  color: var(--white);
}

.button.button--hollow-white a:focus,
.button.button--hollow-white a:hover {
  background-color: var(--white);
  color: var(--primary-color);
  border-color: var(--white);
}

/* Immuno button - Primary */

.button.button_immuno--primary a {
  background-color: var(--immuno-primary-color);
  border-color: var(--immuno-primary-color);
}

.button.button_immuno--primary a:focus,
.button.button_immuno--primary a:hover {
  background-color: var(--immuno-primary-color-hover);
  border-color: var(--immuno-primary-color-hover);
}

/* Immuno button - White */

.button.button_immuno--white a,
a.button.button_immuno--white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--immuno-primary-color);
}

.button.button_immuno--white a:focus,
.button.button_immuno--white a:hover,
a.button.button_immuno--white:focus,
a.button.button_immuno--white:hover {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

/* Immuno button - Hollow */

.button.button_immuno--hollow a,
a.button.button_immuno--hollow {
  background-color: var(--white);
  border-color: var(--immuno-primary-color);
  color: var(--immuno-primary-color);
}

.button.button_immuno--hollow a:focus,
.button.button_immuno--hollow a:hover,
a.button.button_immuno--hollow:focus,
a.button.button_immuno--hollow:hover {
  background-color: var(--immuno-primary-color);
  border-color: var(--immuno-primary-color);
  color: var(--white);
}

/* Gastrointestinale button - Primary */

.button.button_gastrointestinale--primary a {
  background-color: var(--gastrointestinale-primary-color);
  border-color: var(--gastrointestinale-primary-color);
}

.button.button_gastrointestinale--primary a:focus,
.button.button_gastrointestinale--primary a:hover {
  background-color: var(--gastrointestinale-primary-color-hover);
  border-color: var(--gastrointestinale-primary-color-hover);
}

/* Gastrointestinale button - White */

.button.button_gastrointestinale--white a,
a.button.button_gastrointestinale--white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--gastrointestinale-secondary-color);
}

.button.button_gastrointestinale--white a:focus,
.button.button_gastrointestinale--white a:hover,
a.button.button_gastrointestinale--white:focus,
a.button.button_gastrointestinale--white:hover {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

/* Gastrointestinale button - Secondary */

.button.button_gastrointestinale--secondary a {
  background-color: var(--gastrointestinale-secondary-color);
  border-color: var(--gastrointestinale-secondary-color);
}

.button.button_gastrointestinale--secondary a:focus,
.button.button_gastrointestinale--secondary a:hover {
  background-color: var(--gastrointestinale-secondary-color-hover);
  border-color: var(--gastrointestinale-secondary-color-hover);
}

/* Gastrointestinale button secondary - White */

.button.button_gastrointestinale--secondary--white a,
a.button.button_gastrointestinale--secondary--white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--gastrointestinale-secondary-color);
}

.button.button_gastrointestinale--secondary--white a:focus,
.button.button_gastrointestinale--secondary--white a:hover,
a.button.button_gastrointestinale--secondary--white:focus,
a.button.button_gastrointestinale--secondary--white:hover {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

/* Gastrointestinale button secondary - Hollow */

.button.button_gastrointestinale--secondary--hollow a,
a.button.button_gastrointestinale--secondary--hollow {
  background-color: transparent;
  border-color: var(--gastrointestinale-secondary-color);
  color: var(--gastrointestinale-secondary-color);
}

.button.button_gastrointestinale--secondary--hollow a:focus,
.button.button_gastrointestinale--secondary--hollow a:hover,
a.button.button_immuno--hollow:focus,
a.button.button_immuno--hollow:hover {
  background-color: var(--gastrointestinale-secondary-color);
  border-color: var(--gastrointestinale-secondary-color);
  color: var(--white);
}

/* Detoxine button - Primary */

.button.button_detoxine--primary a {
  background-color: var(--detoxine-primary-color);
  border-color: var(--detoxine-primary-color);
}

.button.button_detoxine--primary a:focus,
.button.button_detoxine--primary a:hover {
  background-color: var(--detoxine-primary-color-hover);
  border-color: var(--detoxine-primary-color-hover);
}

/* Detoxine button - White */

.button.button_detoxine--white a,
a.button.button_detoxine--white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--detoxine-primary-color);
}

.button.button_detoxine--white a:focus,
.button.button_detoxine--white a:hover,
a.button.button_detoxine--white:focus,
a.button.button_detoxine--white:hover {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

/* Detoxine button - Hollow */

.button.button_detoxine--hollow a,
a.button.button_detoxine--hollow {
  background-color: transparent;
  border-color: var(--detoxine-primary-color);
  color: var(--detoxine-primary-color);
}

.button.button_detoxine--hollow a:focus,
.button.button_detoxine--hollow a:hover,
a.button.button_detoxine--hollow:focus,
a.button.button_detoxine--hollow:hover {
  background-color: var(--detoxine-primary-color);
  border-color: var(--detoxine-primary-color);
  color: var(--white);
}

/* OrtisWomen button - Primary */

.button.button_ortiswomen--primary a {
  background-color: var(--ortiswomen-primary-color);
  border-color: var(--ortiswomen-primary-color);
}

.button.button_ortiswomen--primary a:focus,
.button.button_ortiswomen--primary a:hover {
  background-color: var(--ortiswomen-primary-color-hover);
  border-color: var(--ortiswomen-primary-color-hover);
}

/* Microbiota button - Primary */
.button.button_microbiota--primary a {
  background-color: var(--microbiota-primary-color);
  border-color: var(--microbiota-primary-color);
}

.button.button_microbiota--primary a:focus,
.button.button_microbiota--primary a:hover {
  background-color: var(--microbiota-primary-color-hover);
  border-color: var(--microbiota-primary-color-hover);
}

/* Microbiota button - White */
.button.button_microbiota--white a,
a.button.button_microbiota--white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--microbiota-primary-color);
}

.button.button_microbiota--white a:focus,
.button.button_microbiota--white a:hover,
a.button.button_microbiota--white:focus,
a.button.button_microbiota--white:hover {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

/* Microbiota button - White */

/*
 * Header
*/

.header,
.logo {
  height: 23px;
  min-height: 23px;
}

@media screen and (min-width: 768px) {
  .header,
  .logo {
    height: 46px;
    min-height: 46px;
  }
}

.logo img {
  position: absolute;
  left: calc(50% - 110px);
}

/*
 * Hero Banner
*/

.hero-banner {
  display: flex;
  align-items: center;
  background-position: bottom;
}

@media screen and (min-width: 768px) {
  .hero-banner {
    min-height: 520px !important;
  }
}

@media screen and (min-width: 1600px) {
 .hero-banner {
   min-height: 700px !important;
  } 
}

/*
 * Container
*/

.container {
  position: relative;
  max-width: 1200px;
  float: none !important;
  margin: 0 auto !important;
  padding: calc(var(--global-padding) * 4) var(--global-padding) calc(var(--global-padding) * 4) var(--global-padding);
}

.container-wrapper {
  position: relative;
}

/* Base Ortis background color */
.container-wrapper_base { background-color: var(--primary-color); }
.container-wrapper_base--light {  background-color: var(--primary-color-light); }

/* Immuno background color */
.container-wrapper_immuno { background-color: var(--immuno-primary-color); }
.container-wrapper_immuno--light { background-color: var(--immuno-primary-color-light); }

/* Gastrointestinale background color */
.container-wrapper--gastrointestinale { background-color: var(--gastrointestinale-primary-color); }

/* Gastrointestinale background color secondary */
.container-wrapper-gastrointestinale-secondary { background-color: var(--gastrointestinale-secondary-color); }
.container-wrapper_gastrointestinale-secondary--light { background-color: var(--gastrointestinale-secondary-color-light); }

/* Detoxine background color */
.container-wrapper_detoxine { background-color: var(--detoxine-primary-color); }
.container-wrapper_detoxine--light { background-color: var(--detoxine-primary-color-light); }

/* OrtisWomen background color */
.container-wrapper_ortiswomen { background-color: var(--ortiswomen-primary-color); }
.container-wrapper_ortiswomen--light { background-color: var(--ortiswomen-primary-color-light); }

/* Microbiota background color */
.container-wrapper_microbiota { background-color: var(--microbiota-primary-color); }

.container-wrapper.has-decoration-top .container {
  padding-top: calc(10% + (var(--global-padding) * 4));
}

.container-wrapper.has-decoration-top:before {
  content: '';
  background-image: url(https://6436117.fs1.hubspotusercontent-na1.net/hubfs/6436117/ITA/Immuno/white-decoration-top.png);
  background-size: contain;
  background-color: transparent;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}

.container.has-decoration-bottom {
  padding-bottom: 0;
}

.container.is-first {
  padding-top: 0;
}

@media screen and(max-width: 768px) {
  .plants-container {
    margin-bottom: 0 !important;
  }
}

/*
 * Labels
*/

span.label {
  display: inline-block;
  font-size: 0.8em;
  padding: calc(var(--global-padding) / 2) var(--global-padding);
  font-weight: var(--global-font-weight-bold);
}

.label.label--purple  { background-color: #752884; color: var(--white); }
.label.label--red     { background-color: var(--secondary-color); color: var(--white); }
.label.label--green   { background-color: #8ebc0b; color: var(--white); }

/* Reverse label style */

.label-reverse .widget-type-text {
  display: flex;
  font-weight: 700;
  text-transform: uppercase;
}

.label-reverse .widget-type-text:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 20px;
  margin-right: 1rem;
}

.label-reverse.label--red      { color: var(--secondary-color); }
.label-reverse.label--red .widget-type-text:before { background-color: var(--secondary-color); }

.label-reverse.label--purple   { color: #752884; }
.label-reverse.label--purple .widget-type-text:before { background-color: #752884; }



/*
 * Icon List
*/

ul.icon-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin-top: calc(var(--global-margin) * 2);
}

ul.icon-list li img {
  width: 100%;
}

ul.icon-list.icon-list--two-column   { max-width: 220px; }
ul.icon-list.icon-list--three-column { max-width: 320px; }
ul.icon-list.icon-list--four-column  { max-width: 420px; }
ul.icon-list.icon-list--five-column  { max-width: 520px; }

/*
 * Accordion
*/

.custom-accordion .accordion .accordion_group {
  background-color: transparent;
  border-bottom: solid 1px black;
  padding-left: 0;
}

.custom-accordion .accordion .accordion_header {
  font-size: calc(var(--global-font-size) / 1.1);
  line-height: 1.2;
  font-weight: var(--global-font-weight-bold);
  color: var(--primary-color);
  padding-left: 0;
}

.custom-accordion-lead .accordion .accordion_header {
  font-size: calc(var(--global-font-size) * 1.5);
  padding-left: 0;
}

.custom-accordion .accordion .accordion_header .accordion_icon {
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: 0;
}

.custom-accordion--immuno .accordion .accordion_header { color: var(--immuno-primary-color); }
.custom-accordion--immuno .accordion .accordion_header .accordion_icon { background-color: var(--immuno-primary-color); }

.custom-accordion--detoxine .accordion .accordion_header { color: var(--detoxine-primary-color); }
.custom-accordion--detoxine .accordion .accordion_header .accordion_icon { background-color: var(--detoxine-primary-color); }

.custom-accordion--gastrointestinale .accordion .accordion_header { color: var(--gastrointestinale-secondary-color) }
.custom-accordion--gastrointestinale .accordion .accordion_header .accordion_icon { background-color: var(--gastrointestinale-secondary-color) }

.custom-accordion--microbiota .accordion .accordion_header { color: var(--microbiota-primary-color); }
.custom-accordion--microbiota .accordion .accordion_header .accordion_icon { background-color: var(--microbiota-primary-color); }

@media screen and (min-width: 481px) {
  .full-width-form fieldset {
    max-width: 1200px !important;
    margin: 0 auto;
  }
  
  .full-width-form fieldset .input input {
    width: 90%;
    margin-bottom: 1rem;
  }
}

.row-fluid .button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.row-fluid .button-container--product {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.row-fluid .button-container--product .container--left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .row-fluid .button-container {
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
  }
/* Short YouTube gauche : réglage safe */
#video-short-left iframe {
  width: 360px !important;
  height: 640px !important;
  max-width: 100%;
  border: 0;
  display: block;
  margin: 0 auto;
}

#video-short-left .hs-video-widget {
  text-align: center;
}