/* ------- */
 * Page d'accueil - Présentation de l'institut
 /* ------- */
 
.hp-accueil-presentation {
  position: relative;
  margin: 0rem 0 0 0;
  z-index: 10; }
  .hp-accueil-presentation .container {
    position: relative;
    padding: 0rem 2rem 1rem 2rem;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(59, 58, 67, 0.1);
    /* z-index: 999; */}


a.nav-link {
	font-weight: 400;
}


/* Au niveau de la page d'accueil, pour que la fin de la devise « Vous former... » soit visible sur smartphone, il faut que la zone de news 
ne remonte pas dans la zone supérieure (sur smartphone) sinon elle cache le retour à la ligne « notre priorité » */
@media (max-width: 500px) {
	section.hp-news {
		margin: 0rem 0 2rem 0;
	}
}

@media (max-width: 975px) {
	img#logo_entete, img#logo_entete_wbe {
		height: 36.94px;
	}
}


h1.news-listing-hero__content-title {
	padding-top: 15px;
}



/* ------- */
/* Détail d'une formation - Boîtes supérieures */
/* ------- */


strong {
	font-weight: 600 !important;
}



.hp-hero-boites {

  padding: 1rem 0 1rem 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c92860+1,f75e38+100 */
  background: none;
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
  z-index: -9999; }
 
  .hp-hero-boites .container {
    position: relative;
    padding: 2rem;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(59, 58, 67, 0.1);
    /*z-index: 999;*/ } 
 
 
  .hp-hero__content-title {
    font-weight: 100;
    font-size: 2.1rem;
    margin: 0 0 1rem 0;}
  .hp-hero__content-listing li {
    display: inline-block;
    padding: 0 1rem 0 0;
    margin: 0 1rem 0 0;
    font-size: 1.1rem;
    font-weight: 300;
    border-right: .1rem solid #fff;
    border-right-width: thin; }
    .hp-hero__content-listing li:last-child {
      border: none; }
    .hp-hero__content-listing li a {
      color: #fff;
      text-decoration: none !important;
      transition: opacity .5s ease; }
      .hp-hero__content-listing li a:visited {
        color: #fff; }
      .hp-hero__content-listing li a:hover, .hp-hero__content-listing li a:focus {
        opacity: .5; }
  @media (min-width: 61.25em) {
    .hp-hero__content-title {
      max-width: 60rem;
      font-size: 4rem; 
	  }
    .hp-hero__content-listing li {
      font-size: 1.6rem; } 
	  
	 h1.hp-hero__content-title {
      max-width: 60rem;
      font-size: 4rem; 
	  }

	  
	  }

/* ------- */
/* Page d'accueil /*
/* ------- */
	  
.conteneur-boites-page-accueil-ligne-sup {
    margin-top: 0px;
}
	  
.conteneur-boites-page-accueil-autres-lignes {
    margin-top: 20px;
}
	  

.conteneur-boites-page-accueil {
	display: flex;
	flex-wrap: wrap;
	font-family: "Josefin Sans";
	justify-content: center;
}

.conteneur-boites-page-accueil > div {
   background-color: none;   /* bleu : #2199BE; #237CAD; #2099BE; */
   /*	border-bottom: solid 1px #2099BE;
	border-top: solid 1px #2099BE;
   border-radius: 15px;
   */
   color: black;
   float: left;
   margin-right: 10px;
	margin-bottom: 20px;
	padding: 10px;
   text-align: center;
   width: 257.5px;
}


.conteneur-boites-page-accueil a,.conteneur-boites-page-accueil a:hover {
	color: #2099BE;
	text-decoration: none;
}

.conteneur-boites-page-accueil > div:first-child {
	/* width:340px;	*/
 }

 .conteneur-boites-page-accueil >div#illustration {
	background: none;
	display: hidden;
	padding: 0;
 }

 .conteneur-boites-page-accueil a img#illustration {
	 border-radius: 5px;
 }


.conteneur-boites-page-accueil a img#illustration-arrondie {
	 border-radius: 50%;
	 margin-bottom: 10px;
 }


 

 @media (max-width: 580px) {
	.conteneur-boites-page-accueil > div {
	margin-bottom: 10px;
	margin-right: 0px;
	width:100%;
 } 
 	.conteneur-boites-page-accueil > div:last-child {
		margin-bottom: 0px;
 } 
 
 }


 
 
.conteneur-boites-page-accueil > div:last-child {
	margin-right: 0px; 
/* width: 555px; */
	}


 
 /* Boîtes supérieures - Formation unique */

/*
.boite-superieure-formation-unique {
	background-color: green;
	text-align: center;
	grid-column: 3 / 3;
}
*/

.boite-page-accueil .icone{
	margin: 10px auto 15px auto;
	/* width: 40%; */
}

.boite-page-accueil .texte p{
	margin-bottom: 0rem;
	/* color: red; */
}

