body, html {
 padding: 0px;	 
 margin: 0px;
 font-family: 'Raleway', sans-serif;
 height: 100%;
}

body {
 width: 100%;
 min-width: 100%;
 height:99%;
 display: table;
 margin-bottom: 10px;
}

#tech {
 display:none;
}

#widget {
 width: 500px;
 height: 200px;
 position: absolute; 
 top:0px;
 right: 10px;
 background-color: white;
 overflow:hidden;
}

#header{
 display: flex;
 padding-left: 20px;
 background-color: white;
}

h2, h3 {
 text-align: right;
}

#header h1, h2, h3 {
 flex: 1 1 auto;
 padding: 10px;
 margin: 10px;
 font-size: 1.6em;
}

h4 {
 background-color: orange;
 padding: 3px;
 padding-left: 5px;
}

table {
    border-collapse: collapse;
    border: 2px black solid;
    font: 12px sans-serif;
}

td {
    border: 1px black solid;
    padding: 5px;
}

#containerFlex {
 display:flex;
 flex-direction: row;
 flex-wrap: wrap;
}

#menu {
 background-color: white;
 margin-top: 20px;
 flex: -1 -1 290px;
}

#left, #sm1 {
 text-decoration: none;
 list-style-type: none;
}

#content a {
 /*border-bottom: 1px solid orange;*/
}

a, #left li a {
 text-decoration: none;
 padding: 5px;
 color: #ACACAC;
}

#left li::before  {
  content:"\f0da";
  font-family: FontAwesome;
  padding-right: 5px;
  color: #ACACAC;
}

#left li:hover::before {color: red;}


#content {
 background-color: white;
 float:left;
 max-width: 50%;
 text-align:justify;
 line-height: 1.6;
 flex: 1 1 auto;
 padding: 10px;
 padding-left: 25%;
 min-height:99%;
 height:99%;
 padding-right: 40px;
}

#footer {
 width: 99%;
 text-align: center;
 color: black;
 padding: 5px;
 font-size: 0.9em;
 display:block;
 bottom:0px;
 display: table-row;
 height: 30px;
}

/*-------------- classes --------- */
.titrePage, .nom,.partie {
 text-transform: uppercase; 
 font-weight: bold;
}

.partie {
 background-color: #ACA;
 font-size: 1.1em;
}

.nom {
 font-size: 0.9em;
 border-bottom: 1px solid black;
}

.video {
 list-style-type:none;
}

.imgMenu {
 width: 110px;
 margin:-9px;
}

@media (max-width: 1150px){
 #widget {
  position: relative;
 }
}

@media (max-width:630px) {
 html, body {
  width: 300px;
 }
 #menu {
  margin-left: 20%;
  display:none;
 }
 #widget {
 position: relative;
 }
 #content {
  padding: 10px;
  margin:0px;
  max-width:100%;
  flex:none;
 }
 h1, h2, h3 {
  font-size: 1em;	
 }
 #footer {
  font-size: 0.5em;
 }
}

@media (max-width: 330px) {
 #body {
  width: 300px;
 }
 #content {
  max-width: 90%;i
  flex:none;;
 }
 #menu {
  display:none;
 }
}