body {
  background-color:#ffffff;
  color:#ffffff;
}
form {
 margin: 0;
 padding: 0px;
 border: 0px;

}
p.left{text-align: left;}
p.center{text-align: center;}
p.right{text-align: right;}

img.valignmiddle{vertical-align: middle;}
img.stylegraphique{border:5px solid #f3f3f3}

 /* ----------------------------1. TABLEAUX-------------------------*/
 /* ----------------------------2. FORMULAIRES-------------------------*/
 /* ----------------------------3. TEXTES-------------------------*/
 /* ----------------------------4. CADRES-------------------------*/
 /* ----------------------------5. @media screen-------------------------*/


 /* ----------------------------1. TABLEAUX-------------------------*/

#table0 {
  border-collapse: collapse;
  width: 100%;
}
#table0 th,#table0 td {
  padding: 0px;
  vertical-align:middle;
  border: 0px;
}

#table1 {
  border-collapse: collapse;
  width: 100%;
}
#table1 th,#table1 td {
  padding: 20px;
  vertical-align:middle;
  border-bottom: 10px solid #ffffff;
}
#table1 tr {
  border-left: 5px solid #ffffff;
}
#table1 tr:nth-child(odd)  {background-color: #fafafa;}
#table1 tr:nth-child(even) {background-color: #fafafa;}
#table1 tr:hover {background-color: #f3f3f3;border-left: 5px solid #0073D5;border-right: 5px solid #0073D5;}

#table1bordbleu {
  border-collapse: collapse;
  width: 100%;
}
#table1bordbleu th,#table1bordbleu td {
  padding: 20px;
  vertical-align:middle;
}
#table1bordbleu tr {
  background-color: #f3f3f3;border-left: 5px solid #0073D5;
			}
#table2 {
  border-collapse: collapse;
  width: 100%;
}
#table2 th,#table2 td {
  padding: 10px;
  vertical-align:middle;
  border-bottom: 3px solid #ffffff;
}
#table2 tr:nth-child(odd)  {background-color: #fafafa;}
#table2 tr:nth-child(even) {background-color: #fafafa;}

/* ----------------------------1. TABLEAUX-------------------------*/

.tablebordsbleux {
    background-color: #fafafa;
    border-left:  5px solid #ffffff;
    border-right:  5px solid #ffffff; 
    margin-bottom: 10px;
    padding:20px;
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    }

.hidden {
	  display:none;
	}

.tablebordsbleux:hover {
    background-color: #f3f3f3;
    border-left:  5px solid #0073D5;
    border-right:  5px solid #0073D5; 
}
.tablebordsbleuxg {
    flex-grow: 1;
    width:50px;
    }
.tablebordsbleuxd {
    flex-grow: 0;
    width:50px;
    min-width:50px;
    text-align:right;
    }

.tablebordgauche {
background-color: #f3f3f3;
    border-left: 5px solid #0073D5;
    margin-bottom: 10px;
    padding:20px;
}

.tablebordhaut {
    background-color: #fafafa;
    border-top: 5px solid #0073D5;
    margin-top: 5px;
    margin-bottom: 2px;
    padding:10px;
    display:flex;
    flex-flow:row wrap;
    align-items: center;
}
.tablebordbas {
    background-color: #fafafa;
    border-bottom: 5px solid #0073D5;
    margin-bottom: 2px;
    padding:10px;
    text-align: right;
}
.tablereadytiers {
    padding:10px;
    text-align: center;
    flex-grow:1;
}
.tablereadytiersdisplaynone {
    padding:10px;
    text-align: center;
    flex-grow:1;
  display:none;
}
.tableready2 {
    background-color: #fafafa;
    border-bottom: 2px solid white;
    padding:10px;
    }
.tableready2form {
    padding: 0px;
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    }
.tableready2formvide {
    position:relative;
    padding: 0px;
    flex-grow:0;
    }
.tableready2bas {
    background-color: #fafafa;
    border-bottom: 2px solid white;
    padding:10px;
    text-align: right;
    }