.boite-page-accueil .texte h2{
	/* color: white; */
	
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0rem;
	margin-top: 0.5rem;
}

.boite-page-accueil .texte h3{
	/* color: white; */
	
	font-size: 1.3rem;
	font-weight: bold;
	margin-bottom: 0rem;
	margin-top: 0.5rem;
}

.boite-page-accueil .texte a{
	color: #ffffff;
	text-decoration: none;
	/* color: red; */
}


/* DivTable.com */


@media (max-width: 639px) {

.divTable{
	display: table;
	margin-top: 20px;
	width: 100%;
}


.divTableCol-1 {
	float:left;
	position: relative;
	width: 75%;
}


.divTableCol-2 {
	float:left;
	position: relative;
	width: 25%;	
}


.divTableRow {
	float: left;
	width: 100%;
}

.divTableCell {
	border: none;
	float: left;
	padding: 3px 10px;
	width: 100%;
}

}




@media (min-width: 640px) {

.divTable{
	display: table;
	margin-top: 20px;
	width: 100%;
}

.divTableRow {
	float: left;
	width: 100%;
}

.divTableCell {
	border: none;
	float: left;
	padding: 3px 10px;
	width: 50%;
}

}


/* Utilisation de CSS Grid */



/* La propriété grid-column est une propriété raccourcie pour grid-column-start et grid-column-end. */
/* Elle indique la colonne de début et de fin et/ou sa taille. */

.conteneur-grille-flex {
  display: flex;
}


.conteneur-grille > div {
  background-color: #80cbc4;
  border: 1px solid #fff;
  padding: 40px;
  font-size: 30px;
  text-align: center;
}

.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}


/* ------- */
/* Détail d'une formation - Boîtes supérieures */
/* ------- */

.conteneur-boites-superieures-formation-unique {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
}

.conteneur-boites-superieures-formation-unique > div {
   background-color: #E6E6E6;
   float: left;
   font-family: "Josefin Sans";
   font-size: 1.2rem;
   font-weight: 500;
   margin-bottom: 10px;
   margin-right: 10px;
   height: 243px;
   /* overflow: auto; */
   padding: 10px;
   position: relative;
   text-align: center;
   width: 363px;
}

.conteneur-boites-superieures-formation-unique > div:first-child {
	/* width:340px;	*/
 }

 .conteneur-boites-superieures-formation-unique >div#illustration {
	background: none;
	padding: 0;
 }

 .conteneur-boites-superieures-formation-unique >div#illustration img {
	/* width: 367px; */
 }
 

 @media (max-width: 580px) {
	.conteneur-boites-superieures-formation-unique > div {
	margin-bottom: 10px;
	margin-right: 0px;
	width: 363px;
 } 
 	.conteneur-boites-superieures-formation-unique > div:last-child {
		margin-bottom: 0px;
 } 
 
 }


 
 @media (max-width: 580px) {
	/*.conteneur-boites-superieures-formation-unique > div:first-child {
	display: none;*/
 } 
 }
 
 
.conteneur-boites-superieures-formation-unique > div:last-child {
	margin-right: 0px; 
/* width: 555px; */
	}


 
 /* Boîtes supérieures - Formation unique */

/*
.boite-superieure-formation-unique {
	background-color: green;
	text-align: center;
	grid-column: 3 / 3;
}
*/

.boite-superieure-formation-unique .icone{
	margin: 7px auto 12px auto;
}

.boite-superieure-formation-unique .icone svg{
	height: 45px;
	width: 45px;
}



.boite-superieure-formation-unique .texte p{
	margin-bottom: 0rem;
	/* color: red; */
}

.boite-superieure-formation-unique .texte h2{
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 0.2rem;
	margin-top: 0.1rem;
}


/* ------- */
/* Détail d'une formation - Boutons "accordéon" */
/* ------- */

/* La dénomination « accordion » est utilisée dans le fichier my-script.js se trouvant dans /wp-content/themes/iepsaa-child/js */
.accordion {
	background-color: none;
	border: solid 1px #CCCCCC;
	color: blue;
	cursor: pointer;
	margin-bottom: 10px;
	padding: 10px;
	width: 100%;
	text-align: left;
	outline: none;
	transition: 0.4s;
}

button.accordion {
	background-color: none !important;
	background-style: transparent !important;
	color: #000000;

}

button.accordion::before {
	 content: '+ ';
}

button.accordion.active::before {
	 content: '- ';
}

button.accordion::before {
	 content: '+ ';
     display: inline-block;
     min-width: 20px;
}

button.accordion h2 {
     display: inline;
     font-size: 1.2rem;
}

button.accordion.active::before {
	 content: '- ';
     display: inline-block;
     min-width: 20px;
}



