// Your custom SCSS should be written here...

.grav-lightslider {
    .lSSlideOuter {
        .lSPager.lSpg {
            > li a {
                z-index: 1;
            }
        }
    }
}



#body > script:first-child + .grav-lightslider {
  margin-top: -3rem;
}



#header #navbar ul.navigation li a {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1rem;
    display: inline-block;
    padding: 0.3rem 0.8rem;
    -webkit-backface-visibility: hidden;
    // float: left;
}


#header #navbar ul.navigation li:after {
  display: inline;
  content: "|";
  padding: 0 .1em;
  vertical-align: top;
}

#header #navbar ul.navigation li a:hover {
  font-weight: 900;
}



  #header.scrolled #navbar  ul.navigation li a {
      color: black !important;
      font-size: 0.95rem;
      transition:0.6s ease-in-out;
  }

#logo {
    display: flex;
    flex-direction: row;

    img {
      padding: 0.5rem;
      max-height: 3rem;
      margin:auto;

    }
}







.callout {
  padding-top: 0.5rem;

}

.callout h1, h2, h3, p {
  text-align: left !important;
  }

.callout {
    padding-right: 0rem !important;
    padding-left: 0rem !important;

    // h1 {
    // margin-bottom: 0rem !important;
    // }
    h2 {
      text-transform: capitalize;
      font-weight: 300;
      font-size: 1rem;
    }

}
.titre_nsb {
    display: block;
    margin-right: 52%;

      h1 {
        margin-bottom: 0rem !important;
        text-align: right;
        padding-right: 0rem !important;
      }
}

.titre_bsn {

  display: block;
  margin-left: 40%;
  // padding-right: 15%;

    h1 {
      text-align: left;
      margin-bottom: 0rem !important;
      // padding-bottom: 3rem;
    }

    p {
      padding-right: 15%;
    }
}

@keyframes anim {
  0% {width: 0%;}

  100% {width: 100%;}

}

.after-h1 {

  .test {
    // opacity: 0;
    // transition: opacity 1s ease-in-out;
    animation: anim 2.5s 1 normal ease-in-out forwards;
  }
}
  // &:hover {
  //   .test {
  //       opacity: 1;
  //   }
    // opacity: 1;
    // transition: width 5s ease-in-out;



.programmes {

  display: flex;
  flex-wrap: wrap;

  // background-image:
  // url("/user/themes/epau-antimatter/images/14360_default_big.jpg") ,
  //   url("/user/themes/epau-antimatter/images/10361_web_01.jpg") ,
  //   url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") ,
  //   url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") ;
  //
  // background-attachment: fixed;
  //
  // background-position: 50% -50px;

  // position: sticky;
  // transform: translateY(-1);

  // min-height: 500px;

  background-color: #d5d2d1;

  z-index: -1;
  justify-content: center;
  padding-left: 15%;
  padding-right: 15%;

  padding-top: 8rem;
  padding-bottom: 8rem;
}

.paralax  {
  position: absolute !important;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  // transform: translate3d(0px, -128px, 0px);

  #photo1 {
    position: relative;
    top: -60px;

  }

  #photo2 {
    z-index: 0;
    width:700px !important;
    position: relative;
    top: 260px;
  }

  #photo3 {
    z-index: 0;
    width:700px !important;
    position: relative;
    top: 500px;
  }

  #photo4 {
    z-index: 0;
    width:700px !important;
    position: relative;
    top: 300px;
  }
}


.programme {
  z-index: 1;
  max-width: 35%;
  // min-width:
  padding: 1.5rem;
  background-color: white;
  margin: 0.4rem;


    h4 {
      text-transform: uppercase;
      line-height: 1.2;
    }

    img {
      max-height: 4rem;
    }

    p {
      font-family: $font-family-default;
      font-weight: 500;
      font-style: italic;
    }
}


.programme:hover {
  background-color: #000;
  transition:0.2s ease-in-out;

  p {
    color: #fff;
  }

  h4 {
    color: #fff;
  }
}

    // .parallax {
    //   display: block;
    // }

