/*
Theme Name: MyTheme
Theme URI: https://capitainewp.io
Author: Joël GASPAR
Author URI: https://dysign.fr
Description: Mon premier thème !
Requires at least: WordPress 5.0
Version: 1.0
*/


.menu {  position: fixed; top: 0px; }
.admin-bar .menu { top: 32px; /* on prend en compte le décalage */ }






/* ******************************************************************************* */
/* ************************* CSS COMMONS ************************************ */
/* ******************************************************************************* */





/* ************************* ROWS ************************************ */

/* Effet box 10: Row avec padding de 10 */ /* Used for ACTIVITIES & GROUP */
div.jg-r-p			{ margin:0px; padding:10px; display:flex; flex-direction: row; flex-wrap: wrap; }
div.jg-r-p div.jg-1	{ margin:0 10px; flex:1 250px; } 
div.jg-r-p div.jg-2	{ margin:0 10px; flex:2 250px; } 
div.jg-r-p div.jg-3	{ margin:0 10px; flex:3 250px; } 
div.jg-r-p div.jg-4	{ margin:0 10px; flex:4 250px; } 
div.jg-r-p div.jg-5	{ margin:0 10px; flex:5 250px; } 

/* Effet box 10: Row avec padding de 0 */ /* Used for FOOTER */
div.jg-r-f			{ margin:0px; padding:0px; display:flex; flex-direction: row; flex-wrap: wrap; }
div.jg-r-f div.jg-1	{ margin:0 0px; flex:1 200px; } 
div.jg-r-f div.jg-2	{ margin:0 0px; flex:2 200px; } 
div.jg-r-f div.jg-3	{ margin:0 0px; flex:3 200px; } 
div.jg-r-f div.jg-4	{ margin:0 0px; flex:4 200px; } 
div.jg-r-f div.jg-5	{ margin:0 0px; flex:5 200px; } 

/* Effet box 20: Row avec padding de 20 */
div.jg-r-p2				{ margin:0px; padding:20px; display:flex; flex-direction: row; flex-wrap: wrap; }
div.jg-r-p2 div.jg-1	{ margin:0 20px; flex:1 350px; } 
div.jg-r-p2 div.jg-2	{ margin:0 20px; flex:2 350px; } 
div.jg-r-p2 div.jg-3	{ margin:0 20px; flex:3 350px; } 
div.jg-r-p2 div.jg-4	{ margin:0 20px; flex:4 350px; } 
div.jg-r-p2 div.jg-5	{ margin:0 20px; flex:5 350px; } 

/* Effet colonne : Pas de padding en haut et en bas - tb:top bottom  - utilisé? */
div.jg-r-tb				{ margin:0px; padding:0px 10px; display:flex; flex-direction: row; flex-wrap: wrap; }
div.jg-r-tb div.jg-1	{ margin:0 10px; flex:1 350px; } 
div.jg-r-tb div.jg-2	{ margin:0 10px; flex:2 350px; } 
div.jg-r-tb div.jg-3	{ margin:0 10px; flex:3 350px; } 
div.jg-r-tb div.jg-4	{ margin:0 10px; flex:4 350px; } 
div.jg-r-tb div.jg-5	{ margin:0 10px; flex:5 350px; } 

/* Zero séparation: Row sans padding - For big boxes */ /* Used for MARQUES */
div.jg-r				{ margin:0px; padding:0px; display:flex; flex-direction: row; flex-wrap: wrap; }
div.jg-r div.jg-1		{ margin:0px; flex:1 300px; } 
div.jg-r div.jg-2		{ margin:0px; flex:2 300px; } 
div.jg-r div.jg-3		{ margin:0px; flex:3 300px; } 
div.jg-r div.jg-4		{ margin:0px; flex:4 300px; } 
div.jg-r div.jg-5		{ margin:0px; flex:5 300px; } 
div.jg-r div.jg-10		{ margin:0px; flex:10 300px; } 

