a{
  color:#eaeaea;
  text-decoration: none;
}
.ico{
  fill:none;
  stroke:#eaeaea;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icoSteamDl{
  display:none;
  fill:none;
  stroke:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  height:20px;
}
.icoSteamDlOriginal{
  display:block;
}
#imgActive
{
  display:none;
}
.imgActiveNone{
  display: block;
  stroke:#eaeaea;
}
.btnNoir:hover .imgActiveNone{
  stroke:#171A21;
}
 .btnNoir.active{
  background-color: #0A4159;
}
.active .imgActiveNone{
  display:none;
}
.active #imgActive
{
  display:block;
}

#menu1 span{
  width: 83px;
  /* overflow: hidden; */
}

#logo_min{
  display:none;
}

#logo{
width:180px;
padding-left: 25px;

transition: width .3s ease;
}

.logo{
  z-index:10;
  position:fixed;
  top:0;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  flex-wrap: nowrap;
  height:80px;
  width:250px;
  padding-left:25px;
}
.logo img{
  width:30px;
}
.logo svg{
  width:30px;
}
.btnMenu:hover{
  cursor: pointer;
}

nav .btnNoir{
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius:3px;
  background-color: rgba(234,234,234,0);
  box-shadow: 0px 3px 5px rgba(0,0,0,0);

  transition: all .2s ease;
}

nav .btnNoir:hover{
  background-color: rgba(234,234,234,1);
  color:#171A21;
  box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
}
nav .btnNoir:hover .ico{
  stroke:#171A21;
}
.btnNoir g {
  fill: none;
}
/*
body{
background: linear-gradient(#1C2630, #61686E);
} */

nav{
  background-color: #171A21;

  position: fixed;
  left:0;
  width:250px;
  height:100vh;

  z-index: 10;

  color:#eaeaea;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  /* font-weight: 400; */
  font-weight:400;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

  transition: width .3s ease;
}
nav ul {
  padding-left: 0;
}
nav.minNav {
  width: 80px;

}
#connexion{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width:100%;
  padding-top: 130px;


  transform: scale(1);
  transition: all .3s ease;
}

  .btn{

    border-radius: 3px;
    border: 2px solid #FCAB26;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 10px;
    color:#FCAB26;
    text-decoration: none;

  }
  .btn:hover{

    border: 2px solid #FCAB26;
    color:black;
    background-color: #FCAB26;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.3);

  }
  #containerMenu1{
    display: flex;
    position:fixed;
    justify-content: center;
    align-items: center;
    width:250px;
    left:0;
    top:0;
    height:100vh;
    pointer-events:none;

    transition: width .3s ease;

  }

#menu1{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:0;
  pointer-events:visible;

  width:100%;
}
li{
  list-style-type: none;

}

#menu1 a{
  display:flex;
  align-items: center;
}
#menu1 img{
  width:30px;
  padding-right: 10px;
  transition: padding-right .3s ease;
}
#menu1 svg{
  width:30px;
  padding-right: 10px;
  transition: padding-right .3s ease;
}

.containerNav{
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  padding-bottom:20px;
  width:100%;
  background-color: #171A21;

}

  #btnSteam{
    background-color: #FCAB26;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
    border-radius:3px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 10px;
    font-size: 14px;
    color:black;
    font-weight:700;


    display: flex;
    align-items: center;

    transition: all .3s ease;
  }
  #btnSteam img{
    width:20px;
    margin-right: 5px;
  }
  #btnSteam svg{
    width:20px;
    /* margin-right: 5px; */
  }
  #btnSteam:hover{
   color:black;
    background-color: rgb(240,240,240);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.3);

  }
nav #menu2{
  width:182px;
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  background-color: #171A21;
  transition: transform 0.3s ease;
}
nav #menu2 img{
  width:25px;
  padding-top: 5px;
  padding-bottom: 5px;
}
nav #menu2 svg{
  width:25px;
  padding-top: 5px;
  padding-bottom: 5px;
}

@keyframes bouton {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes a {
  from {
background-color: rgba(0,0,0,0);
box-shadow: 0px 3px 5px rgba(0,0,0,0);
}

  to {
background-color: rgba(0,0,0,1);
box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
  }
}
/* min-nav */

/* .minNav {
  animation: changeTaille 0.3s ease-in-out 0s;
  animation-fill-mode: forwards;
} */
.minNav .logo{
  padding-left: 25px;
}
.minNav #logo{
width:0px;
}
.minNav #connexion{
  transform: scale(0);
  font-size: 0px;
  opacity:0;
  pointer-events: none;
}

.minNav #connexion .btn{
 animation: animeIDConnexion 0.2s 0s ease-in-out;
  animation-fill-mode: forwards;

}
.minNav #connexion #animeConnexion{
 animation: animeIDConnexion 0.2s 0s ease-in-out;
  animation-fill-mode: forwards;

}
.minNav #containerMenu1
{
  width:80px;
  /* animation: changeTaille 0.3s 0s ease-in-out;
  animation-fill-mode: forwards; */
}
.maxNav #menu1 span
{
  animation: fontPADDING-2 .4s 0s ease reverse;
  animation-fill-mode: forwards;
}
.minNav #menu1 span
{
  animation: fontPADDING .4s 0s ease;
  animation-fill-mode: forwards;
}

.minNav #menu1 a
{
/* flex-direction: row; */
animation: fontTaille .4s 0s ease;
font-size: 16px;
animation-fill-mode: forwards;
/* padding-left: 0px;
padding-right: 0px; */
}
.maxNav #menu1 a
{
/* flex-direction: row; */
animation: fontTaille-2 .4s 0s ease reverse;
animation-fill-mode: forwards;
}

