/*---------------------------------------------------------------------------------

 Theme Name:   Afri-learning
 Theme URI:    
 Description:  Le thème pour le site d'Afrilearning
 Author:       
 Author URI:   
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/
/**
[data-sf-field-name="_sfm_certification"] li:first-of-type,
[data-sf-field-name="_sfm_avec_session_garantie"] li:first-of-type {
display:none;
	
}
**/



.info-principales p {
	padding-bottom:0px;
}
.searchandfilter ul li li {
    padding: 2px;
}
.searchandfilter ul li ul li ul {
    margin-left: 10px;
}
.searchandfilter > ul > li > ul > li > label {
	font-weight:bold;
}
.titre-nos-sessions {
	padding-bottom: 32px;
    color: rgb(230, 125, 28);
}
.item-archive-formation{
  
background: #FFF;

display: flex;
flex-direction: row;

justify-content: space-between;
margin-bottom: 16px;
}
.item-archive-formation > a {
		width: 100%;
padding: 24px;
display: flex;
flex-direction: row;

justify-content: space-between;
	}


.item-archive-formation .title {
    color: #000;
font-size: 18px;

font-style: normal;
font-weight: 700;
line-height: normal;
padding-bottom:0px;
}

.code-formation {
    color: #000;
font-size: 10px;

font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}





.lieu{
    border:#0466A3 1px solid;
    padding: 0px 4px;
font-size: 10px;
background-color: white;
color: #0466A3 ;
display: inline;

padding: 4px 8px !important;
position: relative;
margin-left:8px;

}
.distanciel {
    border-color: #0466A3 !important;
}
.presentiel {
    border-color: #067D1C !important;
}


.filtre {
	display:flex;
	flex-direction:column;
}
.filtre button{
	background:none;
	border:none;
	display:flex;
	margin-bottom:8px;
	font-size:16px;
}
.filtre button:before{
	content:"";
	width:16px;
	height:16px;
	background:#fff;
	border-radius:4px;
	display:block;
	position:relative;
	top:1px;
	margin-right:8px;
	box-shadow: 0px 0px 14px 0px rgba(4, 102, 163, 0.13);
}
.filtre button.on:before{
	background:#0466A3;

}
.sidebar h3,

.sidebar h2{
	color: #0466A3;
	line-height: 1.8rem;

}
.sidebar h4 {
	  color: rgb(230, 125, 28);
}
.cat-intro{
height: 350px;
padding-top:150px !important;
text-align: center;
color: white;
background-size: cover;
}

.cat-intro h1 {
font-weight: 500;
  font-size: 40px;
	color: white;
}
@media screen and (max-width:960px){
	.cat-intro h1 { font-size: 66px; }
}

@media only screen and (max-width: 767px) {
	.site-main-formation h1, .cat-intro h1 { font-size: 40px; }
}
	.main-content-archive{
		background-color: #F4F4F2 !important;
	}
	
	.sub-cat-list{
		    display: flex;
			flex-direction: row;
			text-align: center;
			width: 100%;
			justify-content: center;
	}
	.sub-cat-list button {
		    padding: 8px;

    border-radius: 4px;
    color: white;
		margin:8px;
		border:none;
		border-color: RGBA(255,255,255,0);

    font-size: 14px;
	font-weight:500;

	}
	.sub-cat-list button:before{
		content:"I";
		    font-family: ETmodules!important;
		margin-right:4px;
	}
	.sub-cat:nth-of-type(2n+1) button {
	background-color:#0466a3;
}
.sub-cat:nth-of-type(2n+2) button {
	background-color: #E67D1C;
}
.sub-cat:nth-of-type(2n+3)  buttton {
	background-color: #949482;
}
	.sub-cat-list button:hover{
		opacity:90%;
	}
	.cat-intro{
  background-size: cover !important;
}

.cat-intro{
	background: linear-gradient(90deg,rgba(5, 49, 81, 1) 30%, rgba(46, 91, 148, 0.6) 100%),url('/wp-content/uploads/2023/07/fond-hero-accueil.jpg') no-repeat center center;

}

.entry-content {
    display: flex;
flex-direction: column;
margin: 0 auto;
}



.custom-formation-liste {
    border-radius: 8px;
background: #FFF;
box-shadow: 0px 0px 14px 0px rgba(4, 102, 163, 0.13);
padding:24px;
display: flex;
flex-direction: row;
margin-bottom: 16px;
justify-content: space-between;
}


.custom-formation-liste .title {
    color: #000;
font-size: 24px;
/**/
font-style: normal;
font-weight: 700;
line-height: normal;
}