/* Zero séparation: Row sans padding - For big boxes */ /* Used for HOME */
div.jg-rh				{ margin:0px; padding:0px; display:flex; flex-direction: row; flex-wrap: wrap; }
div.jg-rh div.jg-1		{ margin:0px; flex:1 0px; } 
div.jg-rh div.jg-2		{ margin:0px; flex:2 0px; } 
div.jg-rh div.jg-3		{ margin:0px; flex:3 0px; } 
div.jg-rh div.jg-4		{ margin:0px; flex:4 0px; } 
div.jg-rh div.jg-5		{ margin:0px; flex:5 0px; } 
div.jg-rh div.jg-10		{ margin:0px; flex:10 0px; } 
div.jg-rh div.jg-15		{ margin:0px; flex:15 0px; } 



/* ************************* COLONNES ************************************ */

/* Effet box 10: Colonne avec padding */
div.jg-c-p				{ margin:0px; padding:10px 0px; display:flex; flex-direction: column; flex-wrap: wrap; }
/* Effet box: pour alignement entre image(s), et texte avec background */
div.jg-c-p div			{ margin:10px 0px;  } 
/* Effet box sans délimitation:	pour alignement entre image et texte sans background pour le texte */
div.jg-c-p div.jg-align	{ margin:10px 15px; } 

/* Zero séparation: Colonne sans padding */
div.jg-c				{ margin:0px; padding:0px; display:flex; flex-direction: column; flex-wrap: wrap; }
div.jg-c div			{ margin:0px 0px; } 
div.jg-c div.jg-align	{ margin:0px 15px; } 

.jg-align			{ margin:0px 15px; } 





/* ************************* LINNERS ************************************ */
div.jg-c div.jg-liner		{ margin:0px 15px; } /*COULEUR A METTRE DANS STYLE.CSS */
div.jg-c-p div.jg-liner		{ margin:0px 15px; }

div.jg-c div.jg-liner-cl	{ margin:0px 15px; border-bottom: 1px WHITE SOLID; }
div.jg-c-p div.jg-liner-cl	{ margin:0px 15px; border-bottom: 1px WHITE SOLID; }






/* ************************* POSITIONNING ************************************ */
.jg-f-center		{ display:flex; justify-content: center; align-items: center; } 	/* centré horizontalement et verticalement */
.jg-f-right			{ display:flex; justify-content: flex-end; align-items: center; } 	/* aligné à droite et centré verticalement */
.jg-f-left			{ display:flex; justify-content: flex-start; align-items: center; } /* aligné à gauche et centré verticalement */
.jg-f-spaceb		{ justify-content: space-between; } 								/* ecartement identique entre les éléments */

.jg-f-v-top			{ display:flex; justify-content: center; align-items: flex-start; } /* centré horizontalement et aligné en haut */

 




/* ************************* MARGES ************************************ */
/* Marges de coté */
.jg-side-margin 			{ margin-right:90px;  margin-left:90px; transition-property:all; transition-duration:0.5s; }
.jg-left-side-margin 	{ margin-right:0px;   margin-left:90px; transition-property:all; transition-duration:0.5s; }
.jg-right-side-margin 	{ margin-right:90px;  margin-left:0px; transition-property:all; transition-duration:0.5s; }
.jg-side-margin-over	{ margin-right:150px; margin-left:150px; transition-property:all; transition-duration:0.5s; }

/* Marges à l'intérieur d'une section avec du contenu - A UTILISER A LA PLACE DE jg-section-marge-1, 2, 3 */
.jg-section-marge-top	{ padding-top: 50px; padding-bottom: 0px; }
.jg-section-marge-both	{ padding-top: 50px; padding-bottom: 50px; }
.jg-section-marge-bot	{ padding-top: 0px;   padding-bottom: 50px; }

/* Marges à l'intérieur d'une section sans du contenu - section de type bande de séparation */
.jg-section-sep			{ padding-top: 150px; padding-bottom: 150px; }
.jg-section-sep-min		{ padding-top: 25px; padding-bottom: 25px; }

/* Separateur à utiliser avec <div class="col-sm-12 jg-sep"></div> */
.jg-sep-10				{ margin-top: 10px; }
.jg-sep-20				{ margin-top: 20px; }