.minNav #btnSteam{
  /* animation: animeIDContainerNav 0.2s 0s ease-in-out;
   animation-fill-mode: forwards; */
   transform: scale(0);
   font-size: 0px;
 }

.minNav #menu1 img{
  padding-right: 0px;
  /* animation: menuImg 0.2s 0s ease-in-out;
  animation-fill-mode: forwards;} */


}
.minNav #menu1 svg{
  padding-right: 0px;
  /* animation: menuImg 0.2s 0s ease-in-out;
  animation-fill-mode: forwards;} */


}
.minNav #menu2{
  /* animation: menu2 0.2 0s ease-in-out ;
  animation-fill-mode: forwards; */
  transform: scale(0);
}

.minNav #menu1 .btnNoir{
    width: 80px;
    display: flex;
    justify-content: center;
    padding: 10px;
    padding-left: 0px;
    padding-right: 0px;
}
/* */
@keyframes menuImg {
  0%{
    padding-right: 10px;


  }
  100%{
    padding-right: 0px;
  }
} */
/*MAXNAV-------------------------------------------------------*/
/* .maxNav {
  animation: changeTaille-2 0.3s 0s ease-in-out;
  animation-fill-mode:forwards;

  transition: width 0.3 0s ease-in-out;

} */



/* @keyframes changeTaille {
  0%{
    width:250px;
  }
  100%{
    width:80px;
  }
} */
@keyframes animeIDContainerNav{
  from{
    opacity:1;
    font-size: 14px;
    pointer-events: visible;
    /* transform: scale(1), translateX(0px); */

  }
  to{
    font-size: 0px;
    opacity:0;
    pointer-events: none;
    /* transform: scale(0), translateX(-170px); */
  }
}
@keyframes animeIDConnexion{
  from{
    opacity:1;
    font-size: 16px;
    /* transform: scale(1), translateX(0px); */

  }
  to{
    font-size: 0px;
    opacity:0;
    pointer-events: none;
    /* transform: scale(0), translateX(-170px); */
  }
}
@keyframes changeTailleIDlogo {
  from{
    width:180px;
  }
  to{
    width:0px;
  }
}
@keyframes fontTaille {
  0%{
flex-direction: row;
  }
  50%{
flex-direction: row; }
  51%{
flex-direction:column;
  }
  100%{
    flex-direction:column;
  }
}
@keyframes fontTaille-2 {
  0%{
flex-direction: row;
  }
  50%{
flex-direction: row; }
  51%{
flex-direction:column;
  }
  100%{
    flex-direction:column;
  }
}
@keyframes fontPADDING {
  0%{
    width:83px;
    padding-top: 0px;
    opacity:1;
    font-size: 16px;
  }
  50%{
    width:0px;
    padding-top: 0px;
    opacity:0;
    font-size: 0px;
  }
  51%{
    width:80px;
    font-size: 0px;
    padding-top: 0px;
    opacity:0;
  }
  100%{
    width:80px;
    text-align: center;
    font-size: 10px;

    padding-top: 5px;
    opacity:1;
  }
}
@keyframes fontPADDING-2 {
  0%{
    width:83px;

    padding-top: 0px;
    opacity:1;
    font-size: 16px;

  }
  50%{
    width:0px;

    padding-top: 0px;
    opacity:0;
    font-size: 0px;
  }
  51%{
    width:0px;

    font-size: 0px;
    padding-top: 0px;
    opacity:0;
  }
  100%{
    width:80px;

    font-size: 10px;
    padding-top: 5px;
    opacity:1;
    text-align: center;

  }
}
@media screen and (max-width: 426px) {
  .icoSteamDl{
    display:block;
    margin-right:0px;
  }
  .icoSteamDlOriginal{
    display:none;
  }
  #apple{
    margin-right: 5px;
  }
  .noTransition, .noTransition * {
    transition: inherit!important;
  }
  .logo {
    width: 100%;
  }

nav{
  width:100vw;
  transition: height .3s ease;
}
#logo{
  display:none;
}
#logoMinContainer{
  position:absolute;
  width:100%;
  background-color: blue;
  height:80px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
#logo_min{
  display: block;
  z-index:100;
  width: 40px;
}
.logo{
  background-color: #171A21;
}

#containerMenu1{
  width:100vw;
  height:100vh;
  opacity:1;
}
.maxNav #containerMenu1{
  width:100vw;
  height:100vh;
  opacity:1;
  transition: all .3s ease;

}

nav.minNav
{
  width:100vw;
  height:80px;
}

.minNav #containerMenu1{
  width:100vw;
  height:80px;
  opacity:0;
  transition: all .3s ease;
}


/* .minNav #logo
{
  width:180px;
} */

.maxNav #menu1 a
{
flex-direction: row;

animation: fontTaille-425 0.3s 0.2s ease-in-out;
animation-fill-mode: forwards;

}


.maxNav #menu1 span
{
  /* animation: fontPADDING-425 0.3s 0.2s ease-in-out;
  animation-fill-mode: forwards; */
}
}

@keyframes fontTaille-425 {
  0%{
flex-direction: row;
  }
  50%{
flex-direction: row; }
  51%{
flex-direction:row;
  }

  100%{
    flex-direction:row;
  }
}
}
@keyframes fontPADDING-425 {
  0%{
    font-size: 0px;
    padding-top: 0px;
  }
  100%{
    font-size: 10px;
    padding-top: 5px;
  }
}