body {
  font-family: 'Poppins', sans-serif;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-weight: lighter;
  color: black;
}

#Body-Accueil {
  overflow-y: hidden;
}

#Accueil {
  min-height: 100vh;
  width: 100vw;
  bottom: -1rem;
  position: relative;
  overflow-y: hidden;
}

#Main-Container {
  width: 100%;
  height: 100%;
}

#Accueil #By-Leonor {
  position: relative;
  margin-left:2vw;
  margin-bottom: 2vw;
  flex-wrap: wrap;
}

#Accueil #By-Leonor h2{
  font-size:2vw;
}


#By-Leonor h2{
  font-weight: lighter;
}

.Liens-Flottants {
  position: fixed;
  top: 4.5rem;
  width: 2rem;
  display: flex;
  z-index: 9;
  flex-direction: column-reverse;
  right: 2rem;
}

.Liens-Flottants img {
  right:0;
  position: relative;
  width: 2rem;
  height: 2rem !important;
  object-fit: contain !important;
  margin: .25rem 0;
}

#Work{
  height:100%;
  width:100%;
}

#Work .Liens-Flottants, #About .Liens-Flottants, #Contact .Liens-Flottants {
  /*! right: 0rem; */ 
}

#About .Liens-Flottants .Retour-Home-Noir { 
}

#About .Liens-Flottants .Retour-Home-Rouge {
  display: none; 
}

#Accueil-Col-Titre {
  width: 100vw;
  position: absolute;
}

.Titre-Portfolio h1{
  font-size: 29vw;
  line-height: 25vw;
  padding: 0;
  color: black;
}

.Titre-Portfolio {
}

.Titre-Portfolio h1 a{
  color:initial ;
  text-decoration: none;
  z-index: 9;
}

@keyframes turnOnLoad {
  0% {
    transform: rotateY(360deg);
    opacity:1;
  }
  100% {
    transform: rotateY(0deg);
    opacity:0;
  }
}

@keyframes turnOnLoadMobile {
  0% {
    transform: rotateY(0deg);
    opacity:1;
  }
  100% {
    transform: rotateY(360deg);
    opacity:1;
  }
}

.Background-O{
  position: absolute;
  z-index: -1;
  width: 11vw;
  transition:1s;
  transform:
  rotateY(-360deg);
  margin-left: 3.5vw;
  margin-top: 9vw;
}

.Work-Link-O .Background-O{
  /*! margin-left: 3.5vw; */
  /*! margin-top: 9vw; */
}

.About-Link-O .Background-O{
  /*! margin-left: 3.5vw; */
  /*! margin-top: 9vw; */
}

.Contact-Link-O .Background-O{
  /*! margin-left: 3.5vw; */
  /*! margin-top: 9vw; */
}

.Work-Link-O:hover .Background-O, .About-Link-O:hover .Background-O, .Contact-Link-O:hover .Background-O{
  opacity: 1;
  color: white;
  position: absolute;
  transition:1s;
  transform: rotateY(0deg);
}

.Titre-Hover {
  font-size: 1.2rem;
  color: white;
  position: absolute;
  margin-left: 5vw;
  margin-top: 2vw;
  transition:1s;
}

 .Contact-Link-O .Titre-Hover{
}

.Work-Link-O:hover .Titre-Hover, .About-Link-O:hover .Titre-Hover, .Contact-Link-O:hover .Titre-Hover {
  opacity: 1;
}


.Work-Link-O a:hover, .About-Link-O a:hover, .Contact-Link-O a:hover {
  /*! transition:1s; */
}


/* Toutes Pages*/

#Titre-Page-Work h1, #Titre-Page-About h1, #Titre-Page-Contact h1{
  font-size:18vw;
  margin-bottom: 0;
  height: 20vw;
}

#By-Leonor.About, #By-Leonor.Work {
  position: absolute;
  right: 2rem;
  top: 2rem;
}

