/**
 * @file
 * Global rules for the PF Page
 *
 * This stylesheet is used to custom the global "Pierre Fabre expertise" across all the different PFHC websites.
 * Change only the color, the grid or the fonts variables at the beginning of the file.
 */



/**
 * Drupal Classes
 */

/**
 * Hero
 */
 .page__header--with-background{
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding:1.5em 0em;
  min-height:250px;
}
.page__header-title h1{
  color: #fff;
}

@media screen and (min-width:550px) {
  .page__header--with-background{
    background-position: center top 33%;
    background-size: 145%;
  }
}
@media screen and (min-width:750px) {
  .page__header{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .page__header--with-background{
    padding:1.5em 0em;
  }
}
@media screen and (min-width:1250px) {
  .page__header--with-background{
    min-height:330px;
    padding-top:4rem;
  }
}
@media screen and (min-width:1550px) {
  .page__header--with-background{
    background-size: 100%;
  }
}
/* Hero -- Title -- Hero */
@media screen and (min-width:750px) {
  .page__header-title h1{
    font-size: 2rem;
  }
}
@media screen and (min-width:1000px) {
  .page__header-title h1{
    font-size: 2.5rem;
  }
}
@media screen and (min-width:1250px) {
  .page__header-title h1{
    font-size: 2.875rem;
  }
}

/* Hero -- Breadcrumbs -- Hero */
.page__header-breadcrumbs{
  margin-top:0.5rem;
}
.page__header-breadcrumbs li{
  font-size: 1rem;
  font-family: 'Oceania', sans-serif;
  font-weight: 300;
  font-display: swap;
}
.page__header-breadcrumbs li,
.page__header-breadcrumbs a{
  color:#fff;
}
@media screen and (min-width:750px) {
  .page__header-breadcrumbs{
    margin-top:1rem;
  }
}


/* Color variables */
.pf-main-color,
.pf-main-color-list li:before{
  color:#008142;
}
.pf-main-color-border{
  border-color:#008142;
}
.pf-main-color-background{
  background-color:#008142;
}
.pf-global-page .pf-cta a{
  background:#008142;
  color:#fff;
  border:2px solid #008142;
  font-weight: 700;
}
.pf-global-page .pf-cta a:before{
  content: none;
}
.pf-global-page .pf-cta a:hover{
  transform: translateY(-3px);
  box-shadow: 0px 10px 15px rgb(134 184 226 / 20%);
}
/* Grid variables */
.pf-grid-row{
  max-width: 1150px;
  margin: 0 auto;
  padding:0 1rem;
}
@media all and (min-width: 750px) {
  .pf-grid-row{
    width: 85%;
    padding:0;
  }
}

/* Grid variables */
.pf-grid-row--s{
  max-width:595px;
  padding:0 15px;
  width:100%;
  margin:0 auto;
}

/* Font variables */
.pf-hero__title, .pf-subtitle{
  font-family: 'Oceania', sans-serif;
}
.pf-global-page{
  font-family: 'Oceania', sans-serif;;
}
.pf-stats__number-inner{
  font-family: 'Oceania', sans-serif;
}
.pf-subtitle{
  color:#000;
}

/* MAIN */
.pf-global-page{
  font-size:17px;
  line-height:1.35;
  background-color:#fff;
}
.pf-global-page ul{
  font-size:17px;
  line-height:1.35;
  list-style: none;
  padding-left:2rem;
}
.pf-global-page ul li{
  position: relative;
  padding:0 0 0.75rem;
}
.pf-global-page ul li:before{
  content:'◯ ';
  position: absolute;
  left:-2rem;
  top:0;
}
.pf-global-page a{
  color:#000;
  text-decoration: underline;
}
.pf-global-page h1, .pf-global-page h2, .pf-global-page h3{
  font-size:2rem;
  line-height: normal;
}
.pf-global-page h2, .pf-global-page h3{
  margin:0;
}
.pf-global-page h1 {
  color: #FFF;
}
.pf-subtitle p{
  font-weight: 700;
  margin:0;
  font-size:1.25rem;
}
.pf-cta {
  margin: 2rem auto;
  width: fit-content;
}
.pf-cta a{
  text-decoration: none;
  padding:0.75rem 2rem;
  font-size: 1em;
  border-radius: 4rem;
  max-width: 535px;
  display: inline-block;
  text-align: center;
  transition:all 0.25s;
}
.pf-cta--over-image a{
  max-width: 100%;
}
@media screen and (min-width:768px) {
  .pf-cta{
    margin:2rem 0 0;
  }
  .pf-subtitle{
    font-size:1.5rem;
  }
}
@media screen and (min-width:850px) {
  .pf-cta--over-image{
    position: absolute;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%);
  }
}
@media screen and (min-width:1024px) {
  .pf-subtitle p{
    font-size:2rem;
  }

}