/* ************************* BACKGROUND ************************************ 
.jg-bg-normal		{ background-repeat: no-repeat; background-position: center center; background-size: cover; }
.jg-bg-fixed		{ background-repeat: no-repeat; background-position: BOTTOM BOTTOM; background-size: cover; background-attachment: fixed; transition-property: all; transition-duration: 60s; }
.jg-bg-trans		{ background-repeat: no-repeat; background-position: center center; background-size: auto 100%; background-attachment: fixed; transition-property: all; transition-duration: 60s; }
.jg-bg-trans:hover	{ background-size: auto 120%; transition: all 3s ease-out; transition-property: all; transition-duration: 60s; }
.jg-parallax-v1		{ background-repeat: no-repeat; background-position: center center; background-size:cover; background-attachment: fixed; border-bottom: 1px rgba(88,49,21,1) SOLID; } 
.jg-parallax-v2		{ background-repeat: no-repeat; background-position: center top; background-size:cover; background-attachment: fixed; } 
.jg-parallax-v3		{ background-repeat: no-repeat; background-position: center center; background-size:cover; background-attachment: fixed; } 
.jg-parallax-v4		{ background-repeat: no-repeat; background-position: center center; background-size:cover; background-attachment: fixed; border-top: 2px rgba(88,49,21,1) SOLID; border-bottom: 2px rgba(88,49,21,1) SOLID; } 
*/


/* ************************* MENTION LEGALES ************************************ */

.jg-ml-bg			{ background-color:rgb(243,243,243); }


/* Autres attributs de police */
.jg-pc-white 		{ color: WHITE; }
.jg-p-uppercase		{ text-transform:uppercase; }
.jg-p-rigth			{ text-align:right; }
.jg-p-left			{ text-align:left; } /*pour versions arabes*/
.jg-p-center		{ text-align:center; }



/* ************************* LIENS ************************************ */
a:link 				{ text-decoration:none; }

.jg-lien      			{ transition:all 0.3s; } 
.jg-lien:hover 		{ transition:all 0.3s; } 
a.jg-lien:link 		{ text-decoration:none; }

.jg-lien-bg     		{ transition:all 0.3s; } 
.jg-lien-bg:hover 	{ color:WHITE; transition:all 0.3s; } 
a.jg-lien-bg:link 	{ text-decoration:none; }

.jg-lien-bg-cl    	{ transition:all 0.3s; } 
.jg-lien-bg-cl:hover{ color:WHITE; transition:all 0.3s; } 
a.jg-lien-bg-cl:link{ text-decoration:none; }

.jg-lien-icon      	{ overflow-wrap:break-word; transition:all 0.3s; } 
.jg-lien-icon:hover 	{ color:WHITE; transition:all 0.3s; } 
a.jg-lien-icon:link 	{ text-decoration:none; }
.jg-lien-icon::after{ font-size:75%; content:"\e092"; font-family:'Glyphicons Halflings'; padding-left:10px; }



/* ************************* IMAGES ************************************ NOT USED ANYMORE: jg-f-center instead */
.jg-bg-img-center	{ background:white; width:100%; height:100%; margin-right:auto; margin-left:auto; padding:10px; } /* A utiliser pour les balises IMG */


html 			{ height: 100%; font-size:16px; line-height:22px;   }
body 			{ height: 100%; font-size:16px; line-height:22px; margin:0px; box-sizing: border-box; }

h1  				{ font-size:16px; line-height:16px; padding: 5px; text-align: center; margin:0px; text-transform:none; font-weight: normal; overflow-wrap:break-word; transition:all 0.3s;}
h1.jg-h1-ml		{ color: rgb(129, 77,31); background-color:rgba(255,255,255,1); font-size:32px; line-height:32px; text-align:left; padding-top:100px;}
h2  				{ font-size:25px; line-height:30px; padding:16px 15px; margin:0px; text-transform:uppercase; font-weight: normal; overflow-wrap:break-word; transition:all 0.3s;}
h3  				{ font-size:20px; line-height:20px; padding:15px 15px; margin:0px; text-transform:uppercase; font-weight: normal; overflow-wrap:break-word; transition:all 0.3s;}

h5  				{ font-size:13px; line-height:16px; font-weight:bold; padding:5px 15px;  margin:0px; text-transform:uppercase; font-weight: normal; overflow-wrap:break-word; transition:all 0.3s;}
h6  				{ font-size:10px; line-height:12px; font-weight:bold; padding:1px 15px;  margin:0px; text-transform:uppercase; font-weight: normal; overflow-wrap:break-word; transition:all 0.3s;}
p 				{ font-size:16px; line-height:22px; padding:5px 15px 10px;  margin:0px; text-align:justify; }
li 				{ font-size:16px; line-height:22px; }



