.body{
    background-color: ##FFFFFF;
    height:250vw;
    cursor:url("images/curseur1.cur"),crosshair;
  }
  html, body {
    margin:0;
    padding:0;
    }
  
  a{
    cursor:url("images/curseur2.cur"),default;
    color:#0b0bb3;
    text-decoration:none; 
  }
  a:link {
    text-decoration:none; 
  }
  
  h1{
    font-size:1.5em;
    color:#0b0bb3;
    font-family: 'Francois One', sans-serif;
  }
  h2{
    font-size:1em;
    color:#0b0bb3;
    font-family: 'Francois One', sans-serif;
  }
  
  h3{
    font-size:1em;
    color:#ffc637;
    font-family: 'Francois One', sans-serif;
  }
  
  h4{
    font-size:0.9em;
    color:#ffc637;
    font-family: 'Abel', sans-serif;
  }
  
  p1{
    color:#0b0bb3;
    font-family: 'Francois One', sans-serif;
    text-align:justify;
  }
  
  p2{
    font-size:0.9em;
    color:#ffc637;
    font-family: 'Abel', sans-serif;
  }
  p{
    font-size:0.9em;
    color:#0b0bb3;
    font-family: 'Abel', sans-serif;
    text-align:justify;
  }
  
  .HEADER{
    width:100%;
    height:10vw;
    position :fixed;
    z-index:1;
    background-color: rgba(0,0,0,0);
  
  }
  .HEADER img {
    width:100%;
    height:10vw;
  }
  
  .mail{
    position :fixed;
    z-index:1;
    background-color: rgba(0,0,0,0);
    margin-left:73vw;
    margin-top:-7vw;
  }
  .mail img {
    width:auto;
    height:2vw;
  }
  .insta{
    position :fixed;
    z-index:1;
    background-color: rgba(0,0,0,0);
    margin-left:83vw;
    margin-top:-5vw;
  }
  .insta img {
    width:auto;
    height:2vw;
  }
  
  .soleil{
  width:10%;
  height:20%;
  margin-top: 35vw;
  position :fixed;
  z-index:1;
  cursor:url("images/curseur1.cur"),default;
  }
 .gifsoleil{
    width:10vw;
    height:10vw;
    position :fixed;
    bottom:0;
    left:0;
    margin:0;
    padding: 0;
    z-index:1;
    background-color:rgba(0,0,0,0);
    overflow: hidden;
    }
    .gifsoleil img{
      width: 100%;
      height: auto;
    }
  
  .apropos{
  background-color: rgba(0,0,0,0);
  width:25%;
  height:45%;
  margin-left:3vw;
  bottom:8vw;
  text-align: justify;
  position :fixed;
  display:none;
  }
  .soleil:hover .apropos{
      display:inline-block;
      }
  
  
  
  .CONTENU{
    background-color:#FFFFFF; 
  }
    .Accueil{
    background-color: rgba(0,0,0,0);
    height:50vw;
    margin-bottom: 7vw;
    padding-left :0; 
    }
    .Accueil img {
        height:50vw;
        width :100%;
      }
  
      .FOOTER{
    width:100%;
    height:10vw;
    background-color: rgba(0,0,0,0);
    text-align:center;
    }
  
  .FOOTER img {
    width:100%;
    height:10vw;
  }
  .footertexte img{
    width:auto;
    height:4vw;
  }

  .contenu-projet{
      display: flex;
      width:95%;
      height:30vw;
      margin:3vw 0 5vw 0; 
      padding: 0 0 0 2.5vw;

  }

  .contenu-x3 img, .contenu-x2 img, .contenu-x1 img{
    width:auto;
    height:30vw;
    z-index: 1;
}
  .contenu-x3{
    flex:3;
  }
  .contenu-x2{
    flex:2;
  }
  .contenu-x2imgmono{
    width:45vw;
    height:30vw;;
  }
  .contenu-x1{
    flex:1;
  }
  .contenu-x1imgmono{
    width:20vw;
    margin:0 2.5vw 0 1.5vw;
  }
  
  

  .texte{
      padding: 0 4vw 0 4vw;
      z-index: 1;
      vertical-align: middle;
  }
  .boutoncinema:hover ~ .cible{
    opacity: 1;
    transition-duration: 200ms;
  }
  .boutoncinema:hover ~ .mono img{
    mix-blend-mode:normal;
    -webkit-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
    opacity: 1;
    transition-duration: 200ms;
  }

  .boutonimgmonodroite:hover ~ .cible{
    opacity: 1;
    transition-duration: 200ms;
  }
  .boutonimgmonodroite:hover ~ .mono img{
    mix-blend-mode:normal;
    -webkit-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
    opacity: 1;
    transition-duration: 200ms;
  }

  .boutonnuit:hover ~ .cible{
    opacity: 1;
    transition-duration: 200ms;
  }
  .boutonnuit:hover ~ .mono img{
    mix-blend-mode:normal;
    -webkit-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
    opacity: 1;
    transition-duration: 200ms;
  }

  .survol:hover ~ .cible{
    opacity: 1;
    transition-duration: 200ms;
  }

  .mono:hover{
    background:none;
    transition-duration: 200ms;
  }
  .mono:hover img{
    mix-blend-mode:normal;
    -webkit-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
    opacity: 1;
    transition-duration: 200ms;
    cursor:url("images/curseur2.cur"),default;
}
  .cible{
    opacity: 0;
    transition-duration: 200ms;
  }
  
  .mono{
    background: #0d0db2;
    transition-duration: 200ms;
    }
  .mono img{
    mix-blend-mode: screen;
    -webkit-filter: grayscale(100%) contrast(200%);
    filter: grayscale(100%) contrast(200%);
    opacity: 1;
    transition-duration: 200ms;
    height:30vw;
    width:auto;
  }