#Titre-Page-Work .Fond-O-Titre, #Titre-Page-About .Fond-O-Titre, #Titre-Page-Contact .Fond-O-Titre {
  background-repeat: no-repeat;
  background-size: 11vw;
  background-position: 50% 50%;
}

#Titre-Page-About, #Titre-Page-Contact {
  position:absolute;
}



/*Page About*/

#Body-About {
  overflow:hidden;
}

#Portrait img {
  object-fit: cover;
}

#About {
  background-color: #E3E3E3;
  height: 100vh;
}

#Description p {
  font-weight: lighter;
}

#Titre-Page-About {
  top:calc(100vh - 20vw);
  right:5rem;
  color: white;
}

#Titre-Page-About .Fond-O-Titre {
  background-image: url(images/Fond-O-2.png);
}




/*Page Work */

#Titre-Page-Work {
  top:calc(50vh - 15vw);
  padding-left:2rem;
  color: black;
  z-index: 9;
  overflow: hidden;
  height: 17.5vw;
  position: relative;
}

#Titre-Page-Work .Fond-O-Titre {
  /*! background-image: url(images/Fond-O-1.png); */
}

#Work #Trois-Ellipses img {
  height: 5vw;
  margin: -1.5vw;
  left: -5vw;
  position: relative;
  top: -1vw;
}

.Link-Work {
  overflow: hidden;
  height: 100%;
}

.Link-Work img {
  height: 100%;
  width: 100%;
}

.Link-Work .Img-Container {
  height: 100%;
  width: 100%;
}

.Link-Work .content {
  height: 100%;
  width: 100%;
  position: relative;
  left: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.Link-Work .content a, .Link-Work .content{
  color:white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.Link-Work .content p {
  /*! height: 50%; */
  width: 100%;
  font-weight: lighter;
}

.Link-Work .content h3 {
  font-weight: 500;
  text-transform: uppercase;
}

.Voir-Le-Projet {
  font-weight: bold;
  border: 1px solid white;
  padding: .5rem 1rem;
  position: relative;
  width: fit-content;
  min-width: 10rem;
  text-align: center;
}

.Link-Work:nth-child(2n) .content:nth-child(2n) {
  transition:1s;
  transform:translate(0,-200%);
  top: -1px;
  width: 101%;
  height: 101%;
}

.Link-Work:hover:nth-child(2n) .content:nth-child(2n) {
  opacity: 1;
  transition:1s;
  transform:translate(0,-100%);
  top:0;
}

.Link-Work:nth-child(2n+1) .content{
  transition:1s;
  transform:translate(0,0);
  bottom:-1px;
  opacity:1;
  width: 101%;
  height: 101%;
}

.Link-Work:hover:nth-child(2n+1) .content {
  opacity: 1;
  transition:1s;
  transform:translate(0,-100%);
  top:0;
}

#Link-Work-1 img {
  object-fit: cover;
  object-position: 88% center;
}
#Link-Work-1 .content {
  background: #F762B8;
}

#Link-Work-2 img {
  object-fit: cover;
  object-position: 51% center;
}
#Link-Work-2 .content {
  background: #DE001A;
}

#Link-Work-3 img {
  object-fit: cover;
  object-position: 50% center;
}
#Link-Work-3 .content {
  background: #9B0006;
}

#Link-Work-4 img {
  width: 91rem;
  height: auto;
  top: -25rem;
  right: 42rem;
  position: relative;
}
#Link-Work-4 .content {
  background: #F762B8;
}

#Link-Work-5 img {
  width: 91rem;
  height: auto;
  top: -5rem;
  right: 39rem;
  position: relative;
}
#Link-Work-5 .content {
  background: #DE001A;
}

/* Page Contact*/

#Ligne-Contact-Bas {
  margin: 0.5vw;
  position: relative;
  left: 2vw;
}