/*Hero*/
.pf-hero{
  background: linear-gradient(#003f6e 0%, #0069ad 100%);
}
.pf-hero__content{
  color:#fff;
  padding:2rem;
}
.pf-hero__title{
  margin:0;
  font-size:1.5rem;
}
.pf-hero__text{
  margin:0;
  line-height: 1.5rem;
}
.pf-hero__image{
  display: none;
}
.pf-hero__quote{
  font-style: normal;
  font-size:0.85rem;
  font-weight: 700;
  margin:1rem 0 0;
}
.pf-hero--alternative{
  background-image:url('../images/pf-global-page/hero-pierre-fabre.png');
  background-position: center right -15rem;
  background-size: cover;
  background-repeat: no-repeat;
  font-style: italic;
  color:#fff;
}
.pf-hero--alternative__content{
  max-width: 611px;
  padding:8rem 0;
}
.pf-hero--alternative__text{
  font-size:1rem;
  font-weight: 700;
  margin:0;
}

@media screen and (min-width:600px) {
  .pf-hero__title{
    font-size:1.75rem;
  }
}
@media screen and (min-width:768px) {
  .pf-hero__title{
    font-size:2rem;
  }
  .pf-hero--alternative__text{
    font-size: 1.5rem;
  }
}
@media screen and (min-width:1024px) {
  .pf-hero__wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .pf-hero__content{
    width:50%;
    font-size:0.85rem;
    padding:0 0 0 6rem;
  }
  .pf-hero__image{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width:47%;
  }
  .pf-hero__image img{
    display: block;
  }
  .pf-hero__text{
    max-width:450px;
  }
  .pf-hero--alternative__text{
    font-size: 2rem;
  }
}
@media screen and (min-width:1280px) {
  .pf-hero__content{
    font-size:1rem;
    padding:0 0 0 9rem;
  }
  .pf-hero__title{
    font-size:2.25rem;
  }
  .pf-hero--alternative{
    background-position: center right;
  }
}
@media screen and (min-width:1420px) {
  .pf-hero__content{
    padding:0 0 0 12rem;
  }
}
@media screen and (min-width:1650px) {
  .pf-hero__content{
    padding:0 0 0 16rem;
  }
}

/* Illustrated Text */
.pf-illustrated-text{
  padding:2rem 0;
}
.pf-illustrated-text__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.pf-illustrated-text__content{
  margin-top:2rem;
}
@media screen and (min-width:768px) {
  .pf-illustrated-text{
    padding:4rem 0;
  }
  .pf-illustrated-text__wrapper{
    flex-direction: row;
    justify-content: space-between;
  }
  .pf-illustrated-text__content{
    margin-top:0;
  }
  .pf-illustrated-text--position-image-right .pf-illustrated-text__content,
  .pf-illustrated-text--position-image-left .pf-illustrated-text__image{
    order:1;
  }
  .pf-illustrated-text--position-image-right .pf-illustrated-text__image,
  .pf-illustrated-text--position-image-left .pf-illustrated-text__content{
    order:2;
  }
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-left .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-right .pf-illustrated-text__content{
    width: 60%;
  }
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-right .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-60-40.pf-illustrated-text--position-image-left .pf-illustrated-text__content{
    width: 35%;
  }
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-left .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-right .pf-illustrated-text__content{
    width: 35%;
  }
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-right .pf-illustrated-text__image,
  .pf-illustrated-text--ratio-40-60.pf-illustrated-text--position-image-left .pf-illustrated-text__content{
    width: 60%;
  }
  .pf-illustrated-text__image,
  .pf-illustrated-text__content{
    width: 48%;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text{
    padding:0;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text__wrapper{
    align-items: flex-start;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text__content{
    padding-top:1rem;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text:nth-child(2){
    padding-bottom:1rem;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text:nth-child(2) .pf-illustrated-text__image{
    transform:translateY(20px);
  }
}
@media screen and (min-width:1024px) {
  .pf-illustrated-text{
    padding:5rem 0;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text__content{
    padding-top:3rem;
  }
  .pf-illustrated-text--ecocert{
    padding-top:0;
  }
}
@media screen and (min-width:1280px) {
  .pf-illustrated-text-multiple .pf-illustrated-text__content{
    padding-top:6rem;
  }
  .pf-illustrated-text-multiple .pf-illustrated-text:nth-child(2) .pf-illustrated-text__image{
    transform:translateY(-130px);
  }
}
/* Simple image */
.pf-simple-image{
  padding:1rem 0;
}
.pf-simple-image__wrapper{
  text-align: center;
  position: relative;
}
.pf-simple-image .pf-subtitle p{
  padding-bottom:2rem;
  text-align: left;
}
.pf-simple-image__legend{
  text-align: center;
  color:#6B6B6B;
  font-size:0.875rem;
  padding-top:1rem;
}
.pf-simple-image--madeinfrance{
  padding-bottom:0;
}

/* Multiple text */
.pf-multiple-text{
  padding:2rem 0;
}
.pf-multiple-text__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:1rem 0;
}
@media screen and (min-width:768px) {
  .pf-multiple-text__wrapper{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .pf-multiple-text_content{
    width:48%;
  }
}


/* Simple text */
.pf-simple-text{
  padding:2rem 0;
}
.pf-simple-text--ecocert{
  padding-bottom:0;
}
.pf-simple-text--madeinfrance{
  padding:0;
}

/* Listing Colors */
.pf-listing-numbers__item{
  border-bottom-width:2px;
  border-bottom-style: solid;
  padding:1rem 0;
  font-size: 0.75rem;
}
.pf-listing-numbers__item:last-child{
  border-bottom:none;
}
.pf-listing-numbers__item p{
  margin:0;
}
.pf-listing-numbers__title{
  font-weight: 700;
  font-size:2rem;
}
.pf-listing-numbers__text{
  font-size: 1.35rem;
}
@media screen and (min-width:1024px) {
  .pf-listing-numbers__item{
    font-size: 1rem;
  }
}

/* pf-footer */
.pf-footer{
  text-align: center;
  padding:2rem 0;
  margin:2rem 0 0;
  border-top:1px solid #DDDDDD;
}
.pf-footer__links{
  padding-top:2rem;
}
.pf-footer__links p{
  font-size:1.45rem;
}
.pf-footer__links-wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.pf-footer__links-item{
  margin:0 5px;
}
.pf-footer__links-item img{
  width: 52px;
  height: 52px;
}
.pf-footer__brand picture {
  display: block;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (min-width:600px) {
  .pf-footer__links-item{
    margin:0 15px;
  }
}

/* PF stats */
.pf-stats__item{
  text-align: center;
}
.pf-stats__item p{
  margin:0;
}
.pf-stats__number{
  width: 116px;
  height:116px;
  border-radius:50%;
  position: relative;
  display: inline-block;
}
.pf-stats__number-inner{
  color:#fff;
  font-size:2.75rem;
  position: absolute;
  top:calc(50% - 5px);
  left:50%;
  transform:translateX(-50%) translateY(-40%);
  line-height: 1;
}
.pf-stats__item{
  margin:0 0 2rem;
}
@media screen and (min-width:600px) {
  .pf-stats__wrapper{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
  }
}