<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/**************************************/
/*************** MODAL****************/
/*************************************/

#mask { 
	position: fixed;
	left: 0;
	top: 0;
	z-index: 31; 
	background-color: #000; 
	display: none; 
	cursor: zoom-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

/** IMPORTANT : ne pas utiliser display none mais visibility hidden pour calcul dimension par js **/
#modal {
	z-index: 32;
	/* position: absolute; */
	/* display: none; */
	/* display: block; */
	visibility: hidden;
	top: 0;
	margin: 0 auto;
	/* opacity: 0; */
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
#modal_bloc { 
	z-index: 35; 
	position: relative;	
	display: block;
	padding: 2%;
	min-width: 270px;
	max-width: 96%;
	background-color: #FFFFFF;
	text-align: center;
	margin: auto;
	}  

a#fermer_modal {
	float: right;
	display: inline-block;
	padding: 25px;
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 50% 50%;
	background-image: url("../images/fermer.svg");
}
a#fermer_modal:link, a#fermer_modal:visited {opacity: .7;}
a#fermer_modal:hover, a#fermer_modal:active {opacity: 1;}


#modal_titre, #modal_desc {display: block;padding: 9px;}
#modal_titre {font-size: 120%;font-weight: bold;}
#modal_desc {}

/* #modal_bloc strong {display: block; padding: 9px; font-size: 120%;text-transform: capitalize;}
#modal_bloc p {margin: 0;padding: 0 9px;} */


img#photoDiapo {display: block;margin: 0 auto;width: 100%;height: 100%;}

/**
** MODAL DIAPO MINIATURES
** liste miniatures modal 
**/

#modalBlocMiniatures {
	overflow-Y : auto;
	text-align: left;
}

#miniaturesModalUl {
	display: block;
	padding: 1px 0; 
	background-color: #e2e2e2;
	width: 100%;
	}
#miniaturesModalUl li {display: inline-block;vertical-align: middle;margin: 1px 1px 0 0;}
#miniaturesModalUl li a {display: block;}
#miniaturesModalUl li a img {height: 70px}


@media screen and (min-width: 280px) and (max-width:820px) {
	#modal {margin: 0;}
	/* #modal_bloc {max-width: auto;margin: 0 0 0 -30%} */
}</pre></body></html>