#Ligne-Contact-haut {
  left: 5vw;
  position: relative;
  bottom: 5vw;
}

#Contact p {
  font-weight: lighter;
  max-width: 29rem;
  padding-right: 3rem;
}

#Contact #Trois-Ellipses img {
  height: 5vw;
  margin: 0.5vw;
  position: relative;
  top: -1vw;
}

#Trois-Ellipses a:hover {
  transform: rotateY(360deg);
  transition: .5s;
}

#Titre-Page-Contact {
  top: 5vw;
  color: black;
  z-index: 9;
  overflow: hidden;
  height: 17.5vw;
}

/* Pages Projets*/

.Fleche-Bas {
  height: 2rem;
  width: 2rem;
  position: fixed;
  top: calc(100vh - 3rem);
  right: 2rem;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: 9;
}

.Fleche-Bas img{
  height: 2rem;
  width: 2rem;
  -webkit-animation: downarrow 0.6s infinite alternate ease-in-out;
}

@-webkit-keyframes downarrow {
  0% { -webkit-transform: translateX(.2rem); opacity: 0.4; }
  100% { -webkit-transform: translateX(-.2rem); opacity: 0.9; }
}

.Entete-Projet {
  width: 100vw;
  height: 100vh;
}
#By-Leonor.Projets {
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: 9;
}

.Entete-Projet img {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.Entete-Projet .Portrait-Image {
  overflow: hidden;
  height: 100%;
  width: 100%;
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0px,0,0);
}

#Projet-Columbia .Portrait-Image {
  background-image: url(images/Entete-Columbia.png);
  width: 100%;
  /*! background-attachment: fixed; */
  background-repeat: no-repeat;
  background-size: cover;
  /*! min-height: 100vh; */
  background-position: 50% 0px;
}

#Projet-Ecobox .Portrait-Image {
  background-image: url(images/Work-Link-2.png);
  width: 100%;
  /*! background-attachment: fixed; */
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-position: 50% 0px;
  }

#Projet-Roxy .Portrait-Image {
  background-image: url(images/Entete-Roxy.png);
  width: 100%;
  /*! background-attachment: fixed; */
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-position: 50% 0px;
}

#Projet-Vrac .Portrait-Image {
  background-image: url(images/Entete-Vrac.png);
  height: 100%;
  width: 100%;
  /*! background-attachment: fixed; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0px;
}

#Projet-Meg .Portrait-Image {
  background-image: url(images/Entete-Meg.png);
  height: 100%;
  width: 100%;
  /*! background-attachment: fixed; */
  background-repeat: no-repeat;
  background-position: 50% 0; 
  background-size: 100vh;
}

.liens-Flottants a {
  height: 100%;
  width: 100%;
  position: relative;
  margin-top: 0.25rem;
}



#Projet-Columbia .Liens-Flottants .Retour-Home-Rouge, 
#Projet-Ecobox .Liens-Flottants .Retour-Home-Rouge, 
#Projet-Roxy .Liens-Flottants .Retour-Home-Rouge,
#Projet-Vrac .Liens-Flottants .Retour-Home-Rouge,
#Projet-Meg .Liens-Flottants .Retour-Home-Rouge{
  display: none;
}

#Projet-Columbia .Liens-Flottants .Retour-Work-Rouge, 
#Projet-Ecobox .Liens-Flottants .Retour-Work-Rouge,
#Projet-Roxy .Liens-Flottants .Retour-Work-Rouge,
#Projet-Vrac .Liens-Flottants .Retour-Work-Rouge,
#Projet-Meg .Liens-Flottants .Retour-Work-Rouge{
  display: none;
}

.Entete-Projet .Description {
  padding-bottom: 5rem;
  margin-top: 5rem;
}

.Titre-Projet h1 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.Entete-Projet #Trois-Ellipses {
  width: 5rem;
  margin: 2rem;
  top: 1vw;
  position: absolute;
}
.Entete-Projet #Trois-Ellipses img {
  margin: .3vw;
}