.tablegame {
    background-color: #fafafa;
    border-bottom: 2px solid white;
    padding:10px;
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    }
.tablegameg {
    flex-grow: 0;
    width:50px;
    }
.tablegamem {
    flex-grow: 1;
    text-align:left;
    }
.tablegamed {
    flex-grow: 1;
    text-align:right;
    }

.tablevide {
    padding:0px;
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    }
.tablevideleft {
    flex-grow: 1;
    text-align: left;
    }
.tablevideright {
    flex-grow: 1;
    text-align: right;
    }


.affichjeuh0 {
    width:100%;
    background-image: url('imgadmin/fondapercu0.png');
    padding:10px;
    box-sizing: border-box;
}
.affichjeuh1 {
    width:100%;
    background-image: url('imgadmin/fondapercu1.png');
    padding:10px;
    box-sizing: border-box;
}
.affichjeub {
    width:100%;
    background-color:#fafafa;
    padding:10px;
    box-sizing: border-box;
    border: 1px solid #c0c0c0;
}

.affichjeuminetotal {
    width:100%;
    background-image: url('imgadmin/fondapercu2.png');
    padding:2px;
    box-sizing: border-box;
}

.affichjeumineh {
    width:100%;
    padding:10px;
    box-sizing: border-box;
    border: 0px;
}
.affichjeumineb {
    width:100%;
    background-color: rgba(255, 255, 255, 0.8);
    padding:5px;
    box-sizing: border-box;
    border: 0px;
}

#parentaccueilligne5entier {
margin: 0px 0px 20px 0px;
padding:0px;
width: 100%;
background-color: #f3f3f3;
border-left: 5px solid #0073D5;
display:flex;
flex-flow:row nowrap;
    align-items: center;
}
#ligne5g {
  margin:0px;
  width:75px;
  text-align: center;
  padding: 0px;
  box-sizing: border-box;
  flex-grow: 1;
}
#ligne5m {
  margin:0px;
  text-align: left;
  padding: 0px;
  box-sizing: border-box;
  flex-grow:4;
}
#ligne5d {
  margin:0px;
  border-left: 5px solid #0073D5;
  width:200px;
  height:205px;
  padding: 0px;
  flex-grow:0;
}



 /* ----------------------------2. FORMULAIRES -------------------------*/

input[type=text],textarea {
  padding: 5px 5px;
  margin: 1px 0;
  box-sizing: border-box;
  border: none;
  border: 1px solid #cecece;
  border-radius: 6px;
  background-color: #fafafa;
outline: none;
  color: #333333;
}

#pin {
  padding: 5px 5px ;
  box-sizing: border-box;
  border: 2px solid #cecece;
  border-radius: 4px;
  background-color: #D7F2FF;
outline: none;
  color: #333333;
      width: 20%;
       font-size: 30px;
       font-weight: bold;
      opacity: 0.6;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;

}

#pin:focus {
  background-color: #D7FfF2;
          opacity: 0.9;
}

input[type=text]:focus,textarea:focus {
  padding: 5px 5px;
  margin: 1px 0;
  box-sizing: border-box;
  border: none;
  border: 2px solid #cecece;
  border-radius: 4px;
  background-color: #D7F2FF;
outline: none;
  color: #333333;
}
input[type=password] {
  padding: 5px 5px;
  margin: 1px 0;
  box-sizing: border-box;
  border: none;
  border: 1px solid #cecece;
  border-radius: 6px;
  background-color: #fafafa;
outline: none;
  color: #333333;
}
input[type=password]:focus {
  padding: 5px 5px;
  margin: 1px 0;
  box-sizing: border-box;
  border: none;
  border: 2px solid #cecece;
  border-radius: 4px;
  background-color: #D7F2FF;
outline: none;
  color: #333333;
}
#inputrecherche {
  width: 150px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 20px;
  font-size: 16px;
  background-color: #fafafa;
  background-image: url('imgadmin/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
#inputrecherche:focus {
  background-color: #f3f3f3;
  width: 250px;
}
#dossiercollection {
  width: 228px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  background-color: #fff194;
  background-image: url('imgadmin/collectionnewfolder.png');
  background-position: 5px 5px; 
  background-repeat: no-repeat;
  padding: 5px 5px 5px 25px;
}

