/* fonts */
@font-face {
   font-family: 'LatoBold';
   src: url('../fonts/LatoBold-Latin.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: 'Lato';
   src: url('../fonts/LatoRegular-Latin.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
}

/* reset */
*,
*::after,
*::before {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}


#yoga-page {
   /* colors */
   --black: #000;
   --white: #FFF;
   --light: #F8F8F8;
   --dark: #393838;
   /*fonts*/
   --heading: "LatoBold", Arial, sans-serif;
   --text: "Lato", Arial, sans-serif;
   font-size: 19.2px;
   font-family: var(--text);
   font-weight: 400;
}

#yoga-page .container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 11.2px
}

/*####### puissance #######*/
#yoga-page #puissance,
#yoga-page #repoussez,
#yoga-page #intelligemment,
#yoga-page #chapitre {
   padding: 80px 0;
   background-color: var(--light);
   color:var(--black);
}

#yoga-page .puissance-container,
#yoga-page .possibilite-container,
#yoga-page .intelligemment-container,
#yoga-page .haut-de-gamme-container,
#yoga-page .repoussez-container,
#yoga-page .contenu-contanier,
#yoga-page .chapitre-container {
   display: flex;
}

#yoga-page .puissance-left,
#yoga-page .possibilite-left,
#yoga-page .puissance-right,
#yoga-page .possibilite-right,
#yoga-page .intelligemment-left,
#yoga-page .intelligemment-right,
#yoga-page .haut-de-gamme-right,
#yoga-page .haut-de-gamme-left,
#yoga-page .repoussez-left,
#yoga-page .repoussez-right,
#yoga-page .contenu-left,
#yoga-page .contenu-right,
#yoga-page .chapitre-left,
#yoga-page .chapitre-right {
   width: 50%;
}

#yoga-page .puissnace-content,
#yoga-page .possibilite-content,
#yoga-page .intelligement-content,
#yoga-page .haut-de-gamme-content,
#yoga-page .repoussez-content,
#yoga-page .contenu-content,
#yoga-page .chapitre-content {
   width: 90%;
}

#yoga-page .puissance-image,
#yoga-page .possibilite-image,
#yoga-page .intelligemment-image,
#yoga-page .haut-gamme-image,
#yoga-page .repoussez-image,
#yoga-page .contenu-image,
#yoga-page .chapitre-image {
   width: 90%;
   border-radius: 9.6px;

}

#yoga-page h1.puissance-title,
#yoga-page h1.possibilite-title,
#yoga-page h1.intelligemment-title,
#yoga-page h1.haut-de-gamme-title,
#yoga-page h1.repoussez-title,
#yoga-page h1.contenu-title,
#yoga-page h1.chapitre-title {
   font-size: 44.8px;
   margin-bottom: 16px;
}

#yoga-page h1.haut-de-gamme-title,
#yoga-page h1.contenu-title,
#yoga-page h1.possibilite-title{
   color:var(--light)
}

#yoga-page .puissance-text,
#yoga-page .possibilite-text,
#yoga-page .intelligemment-text,
#yoga-page .haut-gamme-text,
#yoga-page .repoussez-text,
#yoga-page .contenu-text,
#yoga-page .chapitre-title {
   line-height: 1.4
}

#yoga-page #possibilite,
#yoga-page #haut-de-gamme,
#yoga-page #contenu {
   padding: 80px 0;
   background-color: var(--dark);
   color: var(--light) !important;
}

@media screen and (max-width:840px) {

   #yoga-page .puissance-container,
   #yoga-page .possibilite-container,
   #yoga-page .intelligemment-container,
   #yoga-page .haut-de-gamme-container,
   #yoga-page .repoussez-container,
   #yoga-page .contenu-contanier,
   #yoga-page .chapitre-container {
      flex-direction: column;
   }

   #yoga-page .puissance-left,
   #yoga-page .possibilite-left,
   #yoga-page .puissance-right,
   #yoga-page .possibilite-right,
   #yoga-page .intelligemment-left,
   #yoga-page .intelligemment-right,
   #yoga-page .haut-de-gamme-right,
   #yoga-page .haut-de-gamme-left,
   #yoga-page .repoussez-left,
   #yoga-page .repoussez-right,
   #yoga-page .contenu-left,
   #yoga-page .contenu-right,
   #yoga-page .chapitre-left,
   #yoga-page .chapitre-right {
      width: 100%;
      margin-bottom: 32px;
   }

   #yoga-page .puissance-image,
   #yoga-page .possibilite-image,
   #yoga-page .intelligemment-image,
   #yoga-page .haut-gamme-image,
   #yoga-page .repoussez-image,
   #yoga-page .contenu-image,
   #yoga-page .chapitre-image {
      position: relative;
      left: 50%;
      transform: translateX(-50%);

   }

   #yoga-page .puissnace-content,
   #yoga-page .possibilite-content,
   #yoga-page .intelligement-content,
   #yoga-page .haut-de-gamme-content,
   #yoga-page .repoussez-content,
   #yoga-page .contenu-content,
   #yoga-page .chapitre-content {
      text-align: center;
      margin: 0 auto;
   }
}

/* ####### ports ######### */
#yoga-page #ports {
   padding: 112px 0;
   color:var(--black);
}

#yoga-page .ports-title {
   text-align: center;
   font-family: var(--heading);
   font-size: 48px;
}

#yoga-page .ports-image {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
   margin: 48px 0;
}

#yoga-page .ports-cols {
   width: 100%;
   max-width: 700px;
   margin: 16px auto;
   display: flex;
}

#yoga-page .ports-left,
#yoga-page .ports-right {
   width: 50%;
   padding: 16px;
   font-size: 16px;
}

#yoga-page .numbers {
   list-style: none;
}

#yoga-page .number {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
   align-items: center;
   justify-content: flex-start;
}


#yoga-page .number-circle {
   width: 40px;
   padding: 16px;
   height: 40px;
   border-radius: 50%;
   text-align: center;
   border: 2px solid #9a9a9a;
   margin-right: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}


@media screen and (max-width:430px) {
   #yoga-page .ports-cols {
      flex-direction: column;
   }

   #yoga-page .ports-left,
   #yoga-page .ports-right {
      width: 100%;
      margin-bottom: 16px;
   }
}

/*######### engagements #########*/
#yoga-page #engagements {
   padding: 32px 0;
   color:var(--black);
}

#yoga-page .engagements-heading {
   width: 70%;
   margin: 0 auto;
   text-align: center;
}

#yoga-page .engagements-subtitle {
   font-weight: 400;
}

#yoga-page .engagements-title {
   font-size: 44.8px;
   margin-top: 12.8px;
}

#yoga-page .engagements-container {
   display: flex;
   margin-top: 48px;
   justify-content: space-between;
}

#yoga-page .engagement {
   width: 30.3%;
   padding: 32px;
   text-align: center;
}

#yoga-page .engagement:hover {
   border: 1px solid #9a9a9a;
   border-radius: 11.2px;
}


#yoga-page .engagements-image {
   width: 60px
}

#yoga-page .engagement-title {
   font-size: 19.6px;
   margin: 16px 0;
   font-family: var(--heading);
}

#yoga-page .engagement-text {
   line-height: 1.5;
}

@media screen and (max-width:725px) {
   #yoga-page .engagements-container {
      justify-content: center;
      flex-direction: column;
   }

   #yoga-page .engagement {
      width: 100%;
      margin-bottom: 16px;
   }
}