.Corps-Projet .Presentation h3 {
  font-size: 3vw;
  color: #DE001A;
}
.Presentation {
  padding: 10vw 0;
  background: #BCBCBC;
}

.Corps-Projet .Presentation h3 {
}
.Presentation p {
  color: white;
  padding: 1rem;
}
.Presentation .Illustration {
  overflow: hidden;
}
.Ligne-Images {
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 0;
}

.Ligne-Images .Image-1 {
  height: auto;
  width: 140%;
  left: -28%;
  position: relative;
}
.Presentation .Illustration-1 {
  /*! height: 25vw; */
  width: 100%;
}

.Ligne-Images .Image-2 {
  height: 15vw;
  position: relative;
}
.Presentation .Illustration-2 {
}

.Ligne-Images .Image-3 {
  height: auto;
  position: relative;
  width: 100%;
}
.Presentation .Illustration-3 {
  height: 30vw;
  width: 100%;
}

.Video-Promo {
  margin-top: 30vw;
}

.Video-Promo.Story-Teaser {
  margin-top: 15vw;
}

.Video-Promo.Making-Of {
  margin-top: 15vw;
  margin-bottom: 10vw;
}

.Video-Promo h3 {
  text-transform: uppercase;
  margin-bottom:3rem;
}

.Video-Promo #Trois-Ellipses {
  margin-left: .7rem;
  display:flex;
  
}

.Video-Promo #Trois-Ellipses img {
  height: 1rem;
  margin-top: .5rem;
  margin-left:.2rem;
}

/* Page Ecobox */

.Illustration.Illustration-Ecobox {
  margin-top: -8vw;
}

.Images-Page-Ecobox {
  margin: 3rem 0 0 0;
  background-color: #E3E3E3;
}

button {
  background: white;
  border: none;
  padding: 1vw 2vw;
  font-size: 3vw;
  color: #DE001A;
  transition:.5s;
}

button:hover {
  transition:.5s;
  transform: scale(.9);
}

/* Page Projet Roxy*/
.Illustration.Roxy.Illustration-1 {
  height: 25vw;
}
.Illustration.Roxy.Illustration-1 .Image-1 {
  height: auto;
}
.Illustration.Roxy.Illustration-2 {
  height: 20vw;
  width: 100%;
}
.Illustration.Illustration-2 .Image-2 {
  height: auto;
  width: 100%;
}
.Illustration.Roxy.Illustration-3 {
  height: 25vw;
}

.Illustration.Roxy.Illustration-3 .Image-3 {
  height: auto;
}

#Projet-Roxy .Video-Promo {
  margin-top: 25rem;
  margin-bottom: 10rem;
}

.Container-Background-Gris{
  position:relative;
}

.Background-Gris {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #E3E3E3;
  margin-top: 30vw;
  z-index: -2;
}

/* Page En Vrac */

.Illu-Presentation-Vrac.img-fluid {
  padding-top: 0rem;
}
#Projet-Vrac .Presentation {
  padding: 0;
  overflow: hidden;
}

#Projet-Vrac .Presentation .col-md-5 {
  padding-bottom: 10vw;
}

.Illu-Presentation-Vrac {
  width: 70vw;
  margin-bottom: -18vw;
  /*! position: absolute; */
  overflow: hidden;
  object-position: center;
  object-fit: cover;
  height: 52vw;
}

.Images-En-Vrac {
  background-color: #E3E3E3;
  padding-bottom: 10vw
}

.Images-En-Vrac img{
  margin-top: 10vw;
}

#Projet-Vrac .Video-Promo{
  margin:5vw 0;
}

/* Page Meg */

#Projet-Meg .Video-Promo {
  margin-top: 5rem;
}

#Projet-Meg .Video-Promo #Trois-Ellipses {
  margin-top: 2rem;
}

