@charset "UTF-8";


body {
	font: 18px/27px 'QuicksandLight', Arial, sans-serif;
	background-image: url(images/backgroundphone.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-attachment:fixed;
	background-position:right;
	margin:0px;
}


/* mise en page de l entete vianney... realisateur...  *************************************************/
#entete{

width:90%;

margin:0px;
margin-left:5%;
color:#000;
display:none;
text-align:center;
}

#entete h2{
font-size:2em;
font-weight: normal;

margin-bottom:0px;
}

#entete h3{
	font-size:1em;
	font-weight: normal;
	margin-top:0px;	
}


/* la ONE PAGE **************************************************************************************/
#content{
	
	
	
	margin:0px;
	width:100%;
	
	
	
	padding-top:0px;
	
	
}

/* menu de navigation ********************************************************************
nav {
	

	color:333;
	margin:0px;
	display:none;
	/margin-bottom:100%;

}

nav a{
	font-size: 15px;
	color:#FFF;
	text-decoration: none;
	background-color:#666;
	display:block;
	width:100%;
	height:30px;
	text-align:center;
}

nav a:hover {
	color:#F60;
	
}

nav li{
	list-style:none;
	margin:0px;
	margin-bottom:1px;
}


nav ul {
	margin:0px;
	padding:0px;	
}
*/
/*   bloc d'introduction vianneymeurville.com + enter *************************************************/ 
.intro{
	margin-top:45%;
	/*padding-bottom:1000px; */
	display:none;
	width:100%;
	text-align:center;


}
.intro h2{
	font-size:2em;
	font-weight: normal;
	color:#000;
	margin-top:0px;
	margin-bottom:0px;
	font-weight: normal;
	
}

.intro hr{
	width:300px;
	
	
}

.intro h3{
	color:#000;
	
}


.intro a{
	font-size:1em;
	color:#000;
	text-decoration:none;
	font-weight: normal;
}

.intro a:hover{
	color:#F60;
	text-decoration:none;
	text-shadow: 0px 0px 2px #777;
	
}


/* mise en forme de toute les rubriques ************************************************************************/

.rubrique{
	background-image: url(images/backgroundphone.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position:right;
	margin:0px;
	padding-top:20px;
	margin-bottom:600px;
	width:100%;
	clear:both;
	
	
}

.rubrique h2{
	font-size:20px;
	color:#000;
	margin:0px;
	padding:0px;
	margin-top:0px;
	margin-bottom:0px;
	font-weight:bold;
	text-align:center;
	
	border-top:1px solid;
	border-bottom:1px solid;
}


.rubrique a{
	color:#000;
	text-decoration:none;
	margin:0px;
}

.rubrique a:hover{
	color:#F60;
	text-decoration:none;
	
}
.rubrique ul {
margin:0px;
padding:0px;
/*margin-left:5%;
margin-right:5%; */
}
.rubrique li{
	
	
	list-style:none;
	margin:7px;
	padding:0px;
	
	
	/*background-color:rgba(220,220,220,0.5);*/
	

}


.rubrique img{

width:100%;

}

.rubrique ul li p {
	color:#000;
font-size:12px;
margin:0px;
padding:0px;
margin-top:-7px;

}

@media (max-width: 480px) { 




 }
 
 @media (max-width: 767px) {
 /*.rubrique li {float:left;width:30%;}*/
 }

 /*****/
 
 nav {
position:relative;	
float:right;

}

#menu-icon {

	display: hidden;
	width: 40px;
	height: 40px;
	background: black url(images/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;

}

ul {

	list-style: none;

}

li {

	display: inline-block;
	float: left;
	padding: 10px

}

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

 .rubrique li img{ width:185px; border: 2px solid; border-color:#dcdcdc;}
.rubrique ul li p {font-size:14px;  background-color:rgba(220,220,220,0.5); }
.rubrique li{ width: 100%; height:120px; margin-top:20px; text-align:center;}
 
	#entete {
		margin:0;
		width:100%;
		position: fixed;
		background: black;
		color:white;
	}

	#entete h2 {margin:10px;}

	#entete h3 {float:left; margin-left:20px; margin-bottom:5px;}
	
	#menu-icon {display:inline-block;}
	
	.rubrique{padding-top:140px;}
	
	nav{
		margin:-5px;
		margin-right:5%;
		}
		
	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 5px;
		background: #fff;
		border: 5px solid #444;
		right: 5px;
		top: 45px;
		border-radius: 4px 0 4px 4px;
		margin:-5px;
	}

	
	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}
 }
/*** mise en forme bouton retour menu ******************/
.rubrique h4{
	color:#FFF;
	margin-top:0px;
	padding:0px;
	height:30px;
	
	

}

.rubrique h4 a{
	font-size: 15px;
	color:#FFF;
	text-decoration: none;
	background-color:#666;
	display:block;
	width:100%;
	height:30px;
	text-align:center;
}

.rubrique h4 a:hover {
	color:#F60;
	
}

/***********  mise en forme du player  ****************************************/
#player p {
font-size:14px;	
margin:0px;
padding:0px;
margin-bottom:-10px;
}