body{
     padding: 0px;
     margin: 0px;
	 padding:0px;
}
/*bar*/

.w3-sidebar{height:100%;width:15%;background-color:rgba(255,255,233,0.8);position:fixed!important;overflow:auto;z-index: 3;
  top: 0px;
  bottom: 0;
  height: inherit;padding: 8px;font-size:10px;}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-large{font-size:18px!important}
.w3-animate-left{position:relative;animation:animateleft 1.8s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

.preload { display: none; }

.centrouille {
    padding:18px;
	display: block;
     margin-left: auto;
     margin-right: auto;
	 text-align:center;
}



 .conteneur{
     padding: 32px;
}
.sidenav {
  position: absolute;
  width: 280px;
  background: #263249;
  color: #eee;
  left: 0;
  height: 100%;

}
 code{
     font-size:inherit;
     display: inline;
     background: rgba(255,255,255,.3);
}
 #div1{
     display: none;
     font-size: 12px;
     background: rgba(0,255,255,.3);
}
 #ligne2{
     transition: background-color 1s ease-in-out;
}
 #code_decimal,#code_hexadecimal,#code_binaire{
     vertical-align:middle;
     display: block;
     text-align:center;
     margin-left: auto;
     margin-right: auto;
     width: 80%;
     height:50px;
     font-size:xx-large;
     padding:12px;
     border-radius:6px;
     box-shadow:0 4px 10px 0 rgba(0,0,0,0.9);
     background: rgba(230,230,230,.3);
}
 #texte1,#texte2,#texte3,#texte4,#texte5,#texte6,#texte7,#texte8,#texte9{
     display:block;
     text-align:center;
     margin-left: auto;
     margin-right: auto;
     width: 65%;
	 padding-top:23px;
     min-width: 4.5em;
     font-size: 26px;
}
 #valeur_r,#valeur_g,#valeur_b{
     display:block;
     text-align:center;
     margin-left: auto;
     margin-right: auto;
     width: 40%;
     min-width: 4.5em;
     font-size: 2em;
     background: rgba(230,230,230,.4);
}
 .cache{
    display: none
}
 #div_3 {
	 background-color:rgba(255,255,255,0.5);
}

 #canvas {
     background-color:rgba(255,255,255,0.8);
}
 .image {
    position:-webkit-sticky;
     position:sticky;
     top:0;
     width: 82px;
     height: 43px;
     display: block;
     margin-left: auto;
     margin-right: auto;
     transition: width 0.5s ease-in-out;
     transition: height 0.5s ease-in-out;
}
 p {
    padding:8px;
	display: block;
     margin-left: auto;
     margin-right: auto;
	 text-align:center;
}
 .texte {
     text-align:center;
     font-size:30px;
     background: rgba(255,255,255,.7);
}
 * {
     box-sizing: border-box;
}
 .bgimg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     background-image: url('fond2.jpg');
     min-height: 100px;
}
 .bgimg2 {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     background-image: url('fon.png');
     min-height: 100px;
}
 .col-container {
     color:white;
     display: table;
     width: 100%;
     padding: 16px;
}
 .conteneur {
     display: table;
     width: 100%;
}
 .col {
     display: table-cell;
     width:50%;
     padding: 32px;
}