.boutoncinema{
  position:absolute;
  display: block;
  width:20vw;
  margin-left: 22vw;  
  /*background-color: lightsalmon;
  opacity:0.5;*/
  z-index:1;
  cursor:url("images/curseur2.cur"),default;
  height: 30vw;
}
.boutonimgmonodroite{
  position:absolute;
  display: block;
  width:45vw;
  margin-left:49vw;
  /*background-color: lightsalmon;
  opacity:0.5;*/
  z-index:1;
  cursor:url("images/curseur2.cur"),default;
  height: 30vw;
}
.boutonnuit{
  position:absolute;
  display: block;
  width:20vw;
  margin-left: 50.5vw;  
  /*background-color: lightsalmon;
  opacity:0.5;*/
  z-index:1;
  cursor:url("images/curseur2.cur"),default;
  height: 30vw;
}


  @media screen and (max-width:600px)
  {
    .body{
      background-color:#FFFFFF;
      height:auto;
      width: auto;
      overflow: hidden;
      cursor:url("images/curseur1.cur"),crosshair;
    }
    .Accueil{
      background-color: rgba(0,0,0,0,);
      height:98vh;
      padding-left :0; 
      margin-left: -52vw;
      overflow : hidden;
      }
      .Accueil img {
          height: 100%;
          width :auto;
        }
        .HEADER img {
          width:100%;
          height:10vw;
        }
        
        .mail{
          position :fixed;
          z-index:1;
          background-color: rgba(0,0,0,0);
          margin-left:47vw;
          margin-top:-7vw;
        }
        .mail img {
          width:auto;
          height:4vw;
        }
        .insta{
          position :fixed;
          z-index:1;
          background-color: rgba(0,0,0,0);
          margin-left:67vw;
          margin-top:-3vw;
        }
        .insta img {
          width:auto;
          height:4vw;
        }


          .contenu-projet{
          display: block;
          position: relative;
          width:95%;
          height:auto;
          margin:15vw 0 25vw 0; 
          padding: 0 0 0 2.5vw;
    
      }
      .texte{
        padding: 0 4vw 4vw 4vw;
        z-index: 1;
        vertical-align: middle;
    }
      
      
    .contenu-x3 img, .contenu-x2 img, .contenu-x1 img{
    width:100%;
    height:auto;
    z-index: 1;
    }
    .contenu-x3{
    height:auto;
    }
    .contenu-x2{
    height:auto;
    }
  
    .contenu-x1{
    opacity:1;
    height:auto;
   }
   .contenu-x2imgmono{
    opacity:1;
    height:auto;
    width:100%;
    margin: 0;
    }
  .contenu-x1imgmono{
    opacity:1;
    height:auto;
    width:100%;
    margin: 0;
    }

    .mono{
    background:none;
    transition-duration: 0;
    overflow: hidden;
    }
    .mono img{
    mix-blend-mode:normal;
    -webkit-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
    opacity: 1;
    transition-duration: 0ms;
    height:auto;
    width:100%;
    }*/
  
    .soleil{
    width:10%;
    height:20%;
    margin-top: 35vw;
    position :fixed;
    z-index:1;
    cursor:url("images/curseur1.cur"),default;
    }

    .gifsoleil{
    width:20vw;
    height:20vw;
    position :fixed;
    bottom:0;
    left:0;
    margin:0;
    padding: 0;
    z-index:1;
    background-color:rgba(0,0,0,0);
    overflow: hidden;
    }
    .gifsoleil img{
      width: 100%;
      height: auto;
    }
    .apropos{
    background-color:white;
    width:calc(100% - 35vw);
    height:auto;
    position :fixed;
    display:none;
    margin: 0 0 0 20vw;
    padding:2vw 3vw 2vw 3vw;
    bottom:0;
    left:0;
    overflow: hidden;
    }
    .soleil:hover .apropos{
        display:inline-block;
        }
        p2{
          display: block;
          font-size:0.9em;
          color:#ffc637;
          font-family: 'Abel', sans-serif;
        }
        .FOOTER{
          width:100%;
          height:40vw;
          margin-bottom:-10vw;
          background-color: rgba(0,0,0,0);
          text-align:center;
          }
        
        .FOOTER img {
          width:100%;
          height:10vw;
        }
        .footertexte img{
          width:auto;
          height:4vw;
        }



  }