html, body {
height: 100%;
}

/* ///// ICONES_VIEWER by Emma //// */





.FF {
	height: 200px;
	margin: 10px;
	border: 2px solid #d2d84a;
	cursor: pointer;
	/*transform: scale(0.5); */
	overflow: hidden;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 5px 5px 5px #ddd;
	z-index: 10;
}

.FF_titre{
	position: relative;
	padding: 10px;
	color: white;
	font-weight:600;
	background-color: #3f403b;		/* Gris foncé by Emma */
	line-height: 120%;
	z-index: 25;
}

.FF img{	
	   z-index: 15;

}

.W20 { width:20%;  }
.W30 { width:30%; }
.W40 { width:40%; }
.W50 { width:50%; }
.W100 { width:100%; }

.T50 { margin-top : -50px; }
.T100 { margin-top : -100px; }
.T200 { margin-top : -200px; }
.T300 { margin-top : -300px; }
.T350 { margin-top : -350px; }
.T500 { margin-top : -500px; }

.L100 { margin-left : -100px; }
.L300 { margin-left : -300px; }
.L500 { margin-left : -500px; }
.L700 { margin-left : -500px; }

@media screen and (max-width:768px) {

.W20, .W30 ,.W40, .W50 { width:90%; }

.T50 { margin-top : -50px; }
.T100 { margin-top : -100px; }
.T200 { margin-top : -200px; }
.T300 { margin-top : -300px; }
.T350 { margin-top : -350px; }
.T500 { margin-top : -500px; }

.L100 { margin-left : -100px; }
.L300 { margin-left : -300px; }
.L500 { margin-left : -500px; }
.L700 { margin-left : -500px; }
	
}


/* ///// VIEWER by Emma //// */

	/* Fond */
.View_bg {    display: none;			
    position: fixed;
    top: 0;
    left: 0;
	bottom: 0;
    z-index: 80;
    background-color: black;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
	width: 100%;
	height: 100vh;
}

	/* box centrer 100% */
.View_box_0 {
	    display: none;
	    position: fixed;
	margin: 0 auto;
    top:20%;
    width: 100%;
	    z-index: 90;
	text-align:center;
	}

	/* box titre + img */
.View_box_1{
	margin: 0 auto;
	background-color : white;
	color:#232323;
	z-index: 91;
	overflow: hidden; 
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
}	

.View_img {
    position: relative;
    margin: 15px;
	border : 2px solid #ccc; /* Emma Vert Clair */
	z-index: 100;
}

.View_titre {
    position: relative;
    left: 0;
    width: 100%;
    z-index: 100;
	padding-left: 20px;
	text-align : left;
	font-size:1.2rem;
}