/* ******************************************************************************** */
/* ************************* RESPONSIVE DESIGN ************************************ */
/* ******************************************************************************** */


/*****************************************
	Taille écran bureau 			1600 
	Taille écran portable			1350
	Taille écran tablette			950
	Taille écran TEL XXL retourné	810
	Taille écran TEL XL retourné	725
	Taille écran TEL M retourné		560
	Taille écran Tel XL				375
	Taille écran TEL M				300
/*****************************************/



/* Taille écran bureau */
@media only screen and (min-width:1400px)  {
	.jg-side-margin 			{ margin-right:250px;  	margin-left:250px; transition-property:all; }
	.jg-left-side-margin 	{ margin-left:250px; 	transition-property:all; transition-duration:0.5s; }
	.jg-right-side-margin 	{ margin-right:250px;  	transition-property:all; transition-duration:0.5s; }
	
	.jg-section-sep			{ padding-top: 300px; padding-bottom: 200px; }

}


/****     Tailles intermédiaires ?    ****/


/* Taille écran portable */
@media only screen and (max-width:1400px)  {
	.jg-side-margin 		{ margin-right:90px;  margin-left:90px; }
	p 					{ font-size:14px; line-height: 18px; }
	li 					{ font-size:14px; line-height: 18px; }
	.jg-section-sep		{ padding-top: 300px; padding-bottom: 200px; }
}

@media only screen and (max-width:1350px)  {
	.jg-section-sep		{ padding-top: 250px; padding-bottom: 200px; }
}


@media only screen and (max-width:1030px)  {
	.jg-side-margin { margin-right: 50px;  margin-left: 50px; }
}

/* Taille écran tablette */
@media only screen and (max-width:950px)  {
	.jg-side-margin 		{ margin-right:20px;  margin-left:20px; }
	.jg-section-sep		{ padding-top: 200px; padding-bottom: 200px; }

	h1.jg-h1-ml 			{ padding-top:50px; }
	h3					{ font-size:20px; line-height: 20px; }
}

@media only screen and (max-width:835px)  {
	/* p					{  } */
}

@media only screen and (max-width:800px)  {
	.jg-section-sep	{ padding-top: 150px; padding-bottom: 200px; }

	h3  			{ font-size:17px; line-height:15px; padding:5px; }
	p				{ font-size:13px; line-height:16px; padding:5px;  }

}


/* Taille écran ??? */
@media only screen and (max-width:728px)  {
	div.jg-c-p div.jg-align 	{ margin-right:5px; margin-left:5px; }
	div.jg-c div.jg-align 	{ margin-right:5px; margin-left:5px; }
	div.jg-c div.jg-liner		{ margin-right:5px; margin-left:5px; } 
	div.jg-c-p div.jg-liner	{ margin-right:5px; margin-left:5px; }

	
	h1				{ font-size: 14px; } 
	h1.jg-h1-ml 	{ font-size:25px; line-height:25px; }
	h2  			{ font-size:20px; line-height:20px; padding:5px; }
	h3  			{ font-size:15px; line-height:15px; padding:5px; }
	p				{ font-size:12px; line-height:16px; padding:5px;  }
	li				{ font-size:12px; line-height:16px; padding:5px;  }

}



/* Taille écran Téléphone XL - IPhone X*/ /* Tel retourner: width = 600px */ 
@media only screen and (max-width:600px)  {
	.jg-side-margin 		{ margin-right: 0px;  margin-left: 0px; }	
	
	h1  	{ padding: 3px; }
	h3  	{ font-size:15px; line-height:15px; }
	p 	{ font-size:12px; line-height:16px; }
	li 	{ font-size:12px; line-height:16px; }
}


/* Taille écran Téléphone M - IPhone 5 */
@media only screen and (max-width:430px)  {
	.jg-bh-links 			{ font-size: 8px; line-height: 6px; padding:3px; }
	.jg-bh-liens-langue 		{ font-size: 7px; line-height: 6px; padding:3px; }


	h1	{ font-size: 13px; padding: 2px; } 
	h2  	{ font-size:16px; line-height:22px; padding:5px; }
	h3  	{ font-size:14px; line-height:20px; padding:5px; }
	p	{ font-size:12px; line-height:16px; padding:5px;  }
	li	{ font-size:12px; line-height:16px; padding:5px;  }
	
}