/**
 * @file
 * RGR css specifités certains modeles.
 */


/*pour modele type A (image a gauche) */
	.rgrfigure
	{
		border: thin #c0c0c0 solid;
		display: flex;
		flex-flow: column;
		padding:5px;
		margin: auto;
	}
	.rgrfigcaption
	{
		/* background-color: #f1f1f150; */
        background-color: #12121255;
		color: #fff;
		font-family: Verdana, sans-serif;
  		font-size: 1.5em;
		/* padding: 3px; */
		text-align: center;
	}
	
/* figureFin 06/24 */



.imageG {
    text-align: left;
    float: left;
    max-width: 700px;
    margin: 0;
    padding: 1em;
    position: relative;
}

.elementD {
    margin-left: 720px;
    /*   border-left: 1px solid gray;*/
    padding: 1em;
    overflow: hidden;
}


/*pour modele type B (image a droite) */

.imageD {
    /*   border-left: 1px solid gray;*/
    padding: 1em;
    overflow: hidden;
    max-width: 700px;
    margin-left: 550px;
    position: relative;
}

.elementG {
    text-align: left;
    /*margin-right: 720px;*/
    /* max-width: 500px;*/
    width: 500px;
    padding: 1em;
    float: left;
}

.flex-containerListeTexteImage>div {
    margin: 5px;
    width: 45%;
}

.flex-containerListeTexteImage {
    display: flex;
    flex-wrap: wrap;
}

.flex-containerListeImage2 {
    display: flex;
    flex-wrap: wrap;
}

.flex-containerListeImage2>div {
    margin: 5px;
    width: 45%;
}

.flex-containerListeImage3 {
    display: flex;
    flex-wrap: wrap;
}

.flex-containerListeImage3>div {
    margin: 3px;
    width: 30%;
}

.flex-containerListeImage4 {
    display: flex;
    flex-wrap: wrap;
}

.flex-containerListeImage4>div {
    margin: 2px;
    width: 22%;
}

.flex-containerListeImageCentree {
    display: flex;
    /* flex-wrap: wrap; */
    width: 90%;
    height: 90%;
    margin: auto;
    object-fit: contain;
}

.flex-containerListeImageN>div {
    margin: 2px;
    width: 15%;
    height: 15%;
    max-width: 15%;
    max-height: 15%;
}

.flex-containerListeImageN {
    display: grid;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.flex-containerGaleryImage>div {
    margin: 2px;
    width: 15%;
    height: 15%;
    max-width: 15%;
    max-height: 15%;
}

.flex-containerGaleryImage {
    display: grid;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    border-radius: 10%;
}


.flex-containerListeImageCentree>div {
    margin: 2px;
    width: 60%;
    height: 60%;
    max-width: 60%;
    max-height: 60%;
}

.flex-containerListeTexte>div {
    /* width: 95% !important; */
    width: 95% ;
}

.flex-containerMiniaturePage {
    display: flex;
    flex-wrap: wrap;
}

a.flex-containerMiniaturePage {
    font-size: 0.9em;
    text-align: center;
    text-decoration: none;
    font-weight: normal;
    border: none;
}

.flex-containerMiniaturePage>div {
    margin: 5px;
}

.flex-containerMiniaturePage img {
    width: 70px;
}
/* div (45%) en background image  image puis libelle de l'image*/

div.rgrImage45 {
    float: left;
    width: 50%;
    border: 1px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    /* background-image: url('{{codehtml.image[loop.index].image}}'); mis dans le twig  */
    width: 50%;
    height: 100%;
    min-height: 300px;
}

div.rgrLibImage45 {
    font-size: 2.0em;
    text-align: center;
    color: #ffffff;
    background-color: #00000050;
}

/* IMAGE MODELES */
div.rgrImageModA,div.rgrImageModB {
    float: left;
    width: 50%;
    /* border: 1px solid red; */
    /* background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%; */
    /* background-image: url('{{codehtml.image[loop.index].image}}'); mis dans le twig  */
   
    height: 100%;
    min-height: 300px;
}
div.rgrImageModC2 {
    float: left;
    width: 50%;
    border: 1px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    /* background-image: url('{{codehtml.image[loop.index].image}}'); mis dans le twig  */
    width: 50%;
    height: 100%;
    min-height: 300px;
}
div.rgrImageModD {
    float: left;
    width: 50%;
    border: 1px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    /* background-image: url('{{codehtml.image[loop.index].image}}'); mis dans le twig  */
    width: 50%;
    height: 100%;
    min-height: 300px;
}



div.rgrLibImageModA,div.rgrLibImageModC2,div.rgrLibImageModD {
    font-size: 2.0em;
    text-align: center;
    color: #ffffff;
    background-color: #00000050;
}
div.rgrLibImageModB,span.rgrLibImageModB{
    font-size: 2.0em;
    text-align: center;
    color: #ffffff;
    background-color: #00000000;
}
span.rgrLibImageModB{
    min-width: 200px;
}
div.rgrImageModH {
    float: left;
    /* width: 50%; */
    border: 1px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    /* background-image: url('{{codehtml.image[loop.index].image}}'); mis dans le twig  */
    /* width: 50%; */
    /* height: 100%; */
    min-height: 300px;
}
div.rgrImageModL4 {
    float: left;
    /* width: 50%; */
    border: 1px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 300px;
}
div.rgrImageModL6 {
    float: left;
    /* width: 50%; */
    border: 1px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 200px;
}
/*modele E video*/

div.fabElement {
    padding-left: 20px;
    text-align: left;
}

div.fabElementLig1 {
    padding-left: 30px;
    text-align: left;
}

div.fabPage {
    position: relative;
    left: 20px;
    border: 3px solid #730000;
    padding: 10px;
}

img.fabElement {
    border: 1px solid #0000FF;
    border-radius: 50px;
    padding: 5px;
    /* width: 750px;*/
    width: auto;
    /*  max-height:400px;*/
}

video.bg-video {
    /*  position: fixed;*/
    /*   left: 0;*/
    /*  top: 0;*/
    background-color: #000000;
    /* z-index: -100;*/
}

video.fabElement {
    border: 1px solid #0000FF;
    border-radius: 50px;
    padding: 15px;
    /* width: 750px;*/
    /*  width: -webkit-fill-available;*/
    /*  max-height:400px;*/
}