html {
	background: #000000;
	-webkit-font-smoothing: antialiased;
		}
 body {
 background: #000000;
/*height: 100%;*/
}
	




.nav{
position: fixed; 
bottom: 0;
/* width: 100%; */
height:60px;
width:300px;
margin-bottom:10px;
display: flex; /* or inline-flex */
margin-left:50px;
}

button{
 background-color: Transparent;
    background-repeat:no-repeat;
	 border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
} 

button.btPlay {
	position:relative; 
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */
margin-bottom:10px;
background-image:url("../img/btlecture.png");
    background-repeat:no-repeat;
}
button.btPlay:hover  {
	position:relative; 
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */
margin-bottom:10px;
background-image:url("../img/btlectureRoll.png");
    background-repeat:no-repeat;
}


button.btPause {
	position:relative; 
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */
margin-bottom:10px;
background-image:url("../img/btpause.png");
    background-repeat:no-repeat;
}
button.btPause:hover  {
	position:relative; 
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */
margin-bottom:10px;
background-image:url("../img/btpauseRoll.png");
    background-repeat:no-repeat;
}

button.btinfos {
    position: absolute;
    top: 30px;
    left: 30px;
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */
margin-bottom:10px;
margin-right:5px;
background-image:url("../img/btinfos.png");
    background-repeat:no-repeat;
}
button.btinfos:hover  {
    position: absolute;
top: 30px;
    left: 30px;
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */
margin-bottom:10px;
margin-right:5px;
background-image:url("../img/btinfosRoll.png");
    background-repeat:no-repeat;
}

button.btecran {
    position: absolute;
     right: 30px;
 top: 30px;
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */

right:50px;
   margin-bottom:10px;
background-image:url("../img/btecran.png");
    background-repeat:no-repeat;
}
button.btecran:hover  {
    position: absolute;
     right: 30px;
top: 30px;
width: 50px; /* remplacer {X} par votre valeur */
height: 50px; /* remplacer {Y} par votre valeur */
position:fixed; 
right:50px;
   margin-bottom:10px;
margin-bottom:10px;
background-image:url("../img/btecranRoll.png");
    background-repeat:no-repeat;
}
/*.btPlay {
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  background: #0b0c0d;
  padding: 10px 20px 10px 20px;
  border: solid #fafafa 5px;
  text-decoration: none;

}
.btPlay:hover {
  background: #3cb0fd;
  text-decoration: none;
}*/

button.btPause{

}
/*button.btecran{
position:fixed; 
right:50px;
   margin-bottom:10px;
}*/


.request2{

/* background-image:url(../img/fs.png); 
width:30px;
height:30px;*/
right:0;
}
	/* 	   Container full screen */
.container {
		/*	width: 100%;
			padding: 100px 20px;
			margin: 0 auto 50px auto;*/
		
			    position: absolute;
width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #000000;
			
			/* display: flex; /* or inline-flex */ 
	}
	 




#infos {
			text-align:center;
	padding:45px;
			
			/* display: flex; /* or inline-flex */ 
	}

	.infos p {
		padding-top:30px;
		text-align:center;
	/*font: bold italic large serif;*/
	font-size: 12px
	color:#FFFFFF;
	}
/*	.seconde {

	font: bold italic large serif;
	color:#FFFFFF;
	}*/
	



	.infos h1 {
		padding-top:50px;
		text-align:center;
	font-size: 12px
	color:#FFFFFF;
	}
		  
		  
/*progress*/
 


   iframe,
          embed,
          object {
            max-width: 100%;
             background: #000000;
          }
/* 	   Container video et bonus */


       #containerVideo {
/*  padding: 3%; */
/* padding: 2%;*/
margin:0px auto;
width:auto; 
width: 100%;
 /* position: relative;

   facultatif : résoud un bug non systématique de blur sur IE 
  transform-style: preserve-3d;*/
/*position: relative;*/

	 }
/* @media all and (min-width: 1400px)
{
    #containerVideo
    {margin:0px auto;
        width: 75%;
    }
}	 */

	
	 	#containerNotes {
width: 150px; /* remplacer {X} par votre valeur */
height: 150px; /* remplacer {Y} par votre valeur */
position: absolute;
top: 0;
left: 0; 
right: 0;
bottom: 0;
margin: auto;
	 }
	

	 
	 	#box {
position: relative;
left:100px;
 
 } 
	 	#box1 {
position: relative;

 
 } 		

	 	#boxVideo {
position: relative;
 right:100px;
 } 
 	 	#boxVideo1 {
position: relative;
 
 } 
	 	#boxVideo2 {

 position: relative;
top:150px;
left:100px;
 } 


	/* 	   Container textes */	
	 #footnote {
	 position: relative;
	text-align:center;
	/*padding:45px;*/
	font: bold italic large serif;
	color:#FFFFFF;
	right:30px;
	 }
	
	 
/* 	   Container bonus et textes */	
	#containerFlex {
	 padding: 30px 20px; 
/*position:relative; */
	display: flex;
    flex-wrap: wrap;
	justify-content: center;  
	display: block;
	
	 }
	 

#seek-bar {
position:fixed;
	 width: 50%;
	margin:10px; 
}