#btnProjet, header  nav, #titre h2, #retour #icon-back-projet, #contenu-image .miniatures, #contenu-image .image-principal, #button-tester  {
   display:none;
}
#btnProjetMobile, #btnFiltreMobile, #iconeMenuMobile, #menuPrincipalMobile, #retour h1, #page-info-mobile, #retour #icon-back-projet-mobile, #contenu-image #image-mobile, #button-testerMobile {
  display:block;
}
body{
  font-family:"Roboto-Thin";
}

header {
  position:static;
  background:#FF7336;
  height:50px;
  z-index:999;
  width:100%;
  box-shadow: 0px 5px 10px 0px rgba(150, 150, 150, 0.2);
  line-height:80px;
}
#projets .conteneur {
  max-width:90%;
  margin:auto;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size:1em;
}

#iconeMenuMobile {
  width:30px;
  height:30px;
  margin:10px;
  z-index:9998;
  position:absolute;
}
#menuPrincipalMobile {
  position:fixed;
  top:50px;
  width:100%;
  height:150px;
  background:rgba(21, 21, 21, 0.9);
  margin:auto;
  z-index:9998;
}
#menuPrincipalMobile nav {
  width:70%;
  height:100%;
  display: flex;
  flex-direction: column;;
  justify-content: space-around;
  margin:auto;
}
#menuPrincipalMobile nav a {
  text-decoration: none;
  color:white;
  display:block;
  font-size:1.7em;
}


#btnFiltreMobile{
  width:100%;
  text-align:center;

}
#btnFiltreMobile button {
  width:90%;
  height:50px;
  text-decoration:none;
  border: none;
  box-shadow: 1px 1px 10px 0px rgba(150, 150, 150, 0.2);
  margin:10px auto;
}

#btnFiltreMobile{
  width:90%;
  text-align:center;
  display:flex;
  margin:auto;
  z-index:1;
  position:relative;
}
#btnFiltreMobile button {
  height:50px;
  text-decoration:none;
  border: none;
  box-shadow: 1px 1px 10px 0px rgba(150, 150, 150, 0.2);
  margin:10px auto;
  margin-right:5px;
  flex:1;
}
#typeSelectionne {
  flex:1;
  background:#FF7336;
  height:50px;
  line-height:50px;
  color:white;
  margin:auto;
  margin-left:5px;
}
#btnProjetMobile {
  z-index:9999;
  position:absolute;
}
#btnProjetMobile button:first-child {
  margin-top:10px;
}
#contenu, #contenu-form {
  padding-top:80px;
  padding:0;
}
#titre {
  width:100%;
  height:auto;
  margin:10px auto;
}
h1 {
  position:absolute;
  top:0;
  width:100%;
  font-size:1em;
  text-align: center;
  font-family:"Roboto-Light";
  margin:0;
  padding:0;
  height:50px;
  line-height:50px;
  color:white;
}
a.list-projets {
  text-decoration:none;
  color:#212121;
}
.list-projets{
    color:white;
    font-size:0.8em;
    display:inline-block;
    transition: all 0.5s;
    margin:5px auto;
    width:100%;
    height:100px;
    text-align:center;
    background:white;
    border: solid rgb(200, 200, 200) 1px;
    background-size: cover;
    background-position: center;
}
.list-projets:hover {
  transform:scale(1);
  box-shadow:0px 0px 10px 0px rgba(100, 100, 100, 0.3);
}
.list-projets h3 {
  font-family:"Roboto-Light";
  font-size:1.4em;
  margin:15px;
}
b {
  font-weight:bold;
}



.boutonActive, .boutonNoActive {
    /* margin:10px 0px; */
    padding:10px;
    cursor:pointer;
}
.boutonNoActive {
  background:rgba(250, 250, 250);
}
.boutonActive{
  background:#FF7336;
  color:white;
}
.boutonNoActive#bouton-All:hover {
  background:none;
  color:black;
}
.boutonNoActive#bouton-Web:hover {
  background:none;
  color:black;
}
.boutonNoActive#bouton-Multimedia:hover {
  background:none;
  color:black;
}
.boutonNoActive#bouton-Infographie:hover {
  background:none;
  color:black;
}
.boutonNoActive#bouton-Musique:hover {
  background:none;
  color:black;
}
.boutonNoActive#bouton-MotionDesign:hover {
  background:none;
  color:black;
}





.translateLeft-enter-active, .translateLeft-leave-active {
  transition: all .3s;
}
.translateLeft-enter, .translateLeft-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform:translateX(-100%);
}


.translateRight-enter-active, .translateRight-leave-active {
  transition: all .3s;
}
.translateRight-enter, .translateRight-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform:translateX(100%);
}

.fade-enter-active, .fade-leave-active {
  transition: all .3s;
  position:absolute;
  left:0px;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.projetTransition-leave-active {
  position:absolute;
}
.projetTransition-enter, .projetTransition-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(100px);
}


