dev-epau.archi.fr/user/themes/epau-antimatter/scss/template/_custom.scss

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

}


  #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: 1rem;
}


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



.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: 45%;
      padding: 1.5rem;
      background-color: white;
      margin: 0.4rem;

    }

    .programme h4 {
      text-transform: uppercase;
    }

    .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;
    }
//
//     /* .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
    }

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





.mozaique {
  // background-color: #fff;
  display: flex;
  flex-direction: row;
  max-width: 65%;

  align-items: stretch;
  position: relative;
  margin-right: 10%;
  // margin-bottom: 6rem;
  margin-left: 15%;
  height: auto;

}

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

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


    }
    .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:15rem !important;
  background: transparent !important;
}

.2columns {
  max-width: 25%;
}

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