.half {
  width: 50%;
  padding: 8px;
  	display: inline;
     margin-left: auto;
     margin-right: auto;
	 text-align:center;

}
 .col70 {
     display: table;
     width:60%;
	 display:inline;
     margin-left: auto;
     margin-right: auto;
     padding: 16px;
}
 .col80 {
     display: table;
     width:80%;
	 display: block;
     margin-left: auto;
     margin-right: auto;
     padding: 8px;
}

 .col90 {
     display: table;
     width:90%;
	 display: block;
     margin-left: auto;
     margin-right: auto;
     padding: 8px;
}

 .col100 {
     display: table;
     width:100%;
	 display: block;
     margin-left: auto;
     margin-right: auto;
     padding: 8px;
}
 .col-boutons {
	display: table-cell;
	text-align: center;
	padding: 8px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
 @media only screen and (max-width: 1000px) {
     .col {
         display: block;
         width: 100%;
    }
     #valeur_r,#valeur_g,#valeur_b,#texte1,#texte2,#texte3,#texte4,#texte5,#texte6,#texte7{
        font-size:25px;
    }
}
 h1 {

     top:0;
     text-align: center;
     font-size:45px;

}
.top {

     top:0;
     text-align: center;
     font-size:45px;

}
 h2 {
     opacity:0.6;
     border-radius:8px;
     background: white;
     font-size:30px;
     padding: 8px;
     font-family:"Segoe UI",Arial,sans-serif;
     font-weight:400;
     margin:10px 0;
}
 .soutitre {
	  position:-webkit-sticky;
     position:sticky;
     top:0;
     text-align: justify;
	 background:rgba(10,21,34,0.10);
	     margin-left: auto;
     margin-right: auto;
     font-size:15px;
     padding: 8px;
}
 .centrer {
     text-align: center;
}
 .hamb {
	position: absolute;
	z-index: 1;
	font-family: Lucida Sans Unicode;
	top: 0px;
	right: 31px;
	font-size: 55px;
	margin: 20px 0;
	padding: 5px;
	color: yellow;
	height: 67px;
}
 .hamb:hover {
     color:white;
     transition: color 0.4s ease-in-out;
     cursor: pointer;
}

 .hamb2 {
	position: absolute;
	z-index: 1;
	font-family: Lucida Sans Unicode;
	top: 0px;
	right: 31px;
	font-size: 85px;
	margin: 20px 0;
	padding: 5px;
	color: yellow;
	}
	 .hamb2:hover {
     color:green;
     transition: color 0.4s ease-in-out;
     cursor: pointer;
}
/*BANDEAU*/

.bandeau{
	position:absolute;border:0px;padding:0px;margin:0px;top:0px;left:0px;
	z-index:3;
}
 .tableau {
     position:-webkit-sticky;
     position:sticky;
     top:0;
    z-index:1;
     display: block;
     color:black;
     width:70%;
     text-align:center;
      background:rgba(10,21,34,0.5);
     margin-left: auto;
     margin-right: auto;
     padding: 5px;
}


/*input*/
 .taille{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.12);
    border-radius:6px;
    background:#FFFFFF;
    font-size:20px;
    padding:6px 6px;
    text-align:center;
    position:-webkit-sticky;
     position:sticky;
     top:0;
     width:40%;
     display: block;
     margin-left: auto;
     margin-right: auto;
     opacity: 0.8;
    position:sticky;
}

/*pourles titres*/
 .jaune{
    color:#000;
    background-color:#FFCC00;
}

 .vert{
    color:#fff;
    background-color:#4caf50;
}

 .fond-noir{
    color:white;
	text-align:center;
    background-color:black;
}
 .rouge{
    color:#fff;
    background-color:#FF0000;
}

 .bleu{
    color:#fff;
    background-color:#0000FF;
}

/*ombres*/
 .card,.card-2{
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
 .card-4,.hover-shadow:hover{
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.9),0 4px 20px 0 rgba(0,0,0,0.19)
}
 .card-4,.hover-shadow:hover{
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}
/*anims*/
 .animate-fading{
    animation:fading 5s linear
}
@keyframes fading{
    0%{
        opacity:0
    }
	25%{
        opacity:0.25
    }
    50%{
        opacity:0.5
    }
	75%{
        opacity:0.75
    }
    100%{
        opacity:1
    }
}
 .animate-opacity{
    animation:opac 0.8s
}
@keyframes opac{
    from{
        opacity:0
    }
     to{
        opacity:0.7
    }
}


/*OPACITE*/

 .opacity-max{
    opacity:0.25
}
.opacity-min{
    opacity:0.7
}
.opacity-xmin{
    opacity:0.1
}
 .display-bottommiddle{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%)
}
 .display-container{
    position:relative
}

/*MENU*/
 #leMenu {
     text-align:left;
     top: 50%;
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
}
 .overlay {
     height: 100%;
	 text-align:left;
	 overflow-wrap: break-word;
     width: 0;
     position: fixed;
     z-index: 2;
     top: 0;
     left: 0;
	 color:#000;
     background:rgba(10,21,34,0.85);
	
     overflow-x: hidden;
     transition: 0.8s;
	 box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	 color: #aaaaaa;

}
 .overlay-content {
     position: relative;
	 padding: 8px;
     top: 25%;
     width: 100%;
     text-align: left;
     margin-top: 30px;
	 color: #aaaaaa;
}
 .overlay a {
     padding: 8px;
     text-decoration: none;
     font-size: 24px;
     color: #ffffff;
     display: block;
     transition: 0.3s;
}
 .overlay span {
     padding: 8px;
     text-decoration: none;
     font-size: 24px;
     color: black;
     display: inline;
     transition: 0.3s;
     cursor: pointer;
}
 .overlay span:hover, .overlay span:focus {
     color: #d2d6f0;
}
 .overlay a:hover, .overlay a:focus {
     color: #ffff00;
}
 .overlay .closebtn {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 20px;
}