#pageProjet{
  position:absolute;
  top:0;
  background:white;
  margin:0;
  width:100%;
  z-index:9999;
}
#gauche {
  margin:0px;
  width:100%;
  margin:0;
}
#droite {
  display:none;
}
/* #droite h1 {
  text-align: :center;
  font-size:3em;
} */
#retour {
  width:100%;
  height:50px;
  line-height:50px;
  background:#FF7336;
  color:white;
  font-size:1em;
  margin:0px 0px;
  padding:0px 0px;
  box-sizing:border-box;
}
#retour #icon-back-projet-mobile {
  display:inline;
  width:30px;
  height:30px;
  margin:10px;
  cursor:pointer;
}
#retour span {
  display:none;
}
#bandeau {
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  width:90%;
  height:200px;
  margin:20px auto;
  padding:0;
  border:none;
}
#encart {
  background:white;
  margin:0px auto;
  padding:0px 10px;
  width:100%;
  height:67%;
  border:solid #FF7336 1px;
  box-sizing: border-box;
}
#encart ul {
  height:100%;
  display:flex;
  flex-direction: column;;
  justify-content: space-around;
  margin:0;
  padding:0;
}
#encart ul li {
  margin:0;
  padding:0;
  font-size:1.2em;
  color:#FF7336;
  font-family:"Roboto-Light";
}
#button-testerMobile {
  margin:0px auto;
  padding:0;
  text-align:center;
  width:100%;
  background:#FF7336;
  display:flex;
  transition: all 0.2s;
  height:30%;
  /* border:solid #FF7336 1px; */
  box-shadow:2px 2px 10px 0px rgba(200, 200, 200, 0.7);
  background-position: center;
  background-size:cover;
}
#button-testerMobile a {
  display:block;
  color:white;
  font-size:2em;
  text-decoration:none;
  margin:auto;
  transition: all 0.2s;

}

#descriptif {
  text-align:justify;
  margin:0px auto;
  width:80%;
  font-size:1.2em;
}
#descriptif p {
  margin-top:20px;
  margin-bottom:20px;
  line-height:1.1em;
}
.affichage-projet-enter-active, .affichage-projet-leave-active {
  transition: all 0.5s;
}
.affichage-projet-enter, .affichage-projet-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform:translateX(-100%);
}

.fadePage-enter-active, .fadePage-leave-active {
  transition: all 0.4s;
}
.fadePage-enter, .fadePage-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity:0;
}

#page-info-mobile {
  position:fixed;
  top:0;
  width:100%;
  min-height:100%;
  z-index:9999;
  background:rgba(21, 21, 21, 0.9);
}
#page-info-mobile img {
  position:absolute;
  top:20px;
  right:20px;
  width:20px;
  height:20px;
}

#page-info-mobile p {
  font-size:1em;
  color:white;
  text-align:justify;
  margin:20px auto 15px auto;
  width:90%;
}
#page-info-mobile p:nth-of-type(1){
  font-size:1em;
  color:white;
  text-align:justify;
  margin:45px auto 15px auto;
  width:90%;
}
#page-info-mobile .lien-cv-mobile {
  color:white;
  min-width:50%;
  height:50px;
  line-height:50px;
  text-align:center;
  margin:25px auto;
  background:#FF7336;
}
#page-info-mobile .lien-cv-mobile a {
  text-decoration:none;
  color:white;
}

.fade-information-mobile-enter-active, .fade-information-mobile-leave-active {
  transition: all 0.4s;
}
.fade-information-mobile-enter, .fade-information-mobile-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity:0;
}

#contenu-form {
  padding-top:0px;
}
#contenu-form form {
  width:100%;
  margin:30px auto;
  background:rgb(240, 240, 240);
  padding:20px;
}
#contenu-form > p {
  width:90%;
  margin:15px auto;
  font-size:1.2em;
}
#contenu-form > p:first-child {
  font-size:1.5em;
}
#contenu-form .ok {
  background:rgb(100, 200, 100);
  padding:20px;
  color:white;
}
#contenu-form .ko {
  background:rgb(200, 100, 100);
  padding:20px;
  color:white;
}
#contenu-form form .bt {
  display: inline-block;
}
#contenu-form form .bt input {
  border:none;
  background:#FF7336;
  margin:10px;
  color:white;
  width:100px;
  height:40px;
  line-height:40px;
  box-shadow:0px 0px 20px 0px rgba(200, 200, 200, 0.5);
}
#contenu-form p label input, #contenu-form p label textarea {
margin:10px 0px 20px 0px;
width:85%;
}
#contenu-form form .previsualiser {
  display:none !important;
}

/****************
GALERIE
******************/

#contenu-image {
  width:100%;
  height:100%;
  background:rgb(21, 21, 21);
  display:block;
}
#contenu-image #image-mobile {
  margin:auto;
  width:90%;
  flex:8;
  /* padding:50px; */
  text-align:center;
  display:flex;
  justify-content: space-around;
  height:100%;
}
#contenu-image #image-mobile img.principal {
    margin:auto;
}
#contenu-image iframe {
  margin:auto;
}
#contenu-image #image-mobile .fleches {
  margin: auto;
  width:20px;
}
#contenu-image #image-mobile .fleches:last-child {
  transform:rotateZ(180deg);
}