// 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;

}

#logo img {
  padding: 0.5rem;
}


.callout {
  padding-top: 0.5rem;

}

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

.callout h1 {
  padding-bottom: 5rem;
}

.titre_bsn {
  display: block;
  margin-left: 40%;
  margin-right: 15%;
}

.titre_bsn h1 {
  text-align: left;
  padding-bottom: 3rem;
}

// fond images en grille pour parallax

#background {
    background-color: #d5d2d1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 15px;
}

#background img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
}

.item-2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 5;
}

.item-3 {
    grid-column-start: 5 ;
    grid-column-end: 1;
    grid-row-start: 9;
    grid-row-end: 6;
}

.item-4 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

.programmes {

  display: flex;
  flex-wrap: wrap;
  background-color: #d5d2d1;
  justify-content: center;
  padding-left: 15%;
  padding-right: 15%;

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

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

    }

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

    .programme img {
      max-height: 15%;
    }

    .programme p {
      font-family: $font-family-default;
      font-weight: 500;
      font-style: italic;
    }
    .programmes :hover {
      background-color: #000;
      color: #ffffff;
      transition:0.2s ease-in-out;
    }

    // .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 {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  // margin-left: 15%;
  // padding-right: 15%;
  width: 70%;
  margin: auto;


}


    .mozaique_personnes {
      background-color: #d5d2d1;
      }


    .mozaique_personnes h3 {
      padding-top: 3rem;
      padding-left: 15%;
      padding-right: 15%;
      font-family: "Sarabun";
      font-weight: 800;
      font-size: 1rem;
      line-height: 20px;
      text-align: left;
    }

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



.mozaique {
  // background-color: #fff;
  display: flex;
  flex-direction: row;
  width: 50%;
  // max-width: 35%;
  padding: 0.5rem;
  // align-items: stretch;
  // position: relative;
  // margin-right: 34%;
  // margin-bottom: 6rem;
  // margin-left: 15%;
  // height: auto;


}

// .personne {
//   width: 45%;
//   display: flex;
//   flex-direction: row;
// }

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

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

    }

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


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

    .info h5 {
      font-weight: 900;
      font-size: 1.3rem;
      margin: 0;
      padding-top: 1rem;
      padding-left: 1rem;
    }

    .info h6 {
      font-weight: 300;
      font-size: 1.1rem;
      font-style: italic;
      margin: 0;
      padding-left: 1rem;
      padding-bottom: 1rem;
    }

.portrait {
  // max-width:50% !important;
  background: transparent !important;
}

.portrait img {
    max-width: 15rem !important;
}

img.portrait {

  width: 20%;
}



.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: relative;
	background: white !important;
	top: 50%;
	left: 25%;
	transform: translateX(-50%) translateY(-50%);
	width: 50%;
	height: content;
	min-height: 50px;
  border: solid;

}

#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;
}