.custom-formation-liste .code-formation {
    color: #000;
font-size: 10px;
/* */
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}
.duree{
    color:#0466A3;
    margin-right: 8px;
}
.duree p {
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.duree-title {
    font-weight:light;
    text-transform: uppercase;
    font-size: 11px;

}
.duree-heures{
    font-weight: bold;
    font-size: 20px;
}
.duree-jour {
    font-weight: light;
    font-size: 20px;
}
.session {
    color: var(--couleur-infor, #29E093);
text-align: right;
font-size: 14px;
/**/
font-style: normal;
font-weight: 500;
line-height: normal;
background-color: #1A731D;
border-radius:4px;
padding:8px;
}

.formation-info {
    display: flex;
    flex-direction: row;
}

.lieu-et-session {
    display: flex;
flex-direction: column;
justify-content: space-between;
}
.lieu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
.lieu p {
    border:#000 1px solid;
    padding: 0px 4px;
font-size: 10px;
}
.distanciel {
    border-color: #0466A3 !important;
}
.presentiel {
    border-color: #067D1C !important;
}

/** **/
/** **/
/** **/
/** **/
/** **/
/** **/
.et-l--header {
    position: relative;
    z-index: 3;
}
.site-main-formation {
padding-top: 100px;
position: relative;
z-index: 1;
background-color: #053151 !important;
}
.site-main-formation  .et_pb_row {
    max-width: 1280px !important;
}
.site-main-formation,
.article{
    background-color:#F4F4F2 !important;
}
.autre-formation {
    background-color:#FFF !important;
}
.autre-formation h2{
    color: var(--contrast-color, #E8862B);
text-align: center;
/**/
font-size: 34px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding-bottom: 16px;
}
img {
  
    overflow: hidden;
}
.site-main-formation h1 {
    color: white;
    /**/
    font-size: 46px;
    font-style: normal;
    font-weight: 600;
    line-height: 95.3%;
}
.content-formation .infos{
    padding:16px;
    border-radius:16px;
    background-color: #fff;
    margin-bottom: 16px;
}
.content-formation .infos h3{
    color: var(--primarycolor, #0466A3);
/* H3 */

font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
padding-bottom: 0;
margin-bottom: 0;
} 

.content-formation .infos p {
    color: #000;
/* P */

font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
padding-bottom: 10px;
}
.section-formation .sidebar {
    position: sticky;
    top: 120px;
}
.container-session.session-presentiel {
    border-color:#E67D1C !important;
}
.container-session.session-presentiel .session-header{
    align-self: flex-end;
}
.sessions{

margin-bottom: 16px;
}
.container-session{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.container-session.session-distanciel{
    position: absolute;
    top:0;
    left:0;
}



.liste-sessions,
.session-header { 

    background-color: #fff;
    border:3px solid #0466A3;
    padding:16px;
    
}

.container-session.on{
    z-index: 3;
}


.container-session-presentiel .liste-sessions,
.session-header-presentiel{
    border-color:#E67D1C !important;
}
.session-header {
  
    background:#fff;
    z-index: 2;
    position: relative;
    padding: 16px 0 0 0;
	width:49%;
	margin-bottom:16px;
	text-align:center;
}
.session-header.on {
	margin-bottom:0px;
}
.container-session-header {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.session-header.on {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; 
    border-bottom: 0px;
    padding-bottom: 16px;
}
.container-session .session-header  img{
    height:40px;
    border-radius: 0px !important;
}

.liste-sessions-distanciel{
    border-top-left-radius: 0px ;
    position: relative;
    top:-3px;
}
 .liste-sessions-presentiel{
    border-top-right-radius: 0px;
    position: relative;
    top:-3px;
}
.container-session .session-header h3{
    color: var(--secondary-color, #01181F);
    text-align: center;
    
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

}
.session-formation {
    padding:6px 8px 8px 8px;
	display:flex;
	flex-direction:row;
	justify-content: space-between;
}
.session-formation .custom-button {
	align-self:flex-end;
}
.session-formation > div{
	width:50%;
}
.sessions-garanties .session-formation{
    border:1px solid var(--vert, #21A33D);
}
.sessions-garanties .bloc-session-garantie {
    font-weight: bold;
    color: var(--vert, #21A33D);
    padding-bottom: 0;
    font-size:12px;
}
 .sessions-garanties .session-formation:first-of-type{
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    border-bottom: 0px;
 
}
.sessions-garanties .session-formation:last-of-type{
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    border-top: 0px;
}
.custom-button {
    background-color: #F18A18;
    color:#fff;
    padding: .6em 1em !important;
	border:none;
    text-transform: uppercase;
    font-size: 10px;
}
.custom-button:hover {
    box-shadow: 0px 0px 8px #0466a3;
}

.content-formation .chapo {
    margin-bottom: 20px;
}
.content-formation .chapo p{
    color: #0466A3;

font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 121.3%; /* 24.26px */

}
.content-formation.content h2 {
    color: var(--contrast-color, #E8862B);

font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 150%;
padding-bottom: 0;
margin-bottom: 0;
}
.content-formation.content h3,
.content-formation.content h4
{
    color: var(--contrast-color, #E8862B);
	padding-top:16px;
}	
.content-formation .texte p {
    color: #000;
    /* P */
    
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 20px;
    padding-bottom:0px;

}

.content-formation.content .texte {
padding-left:16px;
border-left: 4px solid #0466A3;
}


.site-main-formation .infos {
    display:flex;
}
.site-main-formation .infos > div{
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid #0466A3;
}
.site-main-formation .infos > div:last-of-type{
   border:none;
   margin-right:0px;
   padding-right:0px;
}
.site-main-formation .infos h3{
    font-size: 12px;
text-transform: uppercase;
padding-bottom: 0px;
	color:#0466A3;
}

.formation-disponible {
    background: white;
    border:3px solid #0466A3;
 
    margin-top:16px;
    padding:16px;
    text-align:center;
}
.formation-disponible h3 {
    color:#0466A3;
    padding-bottom: 4px;
    font-size:16px;
}
.formation-disponible p {
    line-height:1rem;
    color:#0466A3;
}

.modalitesetcertifications {
    display: flex;
	background-color: #Fff;
}
.modalitesetcertifications div {
   
    padding:16px;
	width:100%;
}


.modalitesetcertifications h3{
    font-size:12px;
    text-transform: uppercase;
    color: #0466A3;
}
.modalitesetcertifications p {
    font-size:10px;
    line-height:1rem;

}
.niveauetpublic{
	width:100%;
	    
    background-color: #2E5B94;
    color: #fff;
	border:2px solid   #0466A3;
	padding: 16px 24px !important;
	margin-bottom:32px;
}
.niveauetpublic h2 {
	font-size: 18px !important;
       color: #fff !important;
}
.niveauetpublic p {
	    color: #fff;
    
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 20px;
    padding-bottom: 0px;
	text-align: justify;
}
.niveauetpublic .et-pb-icon{
	height: 10px;
    font-size: 15px;
    color: white;
    margin-right: 4px;
}
.infos-container {
	    display: flex;
    justify-content: space-between;
	  margin-top: 32px;
	align-items: center;
}
.infos {
	padding: 16px;
    background: white;
	    width: fit-content;
	  
}
.site-main-formation h1 {
	min-height: 2em;
}
.site-main-formation .hero{
background: linear-gradient(0deg, rgba(2,0,36,0.5) 0%, rgba(9,9,121,0.5) 35%, rgba(0,212,255,0.5) 100%),url(http://luxiole-guinee.com/dev/afrilearning/wp-content/uploads/2023/09/vue-laterale-homme-pensant-au-bureau-tout-regardant-notes-autocollantes.jpg) no-repeat center center;
    background-size: cover;
    height: 300px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 170px;
    z-index: 2;
}

@media screen and (max-width:640px) {
.site-main-formation .infos {
	flex-direction:column;
	width:100%;
}
	.site-main-formation .infos > div {
		border-right:0px;
		border-right: 0px;


		margin-top:8px;
	}
	.et_pb_row.padding-top {
		padding-top:0px;
	}

}

.site-main-formation .infos > div{
	display:flex;
	flex-direction:row;
}
	
.site-main-formation .infos .et-pb-icon {
    font-size: 20px;
    margin-right: 8px;
    color: #0466A3;
    padding-top: 5px;
}

.et_pb_row.padding-top {
    padding-top: 64px;;
}

.content-formation .texte li {
    list-style: disclosure-closed;
margin-left: 13px;
font-weight: 400;
}

/**/
.modale_formulaire.hidden {
	display:none;
}
.modale_formulaire {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:3;
	background-color: rgba(40, 42, 41, 0.1);
	display:flex;
	justify-content:center;
	align-items:center;
}

.modale_formulaire > div {
	    background: white;
    padding: 16px;
    
	box-shadow: 0px 0px 14px 0px rgba(4, 102, 163, 0.13);
	display:flex;
	flex-direction:column;
	width:80%;
	max-width:980px;
}
.modale_formulaire  .wpcf7-form > div {
	width:100%;
	padding:16px;
}
.modale_formulaire .formulaire label {
	font-size:16px;
    display: block;
    margin:0px 8px;
}
.modale_formulaire .formulaire input,
.modale_formulaire .wpcf7-submit,
.modale_formulaire  textarea{
	
    padding: 8px 16px !important;
    font-size: 16px;
	border-color:#c8c8c8;
	width: 100%;
    margin-top:8px;
}

.modale_formulaire .wpcf7-form {
	display:flex;
    flex-direction: column;
}
.modale_formulaire  .wpcf7-form .formulaire {
    display: flex;
    flex-direction: row;
} 
.modale_formulaire h3,
.modale_formulaire h3 input {
	    font-weight: bold;
   color: var(--contrast-color, #E8862B);
    font-size: 24px;
    border:none;
    padding:0;
    display: inline;
}
.modale_formulaire .label-formation input{
	    border: 0px;
    padding: 0px;
   font-size: inherit;
   font-weight: 500;
   max-width: 200px;
}
.modale-title {
	position:relative;
	width:100%;
}
.modale-title button{
	position: absolute;
    right: 0;
    top: 0;
}
.article-content h3 {
	min-height:3em;
}

.img-vedette-formation {
	border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 14px 0px rgba(4,102,163,0.13);
    margin-bottom: 16px;
	max-width:100%;
	
}