#editcollection {
  width: 208px;
  box-sizing: border-box;
  border: 0px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  background-color: #fff194;
  padding: 5px 5px 5px 5px;
}

button {
  background-color: #00AEFF;
  color: #ffffff;
  padding: 7px 15px;
  text-align: center;
  text-decoration: none;
   font-weight: bold;
  display: inline-block;
  font-size: 18px;
  border-radius: 25px;
  border: 0px solid #00AEFF;
  cursor: pointer;
}
button {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
button:hover {
  background-color: #0073D5; /* Green */
  color: white;
  border: 0px solid #0073D5;
}

 /* ----------------------------TEXTES -------------------------*/

gdtitrebleu {
   color:#0073D5;
   font-size: 2em;
   font-family: Arial, Helvetica, sans-serif;
}
gdtitrebleucurvi {
   color:#0073D5;
   font-size: 2.5em;
       font-weight:bold;
font-family: 'Euphoria Script', cursive;
}
gdtitreblanc {
   color:#ffffff;
   font-size: 4em;
   font-family: Arial, Helvetica, sans-serif;
   font-weight:bold;
}
moyengdtitreblanc {
   color:#FFFFFF;
   font-size: 2em;
   font-family: Arial, Helvetica, sans-serif;
}
gdtitregris {
   color:#333333;
   font-size: 2em;
   font-family: Arial, Helvetica, sans-serif;
}
a.gdtitregris {
   color:#333333;
   font-size: 2em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
titremoyengris {
   color:#333333;
   font-size: 1.5em;
   font-family: Arial, Helvetica, sans-serif;
}
titremoyenblanc {
   color:#ffffff;
   font-size: 1.5em;
   font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
}
a.titremoyenblanc {
   color:#ffffff;
   font-size: 1.5em;
   font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
       text-decoration: none;
}
titrebleu {
   color:#0073D5;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
}
titregris {
   color:#333333;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
}

a.titregris {
   color:#333333;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
a.liste {
   color:#333333;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
a.liste:hover {
   color:#0073D5;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
}
pttitrebleuciel {
   color:#00AEFF;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
a.pttitrebleuciel {
   color:#00AEFF;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
  font-weight: bold;
}
a.pttextebleu {
   color:#0073D5;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
a.pttextebleu:hover {
   color:#00AEFF;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
}
textegrisclair {
   color:#b0b0b0;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
}
pttextegrisclair {
   color:#b0b0b0;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
}
pttextegris {
   color:#333333;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
}
a.pttextegrisclair {
   color:#b0b0b0;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
a.textegrisclair {
   color:#b0b0b0;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
a.textegrisclair:hover {
   color:#b0b0b0;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
}
texteblanc {
   color:#ffffff;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
a.texteblanc {
   color:#ffffff;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
   text-decoration: none;
}
moyentexteblanc {
   color:#ffffff;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
}
a.moyentexteblanc {
   color:#ffffff;
   font-size: 0.9em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
a.moyentexteblanc:hover {
   color:#ffffff;
   font-size: 0.9em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
}
pttexteblanc {
   color:#ffffff;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
}
a.pttexteblanc {
   color:#ffffff;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
a.pttexteblanc:hover {
   color:#ffffff;
   font-size:0.8em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
}
gdtexteblanc {
   color:#ffffff;
   font-size: 2em;
   font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
texterouge {
   color:#ff0000;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
}
a.texterouge {
   color:#ff0000;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
    }

a.texterouge:hover {
   color:#ff0000;
   font-size: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: underline;
}
titrerouge {
   color:#ff0000;
   font-size: 2em;
   font-family: Arial, Helvetica, sans-serif;
}
titrebleuciel {
   color:#00AEFF;
   font-size: 2em;
   font-family: Arial, Helvetica, sans-serif;
}
a.titresmenu  {
    color:#bDbDbD;
   font-size: 1.2em;
   font-family: Arial, Helvetica, sans-serif;
   /*font-weight: bold;*/
   text-decoration: none;
}
a.titresmenu:hover {
 }
.buttonmenu {
  margin-top: 0px;
  padding: 2px 5px;
  display: inline-block;
  border-radius: 0px;
  border-bottom: 1.5px solid #333333;
  background-color: #333333;
opacity:0.9;
}
.buttonmenu:hover {
      background-color: #333333;
      border-bottom: 1.5px solid #BDBDBD;
}

a.titresmenumes  {
   color:#ADADAD;
   font-size: 1.5em;
       font-weight: bold;
font-family: 'Euphoria Script', cursive;
   text-decoration: none;    
}

 /* ----------------------------CADRES-------------------------*/

 /* ----------------------------CADRES index2------------------------*/

#lignegaucheverticaleindex {
  background-color:#00AEFF;
  background-image: url("imgadmin/logovertical.png");
  background-repeat: no-repeat;
  position:absolute;
  border:0px;
  left:0px;top:40px;
  width:40px;
  height:100%;
  position: fixed;
}

#connexionindex {
  position:absolute;
  border:0px;
  right:20px;
  top:0px;
    height:60px;
  width:50%;
  min-width:450px;
  display:flex;
  flex-flow:row nowrap;
  align-items: center;
}
#connexionindexg {
  border:0px;
  flex-grow: 1;
    text-align: right;
}
#connexionindexd {
  border:0px;
  flex-grow: 0;
}

#emailinvalide {
  position:absolute;
  position: fixed;
  padding: 2px;
  top:50px;
  right:195px;
  text-align: left;
  background-color:#ff0000;
  color:white;
  margin: 1px;
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  box-shadow:5px  5px 5px #eeeeee; 
  z-index: 6;
}
#mdpinvalide {
  position:absolute;
  position: fixed;
  padding: 2px;
  top:50px;
width:125px;
  right:70px;
  text-align: center;
  background-color:#ff0000;
  color:white;
  margin: 1px;
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  box-shadow:5px  5px 5px #eeeeee; 
  z-index: 6;
}

#lemotdepasseperdu{
  z-index: 2;
  height:200px;
  width:40%;
  position:absolute;
  top:150px;
  left:30%;
  text-align: right;
  color:black;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: none;
  border: 1px solid white;
  border-radius: 10px;
}

 /* ----------------------------fin CADRES index2------------------------*/
 /* ---------------------------- CADRES afficages complet et restreint------------------------*/
#cache {
display:none;
}
#haut {
  background-color:#333333;
  position:relative;
  border:0px;
  left:0px;top:0px;
  width:100%;height:60px;
  position: fixed;
  z-index: 5;
}

#logo {
  position:absolute;
  border:0px ;
  left:15px;top:12px;
}
#logohome {
  position:absolute;
  border:0px ;
  left:10px;top:12px;
display:none;
opacity:0.9;
}

#menu {
  position:absolute;
  border:0px solid red;
  left:20%;
  top:15px;
  width:50%;
  display:flex;
  flex-flow:row nowrap;
  justify-content: center;
  min-width:500px;
  max-width:900px; 
}
#menuanimation {
  position:absolute;
  border:0px solid yellow;
  left:25px;
  top:20px;
  position: fixed;
  z-index: 5;
}
.menutiers {
  border:0px;
  border:0px solid green;
  width:33%;
  min-width:166px;
  flex-grow: 1;
}
#compte {
  position:absolute;
  border:0px;
  right:15px;top:17px;
  color:#ffffff;
