html, body {
	background:black;
	margin:10;
	padding:0;	
}


#container {
	background: #FFFFFF;
	max-width:1400px;
	max-height:1000px;
	min-width:450px;
	min-height:300px;
	width:100%;
	height:100%;
	overflow:hidden;
	
}



#blocHaut {
	top:0%;
	left:0%;
	width:100%;
	height:23%;
	position: absolute;
	z-index: 1;	
}

#fondHaut {
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	position: absolute;
	z-index: 1;
}

#blocLisere {
	top:8%;
	left:0%;
	width:100%;
	height:18%;
	position: absolute;
	z-index: 2;	
}

#lisere {
	background:#941134;
	top:0%;
	left:0%;
	width:100%;
	height:18%;
	position: relative;
	z-index: 2;	
}

#blocTitre1 {
	top:2%;
	left:35.4%;
	width:8%;
	height:8%;
	position: absolute;
	float:left;
	z-index: 3;	
}

#titre1 {
	top:0%;
	left:0%;
	width:100%;
	height:auto;
	position: absolute;	
	z-index: 3;	
}

#blocTitre2 {
	top:1.5%;
	left:57%;
	width:12%;
	height:10%;
	position: absolute;
	z-index: 3;	
}

#titre2 {
	top:0%;
	left:0%;
	width:100%;
	height:auto;
	position: absolute;
	z-index: 3;	
}

#LogoMaglya {
	top:0%;
	left:43%;
	width:14%;
	height:auto;
	position: absolute;
	z-index: 4;
}

#LogoTechniques {
	top:2%;
	left:80%;
	width:12%;
	height:auto;
	position: absolute;
	z-index: 4;	
}

@font-face {
    font-family: 'metropolis-medium';
    src: url('metropolis-web/metropolis-medium-webfont.woff2') format('woff2'),
         url('metropolis-web/metropolis-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    letter-spacing:0.17vh
}

@font-face {
    font-family: 'metropolis-bold';
    src: url('metropolis-web/metropolis-bold-webfont.woff2') format('woff2'),
         url('metropolis-web/metropolis-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    letter-spacing:0.17vh
}

#texteBoutique{	
	background-color:rgba(255, 255, 255, 0.2);
	font-size: 1.8vh;
	line-height:150% ;
	font-family: 'metropolis-medium';
	padding-left:1%;
	left:0%; 
	top:100%;	
	width:95%;
	height:80%;
	position: absolute;  
	z-index: 5;
	
}

#titreBoutique {
	top:15%;
	left:0%;
	width:100%;
	height:auto;
	position: absolute;
    font-size: 1vw;
	line-height:150% ;
	font-family: 'metropolis-bold';
    color:white;
    text-align-last: center;
	z-index: 5;	
}

.italic{
	font-size: 3vh;
	font-style:italic;	
}

.gras{
	font-size: 2vh;
	Font-Weight: Bold;	
}	


#pageBoutique {
    background: #8D3233;
	left:0%;
	top:22%;
	float:left;
	position: absolute ;
	width:100%;
	height:70%;
	z-index: 5;
	overflow: hidden;
	
}

.rayon{
    max-width:12%;
	height:auto;
	cursor:pointer;	
	margin-top:1%;	
	margin-left:3%;
	float:left;
	z-index: 10; 
	padding:none;
	border:none;
    position: relative ;
}

.carre{
    max-width:100%;
	height:auto;
	cursor:pointer;	
	top:0%;	
	left:0%;
	float:left;
	z-index: 10; 
	padding:none;
	border:none;
    position: relative ;
}

.imgCarre{
    width:60%;
	height:auto;
	top:5%;	
	left:18%;
	float:left;
	z-index: 20; 
    position: absolute ;
}

.titreRayon{
    font-size: 65%;
	line-height:150% ;
	font-family: 'metropolis-medium';
    text-align: center;
    color:white;
    width:90%;
	top:65%;	
	left:4%;
	z-index: 25; 
    position: absolute ;
}

#pageRayon {
    background: #8D3233;
	left:0%;
	top:0%;
	float:left;
	position: absolute ;
	width:100%;
	height:100%;
	z-index: 100;
	overflow: hidden;
	display: none;
}




.horaires{
	top:94%;
	left:0%;
	width:100%;	
	font-family: "times new roman", times, serif;
	font-size: 2vh;
	color: #2C648F;
	text-align:center;
	font-style:italic;
	position: absolute;
	z-index: 4;
}

#retourBoutique{
    cursor:pointer;	
    width:10%;
	height:auto;
	top:15%;	
	left:1%;
	float:left;
	z-index: 20; 
    position: absolute;
    display:none;
}

#retourBoutique2{
    cursor:pointer;	
    width:10%;
	height:auto;
	top:94%;	
	left:1%;
	float:left;
	z-index: 20; 
    position: absolute;
    display:none;
}