//
//     /* .titre_nsb {
//       display: block;
//       position: absolute;
//       margin-right: 39%;
//     } */
//
//
// /* .ressources {
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: space-between;
//     background-color: #ffffff;
//     padding-top: 8rem;
//     padding-right: 5rem;
//     padding-left: 5rem;
//   } */
//
//     /* .ressource {
//       max-width: 20%;
//       margin-block: 5rem;
//       flex-wrap: wrap;
//       flex: 0 1 15%;
//     } */
//
//
// /*
// .ressources h1 {
//   text-transform: uppercase;
//   background-color: #fff;
//   color: #000;
//   padding-top: 5rem;
//   padding-bottom: 6rem;
// } */
//
// /* .ressources {
//   display: grid;
//   grid-template-columns: repeat(4, 1fr);
//   grid-gap: 3rem;
//   grid-auto-rows: auto;
//   background-color: #ffffff;
//   padding-top: 18rem;
//   justify-items: center;
//   position: relative;
//   margin-right: 10%;
//   margin-bottom: 6rem;
//   margin-left: 10%;
// } */
//
// /* .ressources img {
//   max-width: 50%;
// } */
//
// /* .ressource h1 h2 h3 h4 {
//   margin: 0.2rem;
// } */

.gouvernance {
  background-color: #000;
  color: #ffffff;
  text-transform: uppercase;
  padding-bottom: 6rem;
  padding-top: 2rem;

}



.mozaique_personnes {
  background-color: #d5d2d1;



  .equipe {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    // margin-left: 15%;
    // padding-right: 15%;
    width: 54%;

    margin: auto;
    // justify-items: center;

    h3 {
      // display: flex;
      // flex-grow: 1;
      padding-top: 3rem;
      // padding-left: 15%;
      min-width: 100%;
      font-family: "Sarabun";
      font-weight: 800;
      font-size: 1rem;
      line-height: 20px;
      text-align: left;
    }

    .personne {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      // width: 50%;

      padding-right: 0.5rem;
      padding-bottom: 0.5rem;

      .mozaique {
        display: flex;
        flex-direction: row;


        justify-content: flex-end;
        max-width: 30rem;
        min-width: 30rem;

        .photo {
          // min-width: 10rem;
          // min-height: 10rem;

          // max-width:50% !important;
          overflow: hidden;
          width: 15rem !important;
          height: 15rem !important;
          // object-fit: cover;
          // background-size: cover;

          img {
              // maxwidth: 15rem !important;
              // height: 15rem !important;
              object-fit: cover;
              width: 100%;
              height: 100%;

          }

        }

        .info {
          background-color: #fff;
          display:flex;
          flex-direction: column;
          font-family: $font-family-default;
          width: 50%;
          height: 30rem;
          min-width: 15rem;

          h5 {
           font-weight: 900;
           font-size: 1.3rem;
           margin: 0;
           padding-top: 1rem;
           padding-right: 1rem;
           padding-left: 1rem;
         }
         h6 {
           font-weight: 300;
           font-size: 1.1rem;
           font-style: italic;
           margin: 0;
           padding-right: 1rem;
           padding-bottom: 1rem;
           padding-left: 1rem;
         }

         &:hover {
             background-color: #000;
             color: #fff;
             transition:0.2s ease-in-out;
         }
        }
      }
    }
  }

}








// .mozaique :hover {
//   background-color: #000;
//   color: #fff;
// }


// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...








.bouton {
  border: solid;
  background-color: transparent;
  text-transform: uppercase;
  align-self: flex-end;
  margin-right: 2rem;
}
//
// .bouton :hover {
//     background-color: #000;
// }


// pop in biographie

.modal {
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
}
.modal.open{
	display: block;
}
// #modal .mask{
// 	background: none !important;
// 	opacity: 1;
// 	position: absolute;
// 	top: 0;
// 	right: 0;
// 	bottom: 0;
// 	left: 0;
//
// }
// #body .grey {
//   opacity: 0.5;
// }

.modal .container{
	position: absolute;
	background: white !important;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 50%;
	height: content;
	min-height: 50px;
  border: solid;
  color: black;

  .message{
  	padding: 5% 10% 5% 5%;
  }

  a.close{
  	position: absolute;
  	right: 5%;
  	top:5%;
  	color: black;
  	font-size: 30px;
  }

  a.close:hover{
  	color: black;
  }

}

// .modal .container .message{
// 	padding: 5% 10% 5% 5%;
//
// }

// .modal .container a.close{
// 	position: absolute;
// 	right: 5%;
// 	top:5%;
// 	color: black;
// 	font-size: 30px;
// }
// .modal .container a.close:hover{
// 	color: black;
// }