#Projet-Meg .Corps-Projet{
  padding-bottom:5rem
}







/* < XS ----------- */
@media only screen and (max-width : 576px) {
  
  .Titre-Portfolio h1 {
  font-size: 46vw;
  line-height: 42vw;
  flex-wrap: wrap;
  }
  
  .Work-Link-O .Background-O, 
  .About-Link-O .Background-O, 
  .Contact-Link-O .Background-O {
  margin-left: 4.5vw;
  margin-top: 12vw;
  width:22vw;
  }
  
  .Background-O{
  animation: 2s turnOnLoadMobile;
  }
  
  .Titre-Hover {
  animation: 2s turnOnLoadMobile;
  font-size: .6rem;
  color: white;
  position: absolute;
  margin-left: 8vw;
  margin-top: 4.5vw;
  transition: 1s;
  }
  
  .About-Link-O {
  margin-right: 50vw;
  }
  
  #Accueil #By-Leonor h2 {
  font-size: 13vw !important;
  }
  
  #About {
  height: initial;
  }
  
  #By-Leonor.About {
  color: white;
  }
  
  #Titre-Page-About {
  top:100vw;
  left:1rem;
  }
  
  #Contact #Trois-Ellipses img {
  height: 15vw;
  margin: 0.5vw;
  position: relative;
  top:-10vw;
  }
  
  #Ligne-Contact-Bas {
  left: -2vw;
  top: 18vw;
  }
  
  button{
  font-size:2rem;
  }
  
}


/* < SM ----------- */
@media only screen and (min-width : 576px) and (max-width : 768px) {
  
  .Titre-Portfolio h1 {
  font-size: 41vw;
  line-height: 34vw;
  flex-wrap: wrap;
  }
  
  .Work-Link-O .Background-O, 
  .About-Link-O .Background-O, 
  .Contact-Link-O .Background-O {
  margin-left: 4.5vw;
  margin-top: 10vw;
  width: 17vw;
  }
  
  .Titre-Hover {
  font-size: .8rem;
  color: white;
  position: absolute;
  margin-left: 7.5vw;
  margin-top: 4vw;
  transition: 1s;
  }
  
  #Accueil #By-Leonor h2 {
  font-size: 5vw;
  }
  
  #About {
  height: initial;
  }
  
  #By-Leonor.About {
  color: white;
  }
  
  
  #Titre-Page-About {
  top:100vw;
  left:1rem;
  font-size: 18vw;
  }
  
  #Contact #Trois-Ellipses img {
  height: 10vw;
  margin: 0.5vw;
  position: relative;
  top: -5vw;
  }
  
}


/* < MD ----------- */
@media only screen and (min-width : 768px) and (max-width : 992px) {
  
  .Titre-Portfolio h1 {
  font-size: 32vw;
  line-height: 24vw;
  margin: 0;
  padding: 0;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  }
  
  .Titre-Hover {
  font-size: .9rem;
  color: white;
  position: absolute;
  margin-left: 5.5vw;
  margin-top: 3vw;
  transition: 1s;
  opacity: 1;
  animation: 2s turnOnLoadMobile;
  }
  
  #About {
  height: 100%;
  }
  
  #Titre-Page-About h1 {
  font-size: 15vw;
  bottom: -10vw;
  }
  
  #Titre-Page-About {
  top:calc(100vh - 18vw);
  left:1rem;
  }
  
  #Titre-Page-About .Fond-O-Titre {
  background-size: 9vw;
  }
  
  #Projet-Columbia .Portrait-Image {
  background-size: cover;
  }
  
  #Projet-Roxy .Portrait-Image {
  /*! background-size: 85%; */
  /*! background-position: -25vw bottom; */
  }
  
}