/*SLIDERS*/

 .slidecontainer {
     width: 100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
     padding: 30px;
}
 .slider {
     -webkit-appearance: none;
     width: 80%;
     height: 15px;
     background:linear-gradient(.25turn, black, red);
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity 1.2s;
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 .slider2 {
     -webkit-appearance: none;
     width: 80%;
     height: 15px;
     background:linear-gradient(.25turn, black, green);
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity 1.2s;
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 .slider3 {
     -webkit-appearance: none;
     width: 80%;
     height: 15px;
     background:linear-gradient(.25turn, black, blue);
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity 1.2s;
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 .slider:hover {
     opacity: 1;
}
 .slider2:hover {
     opacity: 1;
}
 .slider3:hover {
     opacity: 1;
}
 .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 25px;
     height: 25px;
     background: #CCCCCC;
     cursor: pointer;
     border-color:#666 
}
 .slider2::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 25px;
     height: 25px;
     background: #CCCCCC;
     cursor: pointer;
}
 .slider3::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 25px;
     height: 25px;
     background: #CCCCCC;
     cursor: pointer;
}
 .slider::-moz-range-thumb {
     width: 25px;
     height: 25px;
     background: #ffffff;
     cursor: pointer;
}
 .slider2::-moz-range-thumb {
     width: 25px;
     height: 25px;
     background: #ffffff;
     cursor: pointer;
}
 .slider3::-moz-range-thumb {
     width: 25px;
     height: 25px;
     background: #ffffff;
     cursor: pointer;
}

 .menu {
    font-family: "Times New Roman", Times, serif;
    position:-webkit-sticky;
     position:sticky;
     top:0;
	 border-radius:8px;
    z-index:1;
     box-shadow:0 4px 10px 0 rgba(0,0,0,0.2);
     width:80%;
     text-align:center;
     background:rgba(10,21,34,0.85);
     margin-left: auto;
     margin-right: auto;
     padding:6px;
	 display:table;
	 color:#CCC;
	 
}

 .menu2 {
    font-family: "Times New Roman", Times, serif;
	border-radius:8px;
   margin:5px; 
        margin-left: auto;
     margin-right: auto;
                padding:5px; 

                width: 80%; 
                height: 230px; 
                overflow: auto; 
                text-align:justify; 
				color:#CCC;
                background:rgba(10,21,34,0.85);
 
	 
}

 .menu3 {
    font-family: "Times New Roman", Times, serif;
	text-align:center;

        margin-left: auto;
     margin-right: auto;
                padding:5px; 

                width: 80%; 

                overflow: auto; 
                text-align:justify; 
				color:#CCC;

 
	 
}

 .menu4 {
    font-family: "Times New Roman", Times, serif;
    position:-webkit-sticky;
     position:sticky;
     top:0;
	 border-radius:1px;
    z-index:1;
     width:80%;
     text-align:center;
     background:white;
     margin-left: auto;
     margin-right: auto;
     padding:6px;
	 display:table;
	 color:#000;
 
	 
}

 .menu5 {
    font-family: "Times New Roman", Times, serif;

     top:0;
	 border-radius:8px;
    z-index:1;
     box-shadow:0 4px 10px 0 rgba(0,0,0,0.2);
     width:85%;
     text-align:center;
     background:rgba(10,21,34,0.85);
     margin-left: auto;
     margin-right: auto;
     padding:5px;
	 display:table;
	 color:#CCC;
	 overflow: auto; 
	 
}
 .col33 {
     width:33%;
     text-align:center;
	 vertical-align:top;
     margin-left: auto;
     margin-right: auto;
	 display:table-cell;
	vertical-align: middle;
}
 .col50 {
     width:50%;
     text-align:center;
	 vertical-align:top;
     margin-left: auto;
     margin-right: auto;
	 display:table-cell;
}
 .col67 {
     width:100%;
	 vertical-align:top;
	 overflow: auto; 
	 margin-left: auto;
     margin-right: auto;
	 display:table-cell;


}
/*bouttons*/
 .button{
  display: block;
  text-align:center;
  width:50%;
  border: 1px solid gray;
  border-radius: 8px;
  padding: 5px 15px 5px 10px;
  background-color: #F5E68C;
  font-size:15px;
  color:#000;
  cursor: pointer;


     margin-left: auto;
     margin-right: auto;

}
 .button2{
  display: block;
  text-align:center;
  width:25%;
  border: 1px solid gray;
  border-radius: 8px;
  padding: 5px 15px 5px 10px;
  background-color: #ee8800;
  font-size:15px;
  color:#eee;
  cursor: pointer;


     margin-left: auto;
     margin-right: auto;

}

 .button3{
  display: inline;
  text-align:center;
  width:20%;
  border: 1px solid gray;
  border-radius: 8px;
  padding: 5px 15px 5px 10px;
  background-color: #88aa33;
  font-size:15px;
  color:#eee;
  cursor: pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;


     margin-left: auto;
     margin-right: auto;

}
 .button:hover{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
    color:#666;
    opacity: 1;

}
 .button2:hover{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
    color:#fff;
    opacity: 1;

}
 .button{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
/* Dropdown */

.dropdown {
  display: inline-block;
  position: relative;
}

.dd-button {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 8px;
  padding: 5px 15px 5px 10px;
  background-color: #ffffff;
  font-size:15px;
  cursor: pointer;
  white-space: nowrap;
    font-size:21px;
	text-align:center;
	     margin-left: auto;
     margin-right: auto;
}

.dd-button2 {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 8px;
  padding: 5px 15px 5px 10px;
  background-color: #F5E68C;
  font-size:15px;
  cursor: pointer;
  white-space: nowrap;
    font-size:21px;
	text-align:center;
	     margin-left: auto;
     margin-right: auto;
}

.dd-button3 {
  display: inline-block;
  border: 1px solid white;
  border-radius: 8px;
  padding: 7px 15px 5px 10px;
  background-color: #FF6600;
  font-size:15px;
  cursor: pointer;
  white-space: nowrap;
    font-size:21px;
	text-align:center;
	     margin-left: auto;
     margin-right: auto;
}

.dd-button:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-70%);
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid grey;
}

