#MIR-fader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); font-family: Arial, sans-serif; font-size: 14px; line-height: normal; z-index: 1019; }
#MIR-conteneur { position: fixed; top: 50%; left: 50%; width: 600px; height: 575px; transform: translate(-50%, -50%); border-radius: 24px; background: #fff; color: #333; }

#MIR-close { float: right; width: 32px; height: 32px; background: url(close.png) no-repeat center; }
#MIR-nomfic { width: 200px; margin-right: 32px; }

#MIR-cntimg { float: left; width: 500px; height: 500px; line-height: 500px; background: #e7e7e7; text-align: center; border: 1px solid #d7d7d7; box-sizing: content-box; font-size: 0; }
#MIR-cntimg #MIR-relimg { display: inline-block; position: relative; max-height: 462px; max-width: 662px;  min-height: 12px; min-width: 12px; vertical-align: middle; transition: transform 0.3s ease-in-out; }
#MIR-cntimg #MIR-relimg #MIR-image { display: block; max-height: 460px; max-width: 460px; height: auto; width: auto; border: 1px solid #d7d7d7; cursor: default; z-index: 300;
	 opacity: 0.5; filter: alpha(opacity=50); /* IE 6-7 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */ }
#MIR-cntimg #MIR-crop { position: absolute; width: 200px; height: 200px; left: 0px; top: 0px; padding: 0px; border: 1px dashed #333; z-index: 99; 
	background-repeat: no-repeat; -border-image: url('ants.gif') 1 repeat repeat; -webkit-border-image: url('ants.gif') 1 repeat repeat; -moz-border-image: url('ants.gif') 1 repeat repeat; }
#MIR-cntimg #MIR-crop.active { border: 1px dashed #fff; }
#MIR-cntimg #MIR-crop #MIR-dragh { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0px; cursor: move; z-index: 9; }
#MIR-cntimg #MIR-crop #MIR-resizeh { position: absolute; left: 100%; top: 100%; height: 8px; width: 8px; cursor: se-resize; opacity: 0.9; background-color: #666; margin: 0px;
    border: 1px solid #fff; z-index: 4; }
#MIR-cntimg #MIR-crop #MIR-cropinfo { position: absolute; top: 0px; left: 0px; height: 32px; line-height: 20px; }
#MIR-cntimg #MIR-crop #MIR-cropdims { color: #000; background: rgba(200,200,200,0.8); padding: 3px 5px; font-size: 12px; }

#MIR-boutons { float: right; height: 502px; }
#MIR-boutons > div { width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; transition: all 0.3s ease-in-out; }
#MIR-boutons > div:hover {  background-color: #e7e7e7; }
#MIR-boutons #MIR-undo { background-image: url(undo.png); margin-top: 16px; }
#MIR-boutons #MIR-rotg { background-image: url(rotg.png); margin-top: 16px; }
#MIR-boutons #MIR-rotd { background-image: url(rotd.png); margin-top: 16px; }
#MIR-boutons #MIR-valid { background-image: url(valid.png); margin-top: 316px; }

#MIR-wait { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; background: #000 url(wait.gif) no-repeat center; }

.MIR-espace { font-size: 0; height: 8px; }

/* ------------------------------------------------ */
/* Format mobiles < 660px							*/
@media handheld, only screen and (max-width: 660px), only screen and (max-device-width: 660px) {
	#MIR-fader { font-size: 12px; }
	#MIR-nomfic { width: 140px; }
	#MIR-conteneur { width: 400px; height: 380px; border-radius: 16px; }
	#MIR-conteneur > div { padding: 10px 16px !important; }
	#MIR-cntimg { width: 320px; height: 320px; line-height: 320px; }
	#MIR-cntimg #MIR-relimg #MIR-image { max-height: 280px; max-width: 280px; }
	#MIR-boutons #MIR-valid { margin-top: 140px; }
	.MIR-espace { height: 2px; }
}

/* ------------------------------------------------ */
/* Format mobiles < 480px							*/
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	#MIR-fader { font-size: 10px; }
	#MIR-nomfic { width: 100px; }
	#MIR-close { width: 20px; height: 20px; background-size: contain; }
	#MIR-conteneur { width: 300px; height: 284px; border-radius: 12px; }
	#MIR-conteneur > div { padding: 6px 10px !important; }
	#MIR-cntimg { width: 234px; height: 234px; line-height: 234px; }
	#MIR-cntimg #MIR-relimg #MIR-image { max-height: 220px; max-width: 220px; }
	#MIR-boutons #MIR-valid { margin-top: 50px; }	
	.MIR-espace { height: 8px; }
}