opacity:0.9;
}
#comptepetit {
  position:absolute;
  border:0px solid yellow;
  right:15px;top:17px;
  color:#ffffff;
opacity:0.9;
display:none;
}
#lignegauche {
  background-color:#00AEFF;
  background-image: linear-gradient(to top , #00AEFF, #00AEFF,#9900e5);
  position:absolute;
  border:0px;
  left:0px;top:0px;
  width:150px;
  height:100%;
  position: fixed;
  overflow: hidden;
}
#lignegaucheverticale {
  background-color:#00AEFF;
  background-image: url("imgadmin/logovertical.png");
  background-repeat: no-repeat;
  position:absolute;
  border:0px;
  left:0px;top:40px;
  width:40px;
  height:100%;
  position: fixed;
}

#conteneurgauche {
  color:#ffffff;
  position:absolute;
  position: fixed;
  border:0px;
  top:180px;
  left:20px;
  width: 120px;
  max-width: 120px;
  padding: 0px;
  text-align: right;
White-Space: Normal;
	    }
#bas {
  color:#ffffff;
  background-image: url("imgadmin/0fondbas.png");
  position:absolute;
  position: fixed;
  border:0px;
  bottom:0px;
  left:-50px;
  height:200px;
  width: 200px;
  padding: 100px 10px 0px 0px;
    box-sizing: border-box;
  text-align: right;
}