.dd-button:hover {
  background-color: #eeeeee;
}
.dd-button2:hover {
  background-color: #eeeeee;
}
.dd-button3:hover {
  background-color: #eeeeee;
}

.dd-input {
  display: none;
}

.dd-menu {
  position: absolute;
  top: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  margin: 2px 0 0 0;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
  background-color: #ffffff;
  list-style-type: none;
}

.dd-input + .dd-menu {
  display: none;
} 

.dd-input:checked + .dd-menu {
  display: block;
} 

.dd-menu li {
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.dd-menu li:hover {
  background-color: #f6f6f6;
}

.dd-menu li a {
  display: block;
  margin: -10px -20px;
  padding: 10px 20px;
}

.dd-menu li.divider{
  padding: 0;
  border-bottom: 1px solid #cccccc;
}

/*shake!

h1:hover {
   Start the shake animation and make the animation last for 0.5 seconds 
  animation: shake 0.5s;

   When the animation is finished, start again 
  animation-iteration-count: infinite;
}*/
/*anims*/
 .animate-fading{
    animation:fading 10s linear
}
@keyframes fading{
    0%{
        opacity:0
    }
    50%{
        opacity:0.5
    }
    100%{
        opacity:0.7
    }
}
 .animate-opacity{
    animation:opac 0.8s
}
@keyframes opac{
    from{
        opacity:0
    }
     to{
        opacity:0.7
    }
}
 #leMenu {
     text-align:center;
     top: 50%;
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 0;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: grey;
  border: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  margin: 0;
  position: relative;
  box-shadow: 0px 0px 1px #474747;
    border-radius: 50%;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 4rem;
  padding: .4rem;
  border: none;
  border-width: 0 2px;
  font-size: 1.5rem;
  height: 2rem;
  font-weight: bold;
  text-align: center;
  background-color: #212121;
  color:#9be3df;
}