* {
  box-sizing:border-box;
}

#btnProjetMobile, #btnFiltreMobile, #iconeMenuMobile, #menuPrincipalMobile, #retour #icon-back-projet-mobile,  #retour h1, #page-info-mobile, #image-mobile, #button-testerMobile  {
  display:none;
}
body{
  font-family:"Roboto-Thin";
  color:#212121;

}
header {
  width:100%;
  box-shadow: 0px 5px 10px 0px rgba(150, 150, 150, 0.2);
  height:100px;
  line-height:100px;
  position:fixed;
  background:white;
  z-index:9999;
}
header a:not(.icon-back) {
  text-decoration: none;
  color:black;
  font-size:1.6em;
  margin:auto 20px;
  padding:0px 10px;
  display:inline-block;
  /* height:100px; */
  transition:all 0.2s;
  z-index:9999;
  position:relative;
}
header a:not(.icon-back):hover {
  background:#FF7336;
  color:white;
}
header #liens-header .droite {
  float:right;
}
#contenu, #contenu-form {
    padding-top:100px;
}

h1 {
  position:absolute;
  top:0;
  width:100%;
  font-size:2.5em;
  text-align: center;
  font-family:"Roboto-Light";
}
h2{
    font-size:2.5em;
    margin:0px auto 50px auto;
}
#titre {
  width:770px;
  height:auto;
  margin:10px auto;
}
#liens-header {

}

#btnProjet {
  text-align:center;
  margin:30px auto;
}
#btnProjet button {
  text-decoration: none;
  /* border: none; */
  width:150px;
  height:60px;
  box-shadow:0px 0px 10px 0px rgba(100, 100, 100, 0.2);
  border:solid rgba(100, 100, 100, 0.2) 1px;
  border-radius: 50px;
  margin:0 10px;
  transition:box-shadow 0.2s;
}
#btnProjet button:hover {
  box-shadow:0px 3px 10px 3px rgba(100, 100, 100, 0.2);
}
#projets{

}
#projets .conteneur {
  max-width:90%;
  margin:auto;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size:1em;
}
.boutonActive, .boutonNoActive {
    padding:10px;
    cursor:pointer;
    /* transition:all 0.2s; */
}

.boutonNoActive {
  background:rgba(250, 250, 250);
}
.boutonActive{
  background:#FF7336;
  color:white;
}

a.list-projets {
  text-decoration:none;
  color:#212121;
}
.list-projets{
    color:white;
    border: solid rgb(200, 200, 200) 1px;
    font-size:0.8em;
    display:inline-block;
    transition: transform 0.5s, box-shadow 0.5s, background 0.2s, opacity 0.5s;
    margin:20px auto;
    width:300px;
    height:200px;
    text-align:center;
    background-size: 100% 100%;
    background-position: center;
    cursor:pointer;
    box-shadow:0px 0px 10px 0px rgba(100, 100, 100, 0.3);
}
.list-projets:hover {
  transform:scale(1.02);
  box-shadow:0px 0px 15px 0px rgba(100, 100, 100, 0.3);
}
.list-projets p {
  font-size:1.2em;
}
.list-projets h3 {
  font-family:"Roboto-Regular";
  font-size:2em;
  margin:30px;
}
.projetTransition-leave-active {
  position:absolute;
}
.projetTransition-enter, .projetTransition-leave-to {
  opacity: 0;
  transform: translateY(100px);
}
b {
  font-weight:bold;
}



.Web:hover { /*rouge*/
  background-image:url("../img/hover/red.png") !important ;
}
.Infographie:hover { /*rose*/
  background-image:url("../img/hover/pink.png") !important ;
}
.Multimedia:hover { /*orange*/
  background-image:url("../img/hover/orange.png") !important ;
}
.Musique:hover { /*jaune*/
  background-image:url("../img/hover/yellow.png") !important ;
}
.MotionDesign:hover { /*violet*/
  background-image:url("../img/hover/purple.png") !important ;
}
.Audiovisuel:hover { /*vert*/
  background-image:url("../img/hover/green.png") !important ;
}


.boutonNoActive#bouton-All:hover {
  background:rgba(255, 115, 54, 0.8);
  color:white;
}
.boutonNoActive#bouton-Web:hover {
  background:rgba(255, 44, 41, 0.8);
  color:white;
}
.boutonNoActive#bouton-Multimedia:hover {
  background:rgba(54, 139, 255, 0.8);
  color:white;
}
.boutonNoActive#bouton-Infographie:hover {
  background:rgba(220, 38, 151, 0.8);
  color:white;
}
.boutonNoActive#bouton-Musique:hover {
  background:rgba(246, 207, 63, 0.8);
  color:white;
}
.boutonNoActive#bouton-MotionDesign:hover {
  background:rgba(154, 120, 220, 0.8);
  color:white;
}


.boutonActive#bouton-All {
  background:rgba(255, 115, 54, 1);
  color:white;
}
.boutonActive#bouton-Web {
  background:rgba(255, 44, 41, 1);
  color:white;
}
.boutonActive#bouton-Multimedia {
  background:rgba(54, 139, 255, 1);
  color:white;
}
.boutonActive#bouton-Infographie {
  background:rgba(220, 38, 151, 1);
  color:white;
}
.boutonActive#bouton-Musique {
  background:rgba(246, 207, 63, 1);
  color:white;
}
.boutonActive#bouton-MotionDesign {
  background:rgba(154, 120, 220, 1);
  color:white;
}