/* < LG ----------- */
@media only screen and (min-width : 992px) and (max-width : 1200px) {

  
  #Projet-Roxy .Portrait-Image {
  /*! background-size: 66%; */
  /*! background-position: -16vw bottom; */
  }
  
  .Titre-Hover {
  font-size: 1.2rem;
  margin-left: 5.2vw;
  margin-top: 3vw;
  animation: 2s turnOnLoad;
  }
  
}

/* < XL ----------- */
@media only screen and (min-width : 1200px) and (max-width : 1400px) {

  .Titre-Hover {
  font-size: 1.2rem;
  margin-left: 5.2vw;
  margin-top: 3vw;
  }
  
  #Projet-Columbia .Portrait-Image {
  background-size: cover;
  }
  
  #Projet-Roxy .Portrait-Image {
  /*! background-size: 66%; */
  /*! background-position: -16vw bottom; */
  }

}

/* < XXL ----------- */
@media only screen and (min-width: 1400px) {
  
  .Titre-Hover {
  font-size: 1.4rem;
  margin-left: 5.5vw;
  margin-top: 3vw;
  }
  
  #Projet-Roxy .Portrait-Image {
  /*! background-position: -6vw bottom; */
  /*! background-size: 50%; */
  }

}







/* Queries non strictes ****************************************/


