@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'Alegreya Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
}

#titrepage {
	position: absolute;
	bottom : 0px;
	background-color: #FFFFFF;
	padding-top : 5px;
	font-size: 16px;
	padding-left : 20px;
	padding-right : 20px;
	width : 720px;
	left : 50%;
	margin-left : -380px;

}

p {
	font-family: 'Vidaloka', serif;
	 font-size: 18px;
	 line-height: 26px;
	 margin-bottom: 40px;
	 padding-left : 40px;
	padding-right : 40px;
}

.listing ul {
	font-family: 'Jura', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	margin: 0;
 	padding: 0;

}

.listing li {
	font-family: 'Jura', sans-serif;
	font-size: 16px;
	display: block;
	list-style: none;
	margin: 0;
 	padding: 0;

}

body {
	margin : 0;
	font-size: 10px;
	font-family: 'Vidaloka', serif;
	font-style: normal;
	font-weight: 300;
	text-indent:15px;
 	text-align:justify;
 	letter-spacing:2px;
}


#navigation li {
	display: inline;
	list-style: none;
	margin: 0 ;
 	padding: 0 ;
 	padding-left : 30px;
  	text-align: left ;
  	font-family: 'Alegreya Sans', sans-serif;
  	text-transform: uppercase;
  	font-size: 12px;
}


#navigation a {
  color: grey;   
  text-decoration: none;
	}

	p {
max-width: 720px;
line-height: 20px;
padding-right : 10px;
	}

.question {
color : #red;
}

#navigation {
	position : relative;
	margin : 0;
	text-align: center;
	margin-top : 42px;
	margin-bottom : 30px;
	margin-left : 40px;
	
}

#banner {
	position : relative;
	width : 100%;
	max-width : 1440px;
	height : 541px;
	margin : auto;	
	background-size: cover;
	background-position: center;
	margin-top : 90px;
	z-index: 5;
}

#header {
	position : fixed;
	top : 0px;
		width : 100%;
		background-color: #FFFFFF;
		z-index: 12;
}

h1 {
	text-transform: uppercase;
	line-height: 0px;
	font-family: 'Alegreya Sans', sans-serif;
	font-size: 14px;
}

h1.troplong {
line-height: normal;
}

#contener a {
		color: purple;
		text-decoration:none;
}

#contener {
	width : 700px;
	margin : auto;
	font-family: 'Jura', sans-serif;
	font-size: 12px;
	margin-top : 0px;
	padding-left : 0px;
	padding-right : 0px;
}

#footer {
	width : 100%;
	max-width : 1440px;
	margin : auto;
	border-top : 2px solid #CCC;
	margin-top : 60px;
	padding-top : 5px;
}

#facebook {
	float : left;


}

#liens {
	float : right;
	font-family: 'Vidaloka', serif;
	font-size: 12px
}

#liens a {
	color : #CCC;
	text-decoration: none;
}


#titre {
	margin-top : 90px;
	font-family: 'Jura', sans-serif;
	font-size: 18px;
	text-align: center;
	text-transform: uppercase;
}

#description {
	font-family: 'Vidaloka', serif;
	text-align: center;
	font-size: 18px;
}

#pochette {
	float : right;
	margin-top : 20px;
}

#pochette img {
	width : 350px;
	
}

#tracklisting {
	float : left;
	max-width : 350px;

}

#tracklisting ul {
	list-style-type : decimal;
}



#tracklistingfilm {
	float : left;
	max-width : 350px;

}


#tracklistingfilm ul {
	list-style : none;
	margin-left : -40px;
}


@media (max-width:1440px)  {

					#content {
						padding-left : 15px;
					}

					#facebook {
						margin-left : 15px;
					}

					#liens {
						margin-right : 15px;
					}
}


@media (max-width:1370px)  {

					#navigation li {
						padding-right : 40px;
					}

					#navigation {
						margin-left: 10px;
					}

	}



@media (max-width:700px)  {

						#contener {
						width : 94%;
						padding-left : 3%;
						padding-right : 3%;
					}

						p {
max-width: 100%;
padding-right : 0px;


	}

	#titrepage {	
	left : 0;
	margin-left : 0px;
	width : 94%;
	padding-left : 3%;
	padding-right : 3%;

}

#footer {
	display : none;
}

#banner {

	height : 250px;
	
}

	}