body {
    margin: 0;
    background-color: #000;
	background-image: url('../img/fond_background.jpg');
	background-size: cover;
}

img {display:block;position:absolute;}
#fond {position:absolute;top:0px;left:0px;z-index:0;}
#logo {position:absolute;}
#titre_off {position:absolute;top:231px;left:878px;}
#code_black {position:absolute;top:231px;left:375px;}
#code_on {position:absolute;top:0;left:0;}
#planche_black {position:absolute;top:231px;left:375px;}
#planche_on {position:absolute;top:211px;left:375px;}

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
 	background:#000;
 	background-size: contain;
	background-size: auto;
  	transition: 1s opacity;
}
#divVideo #bgvid {
}


.stopfade { 
   opacity: .5;
}

.toggle-info {
  cursor: pointer;
}

.info-panel {
  display: none;
  cursor: pointer;
}
.button_result {	
	padding: 5px 15px; 
	margin: 3px 4px; 
	display: inline-block; 
	color: rgb(255, 255, 255); 
	cursor: pointer; 
	background: -webkit-linear-gradient(top, rgb(255, 99, 0) 0%, rgb(230, 74, 0) 100%); 
	border: 1px solid rgb(255, 96, 0); 
	border-radius: 5px; 
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px 3px, rgba(255, 255, 255, 0.25) 1px 1px 0px 0px inset; 
	text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0px; opacity: 1;
}

#divPlayer {
    width: 140;
    margin-left: 20px;
    margin-right: 0px;
    border: 0px;
    padding: 0px;
    margin-top: 100px;
    background-color: #000;
	position: absolute;
    display: grid;
    border: none;

}

.wrapper {
  display: grid;
}
* {box-sizing: border-box;}
.wrapper {
  border: none;
  background-color: #000;
}
.wrapper > div {
  border: none;
  background-color: #000;
}

#divVideo {
    width: 1920px;
	height:1080px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    background-color: #000;
	display: block;
	position: absolute;
}

#divMenu {
    width: 1920px;
    height: 1080px;
    margin: 0px;
    border: 0px;
    padding: 0px;
	display: block;
    position: absolute;
    background-image: url(s_titre.jpg);
}

button, input[type='button'], input[type='submit'] {
    border: 0px;
    cursor: pointer;
    text-align: center;
}

input:focus {
     outline:  none;
}

.stopfade { 
   opacity: .5;
}

#planche { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background-image:url("../img/fond_planche.png");
  opacity:.8;
  /*background: rgba(0,0,0,0.6);*/
  color: white;
  padding: 2rem;
  width: 500px;
  height:625px;
  margin:2rem;
  float: left;
  font-size: 1.2rem;
	display: block;
	position: absolute;
	margin-top: 300px;
	margin-left:600px;
	z-index:10;
}

#code {
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight: 100;
    background-image: url("../img/fond_code.png");
    opacity:.8;
	/*background: rgba(0,0,0,0.6);*/
    color: white;
    padding: 2rem;
    width: 500px;
	height: 625px;
    margin: 2rem;
    float: left;
    font-size: 1.2rem;
    display: block;
    position: absolute;
    margin-top: 200px;
    margin-left: 150px;
    z-index: 10;
    background-color: #000000;
}

[class^="hvr-"] {
    font-family: 'verdana', sans-serif;
}

/*[class^="hvr-"] {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #ff6300;
  text-decoration: none;
  color: #aaa;
  /* Prevent highlight colour when element is tapped 
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  /* Smooth fonts 
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}*/

	[class^="hvr-"] {
	padding: 3px 6px;
	margin: 2px 2px;
	display: inline-block;
	color: #8888ff;
	font-size: 14px;
	cursor: pointer;
	background: #ffa000;
	background: linear-gradient(top, #ffa000 0%, #ffd000 100%);
	background: -moz-linear-gradient(top, #ffa000 0%, #ffd000 100%);
	background: -webkit-linear-gradient(top, #ffa000 0%, #ffd000 100%);
	background: -o-linear-gradient(top, #ffa000 0%, #ffd000 100%);
	border: 1px solid #ff6000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-o-box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.50);
}

h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}

h2 {
  	font-size: 2rem;
	font-style: italic;
  	margin-top: 0;
  	letter-spacing: .3rem;
}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a:hover{
  background:rgba(0,0,0,0.9);
}
	
input[type=button], input[type=submit], input[type=reset], button, 
	.button_result {
	padding: 5px 15px;
	margin: 3px 4px;
	display: inline-block;
	color: #ffffff;
	font-size: 26px;
	cursor: pointer;
	background: #ff6300;
	background: linear-gradient(top, #ff6300 0%, #e64a00 100%);
	background: -moz-linear-gradient(top, #ff6300 0%, #e64a00 100%);
	background: -webkit-linear-gradient(top, #ff6300 0%, #e64a00 100%);
	background: -o-linear-gradient(top, #ff6300 0%, #e64a00 100%);
	border: 1px solid #ff3000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-o-box-shadow:0px 0px 6px 3px rgba(0, 0, 0, 0.5), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.50);
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, 
.button_result:hover {
	background: linear-gradient(top, #ff7d1a 0%, #ff6300 100%);
	background: -moz-linear-gradient(top, #ff7d1a 0%, #ff6300 100%);
	background: -webkit-linear-gradient(top, #ff7d1a 0%, #ff6300 100%);
	background: -o-linear-gradient(top, #ff7d1a 0%, #ff6300 100%);
}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button:active, 
.button_result:active{
	opacity:0.5;
}