/* jusqu'à début MD */
@media only screen and  (max-width : 768px) {
  
  #Titre-Page-Work {
  top: calc(100% - 25vw);
  height:20vw;
  padding-left: 1rem;
  }
    
  #Titre-Page-Work h1{
  font-size:20vw;
  }
  
  #Work .Liens-Flottants {
  position: absolute;
  }
  
  #Body-About{
   overflow-y:scroll;
  }
  
  #About .Liens-Flottants .Retour-Home-Noir { 
  display:none;   
  }

  #About .Liens-Flottants .Retour-Home-Rouge {
    display: flex; 
  }
  
  #Projet-Columbia .Liens-Flottants .Retour-Home-Rouge, 
  #Projet-Ecobox .Liens-Flottants .Retour-Home-Rouge, 
  #Projet-Roxy .Liens-Flottants .Retour-Home-Rouge,
  #Projet-Vrac .Liens-Flottants .Retour-Home-Rouge,
  #Projet-Meg .Liens-Flottants .Retour-Home-Rouge{
  display: flex;
  }
  
  #Projet-Columbia .Liens-Flottants .Retour-Work-Rouge, 
  #Projet-Ecobox .Liens-Flottants .Retour-Work-Rouge,
  #Projet-Roxy .Liens-Flottants .Retour-Work-Rouge,
  #Projet-Vrac .Liens-Flottants .Retour-Work-Rouge,
  #Projet-Meg .Liens-Flottants .Retour-Work-Rouge{
  display: flex;
  }
  
  #Projet-Columbia .Liens-Flottants .Retour-Home-Noir,
  #Projet-Ecobox .Liens-Flottants .Retour-Home-Noir,
  #Projet-Roxy .Liens-Flottants .Retour-Home-Noir,
  #Projet-Vrac .Liens-Flottants .Retour-Home-Noir,
  #Projet-Meg .Liens-Flottants .Retour-Home-Noir{
  display: none;
  }
  
  #Projet-Columbia .Liens-Flottants .Retour-Work-Noir, 
  #Projet-Ecobox .Liens-Flottants .Retour-Work-Noir,
  #Projet-Roxy .Liens-Flottants .Retour-Work-Noir,
  #Projet-Vrac .Liens-Flottants .Retour-Work-Noir,
  #Projet-Meg .Liens-Flottants .Retour-Work-Noir{
  display: none;
  }
  
  #By-Leonor.Projets {
  color:white;
  }
  
  #Projet-Ecobox #By-Leonor.Projets, 
  #Projet-Meg #By-Leonor.Projets {
  color:black;
  }
  
  .Entete-Projet {
  height: 100%;
  }
  
  .Entete-Projet .Portrait-Image{
  height: 75vh;
  margin-bottom: 5rem;
  }
  
  #Projet-Columbia .Entete-Projet .Portrait-Image,
  #Projet-Ecobox .Entete-Projet .Portrait-Image,
  #Projet-Vrac .Portrait-Image{
  }
  
  #Projet-Meg .Portrait-Image {
  background-position:50% 0;
  }
     
  #Projet-Columbia .Entete-Projet .Portrait-Image,
  #Projet-Ecobox .Entete-Projet .Portrait-Image,
  #Projet-Roxy .Entete-Projet .Portrait-Image, 
  #Projet-Vrac .Entete-Projet .Portrait-Image,
  #Projet-Meg .Entete-Projet .Portrait-Image {
  height:50vh;
  width: 100%;
  /*! background-attachment: fixed; */
  background-repeat: no-repeat;
  }
  
  #Projet-Columbia .Entete-Projet .Portrait-Image{
  background-image: url(images/Entete-Columbia-Mobile.png);
  background-size: cover;
  }
  
  #Projet-Ecobox .Entete-Projet .Portrait-Image{
  background-size: cover;
  }
  
  #Projet-Roxy .Entete-Projet .Portrait-Image{
  background-image: url(images/Entete-Roxy-Mobile.png);
  /*! background-position: 50% 0px; */
  /*! background-size: 100%; */
  background-size: cover;
  }
  
  #Projet-Vrac .Entete-Projet .Portrait-Image{
  background-image: url(images/Entete-Vrac-Mobile.png);
  background-size: cover;
  }
  
  #Projet-Meg .Entete-Projet .Portrait-Image{
  background-size: cover;
  }
  
  .Entete-Projet #Trois-Ellipses {
  width: 8rem;
  margin: 3rem 0;
  top: 50vh;
  position: absolute;
  }
  
  .Entete-Projet .Description {
  padding-bottom: 5rem;
  margin-top: 1rem;
  }
  
  .Corps-Projet .Presentation h3 {
  margin:2rem 0;
  font-size: 2.5rem;
  }
  
  .Presentation {
  padding: 15vw 0;
  }
    
  .Presentation p {
  padding-left: 1.5rem;
  padding-bottom: 2rem;
  }
  
  #Projet-Columbia .Presentation p, #Projet-Roxy .Presentation p {
  padding-left: 0.8rem;
  }
  
    
  #Projet-Vrac .Presentation {
  padding-top: 10vw;
  overflow: hidden;
  }
    
  .Video-Promo.Story-Teaser h3 {
  margin-bottom: 0rem;
  }
  
  .Video-Promo {
  /*! margin-top: 10rem; */
  }
  
  #Projet-Roxy .Video-Promo {
  margin-top: 15rem;
  }
  
  #Projet-Roxy .Video-Promo {
  margin-top: 10rem !important;
  margin-bottom: 2rem !important;
  }
  
}

/* jusqu'à fin MD  */
@media only screen and  (max-width : 992px) {
  
  #Accueil #By-Leonor {
  position: relative;
  margin-left: 3vw;
  margin: 5vw 3vw;
  }
  
  #Accueil #By-Leonor h2 {
  font-size: 10vw;
  margin: 0;
  padding: 0;
  margin-bottom: 2rem;
  }
  
  
  .Background-O {
  width:12vw;
  margin-left: 4.5vw;
  margin-top: 8vw;
  opacity: 1;
  }
  
  #Projet-Roxy .Video-Promo {
  margin-top: 20rem;
  margin-bottom: 5rem;
  }
  
  .Background-O, .Titre-Hover{
   animation: 2s turnOnLoadMobile;
  }
    
}



/* depuis debut LG  */
@media only screen and  (min-width : 992px) {
  
  .Titre-Portfolio h1 {
  flex-wrap: nowrap;
  }
  
  .Background-O, .Titre-Hover{
   animation: 2s turnOnLoad;
    opacity:0;
  }
  
  
  
}