/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, button.accordion:hover {
  background-style: transparent  !important;;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 10px 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

/* ------- */
/* Présentation en deux colonnes - Formation unique */
/* ------- */

@media (min-width: 581px) {

.conteneur-colonne-unique-formation-unique {
	width: 100%;
}

.conteneur-colonnes-formation-unique {
	column-gap: 21px;
	display: grid;
	grid-template-columns: 726px 363px;
}


.conteneur-colonnes-formation-unique .colonne-1 {
	grid-column-start: 1;
	grid-column-end: 1;
}

.conteneur-colonnes-formation-unique .colonne-2 {
	grid-column-start: 2;
	grid-column-end: 2;
}

.conteneur-colonnes-formation-unique .colonne-2 video {
	width: 363px;
}


.conteneur-colonnes-formation-unique .colonne-unique {
	grid-column-start: 1;
	grid-column-end: 2;
}

}


 @media (max-width: 580px) {
	 
.conteneur-colonne-unique-formation-unique {
	width: 100%;
}
	 
	 
.conteneur-colonnes-formation-unique {
	display: grid;
	grid-template-columns: 1fr;
}


.conteneur-colonnes-formation-unique .colonne-1 {
	grid-column-start: 1;
	grid-column-end: 1;
	
}

.conteneur-colonnes-formation-unique .colonne-2 {
	grid-column-start: 1;
	grid-column-end: 1;
}


.conteneur-colonnes-formation-unique .colonne-2 video {
	width: 100%;
}
	 
	 
.conteneur-colonnes-formation-unique .colonne-unique {
	grid-column-start: 1;
	grid-column-end: 2;
}

	
 }


.conteneur-colonnes-formation-unique .item {

}




.conteneur-colonnes-formation-unique > div {

}

.note-modele-1 a, .note-modele-1 a:hover  {
	color: #2099BE;
	font-weight:600;
	text-decoration: none;
}

.icone-debut-ligne {
	height: 2rem;
	margin-bottom: 3px;
	margin-right: 1rem;
}


.fil-ariane {
	font-family: inherit;
	font-size: 13px;
	text-align: right;	
}

.fil-ariane a {
	color: #ffffff;
	text-decoration: none;
}
	
.fil-ariane a:hover {
	color: #ffffff;
}
	
.fil-ariane p {
	margin: 0;
}	

svg.search-icon {
	fill: #fff;
	margin-top: 8px;
}

/* S'applique quand le header est épinglé */
.navbar.sticky svg.search-icon {
	fill: #c92860;
	margin-top: 8px;
}


.partenaires-menu-footer {
	align-items: center;
	display: flex;
}


.partenaires {
	text-align: center;
	align-items: center;
	margin: 0;
}

.menu-footer-1 {
	justify-content: flex-end;
	margin-left: auto;
	text-align: right;
}

.menu-footer-1 a, .menu-footer-1 a:hover {
	text-decoration: none;
	color: #333;
}

.hp-hero__content-slogan p {
/* text-shadow: -1px 0 #2099BE, 0 1px #2099BE,
      1px 0 #2099BE, 0 -1px #2099BE; */
 
	font-size: 1.5rem !important;
	/* #93B735 */
}





.tableau-modele-01 tr:nth-child(odd) {
    background-color: lightgrey;
}


.tableau-modele-01 tr td {
    padding: 10px;
}


.tableau-modele-01 thead th {
    background-color: #DFAC22;
	color: #FFFFFF;
	font-weight: 600;
	text-align: center;
}




/* Popups */

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}



@media (min-width: 576px)
.modal-dialog {
    max-width: 750px;
    margin: 1.75rem auto;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Modal (background) */
.modal-image {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* The Modal (background) */
.modal-dialog-image {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content/Box */
.modal-content {
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}



/* Modal Content/Box */
.modal-content-image {
  /* background-color: red; */
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
}


/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



.mise-en-evidence {
	color: red;
}



.objet-arrondi {
	border-radius: 50%;
}


/* Zone de filtrage dans la médiathèque */

.md-listing__content-filters-box {
	padding: 2rem 1rem 2rem 1rem !important;
}

element.style {
	margin-right: auto !important;
    margin-left: auto !important;
   text-align: center !important;


}


.centrage-divers {
   margin-right: auto !important;
   margin-left: auto !important;
   text-align: center !important;


}


.flexslider .slides img {
   margin-right: auto !important;
   margin-left: auto !important;
   text-align: center !important;
   }


.flexslider, .slides li {
	margin-right: auto !important;
    margin-left: auto !important;
   text-align: center !important;
   }
   
   /* Prises de RDV - Liste des formations sous les vignettes des implantations */
   
  .modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
  z-index: 99999;
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}


.strong-view-id-1 .wpmtst-testimonial-heading, .strong-view-id-1 .wpmtst-testimonial-content p, .strong-view-id-1 .wpmtst-testimonial-content a.readmore, .strong-view-id-1 .wpmtst-testimonial-client div, .strong-view-id-1 .wpmtst-testimonial-client a {
	font-size: 17.6px;
}



.listing-formations__item-block-implantations p {
    left: 88%  !important;
	width: 2.6rem !important;
}