/*Utile seuelment en mobile*/

#pageProjet{
  position:absolute;
  top:0;
  background:white;
  height:100%;
  width:100%;
  z-index:9999;
  display:flex;
  /* box-shadow:1px 0px 50px 0px rgba(200, 200, 200, 0.5); */
}
#gauche {
  flex:50%;
}
#droite {
  flex:50%;
  box-shadow:-2px 0px 50px 0px rgba(150, 150, 150, 0.5);
  z-index:9999;
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  display:flex;
}
#droite h2 {
  margin:auto 0px;
  width:100%;
  background:#FF7336;
  padding:20px;
  text-align:center;
  font-size:4em;
  color:white;
  font-family: "Roboto-Regular";
  /* font-variant: small-caps; */
}

#droite h2 a {
  text-decoration:none;
  color:white;
}
#retour {
  font-size:1.3em;
  margin:30px 20px;
  cursor:pointer;

}
#retour span {
  background:white;
  padding:15px 35px;
  border-radius:50px;
  color:black;
  transition: box-shadow 0.1s;
  box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.1);
  border:solid 1px rgba(21, 21, 21, 0.1);
  font-family:"Roboto-Light";
}

#retour span:hover {
  background:rgb(250, 250, 250);
  box-shadow:0px 2px 10px 3px rgba(50, 50, 50, 0.1);
  /* transform:scale(1.02); */
}

#retour #icon-back-projet {
  width:35px;
  height:35px;
  transform:rotateZ(90deg);
}
#encart {
  background:white;
  margin:0px auto;
  padding:0px 10px;
  width:50%;

}
#encart ul {
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  /* margin:auto 0; */
}
#bandeau {
  width:95%;
  display:flex;
  height:20%;
  margin:0 auto;
  border:solid #FF7336 1px;
  border-radius: 5px;
  box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.1);
}

#encart ul li {
  font-size:1.2em;
  color:#FF7336;
  font-family:"Roboto-Light";
}



#descriptif {
  text-align:justify;
  margin:50px auto;
  width:80%;
  font-size:1.2em;
  /* border-right:solid 1px rgba(21, 21, 21, 0.3); */
  border-left:dashed 2px rgba(21, 21, 21, 0.3);
  padding:10px;
  /* box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.1); */
}
#descriptif p {
  margin-top:20px;
  margin-bottom:10px;
  line-height:1.2em;
}
#descriptif p:nth-of-type(1){
  margin-top:0px;
}
#button-tester {
  text-align:center;
  width:50%;
  background:#FF7336;
  display:flex;
  transition: all 0.2s;
}
#button-tester a {
  display:block;
  color:white;
  font-size:2em;
  text-decoration:none;
  margin:auto;
  transition: all 0.2s;
  padding:15px 45px;
  border-radius:50px;
  background:#ffa984;
  box-shadow:0px 0px 5px 5px rgba(101, 101, 101, 0.1);
  transition:box-shadow 0.2s;
  font-family:"Roboto-Regular";

}
#button-tester a:hover {
    color:white;
    background:#c64e19;
    box-shadow:0px 0px 10px 3px rgba(50, 50, 50, 0.1);
    /* transform:scale(1.01); */
}

.affichage-projet-enter-active, .affichage-projet-leave-active {
  transition: all 0.8s ease-in;
}
.affichage-projet-enter, .affichage-projet-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform:translateY(-100%);
  /* transform:scale(0); */
}

.fadePage-enter-active, .fadePage-leave-active {
  transition: all 0.5s;

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

}


#page-informations{
  top:0;
  position:absolute;
  z-index:9999;
  width:100%;
  height:100%;
  display:flex;
  background:rgba(21, 21, 21, 0.5);
}
#informations {
  background:rgba(255, 255, 255, 0.95);
  width:50%;
  height:auto;
  margin:auto;
  position:relative;
  padding:20px;
}
#informations img {
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  z-index:9999;
}
#informations p {
  line-height:1.3em;
  width:70%;
  text-align:justify;
  margin:30px auto 0px auto;
  font-weight:bold;

  /* background:red; */
}
#informations .liens-cv {

  /* background:yellow; */
  margin:20px auto;
}
#informations .liens-cv a {
  display:block;
  width:300px;
  height:50px;
  line-height:50px;
  background:#FF7336;
  text-decoration:none;
  color:white;
  margin:auto;
  text-align: center;
  border-radius:50px;
  box-shadow:0px 0px 10px 0px rgba(100, 100, 100, 0.3);
  transition:background 0.2s, box-shadow 0.1s;
}
#informations .liens-cv a:hover {
  background:#f76627;
  box-shadow:0px 3px 10px 3px rgba(100, 100, 100, 0.2);
}


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

/*********************
FORMULAIRE
********************/


#contenu-form {
  padding-top:150px;
}
#contenu-form form {
  width:50%;
  margin:50px auto;
  background:rgb(240, 240, 240);
  padding:20px;
}
#contenu-form > p {
  width:60%;
  margin:20px 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;
}


/*******************
IMAGES
******************/

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

#contenu-image .miniatures .image-miniature {
  height:100%;
  margin:10px 0px 10px 0px;
}
#retour-image {
  position:absolute;
  top:15px;
  right:15px;
  width:20px;
  height:20px;
  cursor:pointer;
}