#lecompte {
  position:absolute;
  position: fixed;
  padding: 20px;
  top:45px;
  right:10px;
  background-color:#ffffff;
  margin: 1px;
  display: none;
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  box-shadow:1px  1px 1px #c0c0c0; 
  z-index: 6;
}
#langues {
  position:absolute;
  position: fixed;
  padding: 3px;
  top:55px;
  right:0px;
  background-color:#333333;
  margin: 0px;
  display: none;
  border: 0px solid #333333;
  border-radius: 0px;
  z-index: 6;
}
#lecomptecross{
  position:absolute;
  top:5px;
  right:5px;
}
hr.lecompte {
  border-top: 1px solid #c0c0c0;
}
.lecompteligne {
  border:0px;
  width:100%;
  display:flex;
  flex-flow:row nowrap;
  align-items: center;
  text-align:center;
            border: 0px solid blue;
}
.languesligne {
  border:0px;
  width:100%;
  display:flex;
  flex-flow:row nowrap;
  align-items: center;
  text-align:center;
            border: 0px solid white;
}
.lecompteligneg {
  border:0px;
  flex-grow: 0;
  text-align:left;
  width: 25px;
    border: 0px solid red;
}
.languesligneg {
  border:0px;
  flex-grow: 0;
  text-align:left;
  width: 23px;
    border: 0px solid red;
}
.lecompteligned{
  border:0px;
  flex-grow: 1;
  text-align:left;
        border: 0px solid green;
}
.languesligned{
  border:0px;
  padding : 0 0 0 10px;
  flex-grow: 1;
  text-align:left;
  background-color:#333333;
        border: 0px solid green;
}


 /* ----------------------------FIN CADRES afficages complet et restreint------------------------*/
 /* ---------------------------- CADRES QRcode------------------------*/
