html { 
  margin:0;
  padding:0;
 
}



body{
	font-family: 'Ubuntu', sans-serif;
	 background: url(../img/fond.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  line-height:normal;
  color:#35323b;
	
}

a{
	color:#a91d10;
	text-decoration:none;
}

a.hover{
	color:#35323b;
	text-decoration:none;
}

/*---------*/



/*---------*/

header{ 
	height : auto;
	padding : 0px;
}

header h1{
	font-family: 'Ubuntu', sans-serif;
	font-size:4em;
	color:white;
}

header h2{
	font-family: 'Ubuntu', sans-serif;
	color:white;
	font-weight:normal;
	font-size:2em;

}

header img{
	
}

/*---------*/


#vid{
	background:url(../img/fond_vid.png) no-repeat;
	width:100%;
	height:360px;
	border-top:#FFF 1px solid;
	border-bottom:#FFF 1px solid;

 }


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/*---------*/

@media (min-width: 1200px) {
  #contenu {
    width: 970px;
   }
}


/*---------*/

@media screen and (max-width: 768px) {
	
	#contenu{
	width:80%;
	margin:0 auto;
}

header h1{
	font-size:2em;
}

header h2{
	font-size:1em;

}

}

/*---------*/

nav#main_menu{

}

nav#main_menu ul{

}

nav#main_menu ul li{
	font-family: 'Ubuntu', sans-serif;
}

nav#main_menu ul li a{
}

nav#main_menu ul li a.hover{
	text-decoration:none;
	color:#FFFFFF;
}

/*---------*/

aside{
padding:2%;
background-image:url(../img/fond_aside.png);
background-repeat:repeat;
}

aside article{
	padding-bottom:10px;
	border-bottom:1px lightgrey solid
}

aside article h3{

}

aside article img{
 width:100%;
}

aside article p{
text-align:justify;

}

aside article a{

}

/*---------*/

article{
 padding:2%;
}

article h3{

}

article img{
 width:100%;
}

article p{
 text-align:justify;
 margin-top:20px;
}

article a{

}


/*---------*/

footer{

}

footer nav ul{

}

footer nav ul li{

}

footer nav ul li a{

}


/**
 * Simple fade transition,
 */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}





.one {
    width: 100%;
    height: 360px;
    overflow: hidden;
    position: relative;
	border-top:#FFF 1px solid;
	border-bottom:#FFF 1px solid;
	margin-top:40px;
}

.two{
    width: 30%;
    height: 300px;
    overflow: hidden;
    border: 15px solid blue;
    position: relative;
}

.video-background { /* class name used in javascript too */
    width: 100%; /* width needs to be set to 100% */
    height: 100%; /* height needs to be set to 100% */
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}