/* CSS Document */

@media screen and (max-width: 320px) {
	
	#page .sub-text,#page .sub-img,#page .sub-link,#page h2 { position:relative; z-index: 2; }
	
	/* =============== links ===============*/
	#page .sub-link {
		padding-bottom: 20px;
		font-family: 'Pathway Gothic One',sans-serif; font-size:18pt; color:#F85241; text-transform: uppercase;
		cursor:pointer; z-index: 2; 
		text-align: center;
		display: inline-block;
		margin-top:10px; margin-bottom:10px;
	}

	#page .sub-link:before{
		content: "";
		position: absolute;
		width: 50%;
		height: 1px;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #F85241;
	}

#page .sub-img { margin-top:10px; margin-bottom:10px; }
	
#page .sub-diaporama { 
	position:relative;
	left:-10px; width:320px; 
	margin-top:55px !important; margin-bottom:20px !important; 
	border : 20px solid #F3EDE1;
	border-bottom : 60px solid #F3EDE1;}
#page .sub-diaporama .sub-prev { position:absolute; bottom:-40px; left:0; }
#page .sub-diaporama .sub-next { position:absolute; bottom:-40px; right:0; }
#page .sub-diaporama .sub-prev img, .sub-diaporama .sub-next img { width:30px !important;  }
#page .sub-diaporama .slick-disabled { opacity: 0.5; cursor: default; }
	
#page .sub-2 { position:relative; margin-bottom: 0; margin-top: 20px; }
#page .sub-2 img { z-index: 2; }
#page .sub-cadre3 {
		position: absolute;
		left: -10px;
		top: 75px;
		width: 320px;
		height: 360px;
		background-color: #F3EDE1;
		z-index: 1;
}
#page .sub-3 { text-align: center; margin-top: 20px; }
	
#page .sub-4 { left:100px; margin-bottom: 40px;  }

#page .sub-5 { height: 430px; overflow: hidden; }
	
#page .sub-6 { margin-top:50px; }
	
#page .sub-9 { margin-top:50px; }
#page .sub-montpellier { display:none; }
	
}

@media screen and (min-width: 321px) and (max-width: 323px) {
	
		#page .sub-text,#page .sub-img,#page .sub-link,#page h2 { position:relative; z-index: 2; }
	
	/* =============== links ===============*/
	#page .sub-link {
		padding-bottom: 20px;
		font-family: 'Pathway Gothic One',sans-serif; font-size:18pt; color:#F85241; text-transform: uppercase;
		cursor:pointer; z-index: 2; 
		text-align: center;
		display: inline-block;
		margin-top:10px; margin-bottom:10px;
	}

	#page .sub-link:before{
		content: "";
		position: absolute;
		width: 50%;
		height: 1px;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #F85241;
	}

#page .sub-img { margin-top:10px; margin-bottom:10px; }
	
#page .sub-diaporama { 
	position:relative;
	left:-10px; width:320px; 
	margin-top:55px !important; margin-bottom:20px !important; 
	border : 20px solid #F3EDE1;
	border-bottom : 60px solid #F3EDE1;}
#page .sub-diaporama .sub-prev { position:absolute; bottom:-40px; left:0; }
#page .sub-diaporama .sub-next { position:absolute; bottom:-40px; right:0; }
#page .sub-diaporama .sub-prev img, .sub-diaporama .sub-next img { width:30px !important;  }
#page .sub-diaporama .slick-disabled { opacity: 0.5; cursor: default; }
	
#page .sub-2 { position:relative; margin-bottom: 0; margin-top: 20px; }
#page .sub-2 img { z-index: 2; }
#page .sub-cadre3 {
		position: absolute;
		left: -10px;
		top: 75px;
		width: 320px;
		height: 360px;
		background-color: #F3EDE1;
		z-index: 1;
}
#page .sub-3 { text-align: center; margin-top: 20px; }
	
#page .sub-4 { left:100px; margin-bottom: 40px;  }

#page .sub-5 { height: 430px; overflow: hidden; }
	
#page .sub-6 { margin-top:50px; }
	
#page .sub-9 { margin-top:50px; }
#page .sub-montpellier { display:none; }
	
}

@media screen and (min-width: 322px) {

	#background { 
		background-image: url(/les_halles/images/Background_Halftone.png);
	}	
	#page { height:3750px;  }

	#menu a.sub-menu1 .red-dot { display:block !important; }

	#page h1 { margin-bottom:45px;  }
	#page h2 { font-size: 36pt; text-transform: uppercase; }

	#page .sub-text,#page .sub-img,#page .sub-link,#page h2 { position:absolute; z-index: 2; }

	#page .sub-1 { 
		left: 440px;
		top: 360px;
		width: 500px;
	}

	#page .sub-2 {
		left: 0;
		top: 630px;
	}
	#page .sub-3 {
		top: 1300px;
		width: 600px;
		text-align: center;
		left: 180px;
	}
	#page .sub-4 {
		width: 124px;
		top: 1520px;
		left: 418px;
		text-align: center;
	}
	#page .sub-5 {
		left: 0;
		top: 1710px;
	}
	#page .sub-6 {
		width: 480px;
		left: 480px;
		top: 1850px;
	}
    #page .sub-6 br { display: none; }
	#page .sub-7 {
		left: 480px;
		width: 480px;
		top: 1950px;
	}
	#page .sub-8 {
		top: 2460px;
		left: 0;
		overflow: hidden;
		width:960px; height:510px;
	}
	#page .sub-diaporama .sub-prev {
		position:absolute; left :0; top:250px; z-index: 3; cursor: pointer;
	}
	#page .sub-diaporama .sub-next {
		position:absolute; right :0; top:250px; z-index: 3; cursor: pointer;
	}
	#page .sub-diaporama .slick-disabled { opacity: 0.5; cursor: default; }

	#page .sub-9 {
		left: 0;
		top: 3000px;
		width:620px;
	}
	#page .sub-10 {
		top: 3260px;
		left: 0;
		width: 310px;
		font-size: 14px;
	}
	#page .sub-11 {
		left: 340px;
		top: 3260px;
		width: 310px;
		font-size: 14px;
	}
	#page .sub-12 {
		right: 0;
		top: 3130px;
	}

	#page .sub-cadre1 {
		position: absolute;
		left: -160px;
		top: 940px;
		width: 1280px;
		height: 700px;
		background-color: #F3EDE1;
		z-index: 1;
	}
	#page .sub-cadre2 {
		position: absolute;
		left: -160px;
		top: 2370px;
		width: 1280px;
		height: 830px;
		background-color: #F3EDE1;
		z-index: 1;
	}
	#page .sub-montpellier {
		position: absolute;
		left: -160px;
		top: 1100px;
		width: 1280px;
		height: 415px;
		z-index: 1;
	}
}