#leqrcode {
  position: relative;
  top: 100px;
  left: 25%;
  border:0px solid grey;
  width:670px;
  height:380px;
  display: none;
  z-index: 3;
}
#qrcodefond {
    position:absolute;
    top:0px;
    left:0px;
  border:0px solid grey;
  width:670px;
  height:380px;
  -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: example2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
   0% {background-color:#00AEAE;}
  25%  {background-color:#548ed4;}
  50%  {background-color:#b334f4;}
  75% {background-color:#00AEFF;}
  100% {background-color:#00AEAE;}
			   }
/* Standard syntax */
@keyframes example2 {
   0% {background-color:#00AEAE;}
  25%  {background-color:#548ed4;}
  50%  {background-color:#b334f4;}
  75% {background-color:#00AEFF;}
  100% {background-color:#00AEAE;}
		   }

#qrcodeimage {
    position:absolute;
    top:-30px;
    left:-30px;
        border:3px solid #333333;
  width:370px;
    height:370px;
}
#qrcodedroite {
    position:absolute;
    top:0px;
    left:370px;
        border:0px;
  width:280px;
    height:370px;
}
#qrcodepin {
    position:static;
      background-color:#333333;
        border:0px;
padding: 30px;
min-width:300px;
    text-align: center;
}
/* ----------------------------FIN CADRES QRcode------------------------*/
#panel1 {
  display: none;
  -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
}
#panel2 {
  display: none;
  -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
}
#panel3 {
  display: none;
  -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
  background-image: url("imgadmin/accueilcarte.png");
}
#accueil1 {
  background-image: url("imgadmin/accueil1.jpg");
}

#cadrevideo {
height:100px;
  background-image: linear-gradient(to right, #BB2A47 , #622A47);
}

#corps {
  position:absolute;
  border:0px;
  top:100px;
  left:20%;
  width:50%;
  min-width:500px;
  max-width:900px;
}
#corps2 {
  position:absolute;
  border:0px;
  top:180px;
  left:20%;
  width:50%;
  min-width:500px;
  max-width:900px;
}
#lejeu {
  position:absolute;
  position: fixed;
  padding: 0px;
  opacity: 1;
  top:150px;
  left:72.5%;
  width:250px;
  text-align: left;
  color:#333333;
  margin: 0px;
  display: none;
  border: 0px solid #c0c0c0;
  border-radius: 0px;
  z-index: 1;
}


#collection {
  position:absolute;
    position: fixed;
  padding: 0px;
  top:100px;
  left:72.5%;
  width:250px;
  text-align: left;
  color:#000000;
  margin: 0px;
  border: 0px;
}

#pub {
  position:absolute;
  top:100px;
  left:72.5%;
}

#pub2 {
  background-image: linear-gradient(to bottom right, #AF1E4B, #FF3232);
}

#notificationstudent {
    padding:2px 2px 2px 2px;
    border-radius: 10px;
    color:white;
    background-color: red;
    height:13px;
}

 /* ----------------------------5. @media screen-------------------------*/


@media screen and (max-width: 975px) {
  #lignegauche {
    display: none;
  }
  #conteneurgauche {
    display: none;
  }
  #bas {
    display: none;
  }
  #logo {
    display: none;
  }
  #logohome {
    display: block;
  }
#menu {
  left:90px;
  }
#corps {
  left:80px;
  }
#corps2 {
  left:80px;
  }
#lejeu {
  left:600px;
  }
#collection {
  left:600px;
  }
#pub {
  left:600px;
  }
}

@media screen and (max-width: 850px) {

#lejeu {
  left:-600px;
  }
#collection {
  left:-600px;
  }
#pub {
  left:-600px;
  }
}
@media screen and (max-width: 780px) {
  #compte {
    display: none;
  }
  #comptepetit {
    display: block;
  }
  #menu {
    left:75px;
  }
}
@media screen and (max-width: 820px) {
  #parentdashboardplus {
    display: none;
  }
}

@media screen and (min-width: 975px) {
#lignegaucheverticale {
  display:none;
  }
}

@media screen and (max-height: 400px) {
#bas {
  display:none;
  }
}

@-ms-viewport{
    width: device-width;
}



 /* ----------------------------SNOW-------------------------*/
 /* ----------------------------SNOW-------------------------*/
 /* ----------------------------SNOW-------------------------*/
 /* ----------------------------SNOW-------------------------*/
 /* ----------------------------SNOW-------------------------*/
.lasnow {
position:absolute;
  animation: turnsnow 10s linear infinite;
  left: 0px;
  Top : 150px;
  border: 0px solid #c0c0c0;
}

@keyframes turnsnow{
  0%{
    transform: scale(1) rotate(50deg) translate(-50px,-60px);opacity:0;
  }
  60%{
    transform: scale(2) rotate(-100deg) translate(30px,10px);opacity:0.2;transition-timing-function: ease-in;
  }
  90%{
    transform: scale(1.5) rotate(30deg) translate(60px,80px);opacity:0.3;transition-timing-function: ease-in;
  }
  100%{
    transform: scale(1) rotate(0deg) translate(60px,200px);opacity:0;
  }

}