body{ display: flex;
      flex-direction: column;
      align-items: center;
      font-family: "neue-haas-grotesk-display", sans-serif;
      font-weight: 500; 
      margin: 0;
      hyphens: auto; }



section{width: 100%;}

a{text-decoration:none; color: #000;}
p{margin:0;}

img{width: 100%; height: 100%; }
video{width: 100%; height: 100%; object-fit: fill;}
iframe{position: absolute;
       width: 100%;
       height: 100%;
       top: 0px;
       left: 0px;}

#bold{font-weight: 700;}
#light{font-weight: 400;}
#italic{font-weight: 500; font-style: italic;}

#link:hover {
  text-decoration: underline dotted;
text-decoration-thickness: 2px;
  text-decoration-color: #b5b5b5;}

#LINK{text-decoration: underline dotted;
text-decoration-thickness: 2px;
  text-decoration-color: #b5b5b5;}


hr{border-top: 2px dotted #a0a0a0;
   border-bottom: 0;
   margin-top: -5px;
   margin-bottom: 20px;}


/*HEAD------------------------------------------------------------------------*/

#header{position: fixed;
        z-index: 10;
        width: 100%;
        height: 50px;
       font-weight: 700;
        font-size: 1.2em; 
       
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: ;
        font-size: 1.2em;
    
        box-shadow:0 0 100px rgba(0, 0, 0, 0.05);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(5px);}

.headDesktop{display: flex;
             justify-content: space-between;
             align-items: center;}

.headDesktop a {display: flex; align-items: center; width: 100%; height: 100%;}


#head01{padding-left: 20px;}

#head01:hover{background: #191919;
              transition: background .1s ease-in-out;}
#head01:hover a {color: #ffffff; transition: color .1s ease-in-out}
#head01{transition: background .1s ease-in-out;}
#head01 a{transition: color .1s ease-in-out}


#head02:hover{background: #191919;
              padding-left: 20px;
              transition: background .1s ease-in-out, padding-left .1s ease-in-out;}
#head02:hover a {color: #ffffff; transition: color .1s ease-in-out}

#head02{padding-left: 5px;transition: background .1s ease-in-out, padding-left .1s ease-in-out;}
#head02 a{transition: color .1s ease-in-out}

#head03:hover{background: #191919;
              padding-left: 20px;
              transition: background .1s ease-in-out, padding-left .1s ease-in-out;}
#head03:hover a {color: #ffffff; transition: color .1s ease-in-out}
#head03{padding-left: 5px;transition: background .1s ease-in-out, padding-left .1s ease-in-out;}
#head03 a{transition: color .1s ease-in-out}

#head04:hover{background: #191919;
              padding-left: 20px;
              transition: background .1s ease-in-out, padding-left .1s ease-in-out;}
#head04:hover a {color: #ffffff; transition: color .1s ease-in-out}
#head04{padding-left: 5px;transition: background .1s ease-in-out, padding-left .1s ease-in-out;}
#head04 a{transition: color .1s ease-in-out}

.headMobile{ display: none;}




@media only screen and (max-width:770px){
#header{ 
        display: flex; flex-direction: column;
        justify-content: center; align-content: center; }




.headDesktop{ display: none;}
.headMobile{ display: flex; flex-direction: row;
             justify-content: space-between;
             align-items: center; line-height: 1em;}
    

    
#head01{margin-left: 0px;}
#head02{width: 25px;}
#head03{display: none;}
#head04{display: none;}

#headLeft{margin-left: 10px; position: absolute; left:0; top: 10px;}
#headRight{margin-right: 10px; position: absolute; right:0; top: 20px;}
#headRight img{width: 30px;}

#headMenu{  
position: absolute;
    
          top: 65px;
          right: -100%;
          transition: right .5s ease-in-out;
          width: 100%;
          padding-bottom: 10px;
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(5px);}

#headMenu div{width: 100%;}
#headMenu a{margin-left: 10px; width: 100%;}

#headMenu hr{border-top: 2px solid #a0a0a0;
             border-bottom: 0;
             margin-top: 10px;
             margin-bottom: 10px;
             margin-left: 10px;
             margin-right: 10px;}

#headMenu #hr1{margin-top: 0px;}}

#hamburger{display:none ;}

#hamburger:checked ~ #headMenu{right:0%; transition: right .5s ease-in-out; }




 
/*ANIMATION------------------------------------------------------------------------*/


#animation-container {
  position: relative;
  height: 600vh; background: #191919;

}

#lottie-animation {
  position: sticky;
  top: 0;
  width: 100%;margin: 0;
}

.progress-bar-container {
  position: sticky;
  top: 50px;
  left: 0;
  height: 6px;
  width: 100%;
box-shadow:0 0 100px rgba(0, 0, 0, 0.05);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(5px);
  z-index: 1;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #007bff;
  transition: width 0.1s ease-out;
}



@media only screen and (max-width:770px){
    #animation-container{display: none;}}



/*INTRO------------------------------------------------------------------------*/


#intro01{margin: 80px 20px 60px 20px;font-size: 3em; }

@media only screen and (max-width:1100px){#intro01 {font-size: 2em;}}

@media only screen and (max-width:770px){#intro01 {margin: 20px 10px 20px 10px;font-size: 1em;}}

#introTitle{line-height: 1.1; font-size: .6em; font-weight: 600; margin-bottom: 10px;}
#introTitle a{color: #a0a0a0; }
@media only screen and (max-width:1100px){#introTitle {font-size: .7em;}}
@media only screen and (max-width:770px){#introTitle {font-size: 1em;}}

#introShop{font-size: 3em; margin-top: 65px; margin-left: 20px;
   animation-duration: 1s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;}

@keyframes clignoter {
  0%   { opacity:1; }
  20%   {opacity:0; }
  100% { opacity:1; }
}

@media only screen and (max-width:770px){#introShop{font-size: 3em; margin-left: 10px;}}


/*PROJETS INDEX------------------------------------------------------------------------*/

#projets{display: grid;  grid-gap: 0px; 
transform: translateY(-1px); overflow: hidden;}

@media only screen and (max-width:770px){#postsIntro{margin-top:65px;}}

.projet {position: relative;overflow: hidden;}



#projet01{grid-column: 1/2; background-color: #00f29b; mix-blend-mode: multiply;}
#projet02{grid-column: 2/3; background-color: #5552bb; mix-blend-mode: multiply;}
#projet03{grid-column: 3/4; background-color: #f94e54; mix-blend-mode: multiply;}
#projet04{grid-column: 4/5; background-color: #0088cc; mix-blend-mode: multiply;}

#projet18{grid-column: 1/2; background-color: #00aae5; mix-blend-mode: multiply;}
#projet06{grid-column: 2/3; background-color: #03e5e5; mix-blend-mode: multiply;}
#projet07{grid-column: 3/4; background-color: #773d99; mix-blend-mode: multiply;}
#projet08{grid-column: 4/5; background-color: #ffa511; mix-blend-mode: multiply;}

#projet05{grid-column: 1/2; background-color: #e52117; mix-blend-mode: multiply;}
#projet09{grid-column: 2/3; background-color: #73a2e5; mix-blend-mode: multiply;}
#projet10{grid-column: 3/4; background-color: #03e5e5; mix-blend-mode: multiply;}
#projet11{grid-column: 4/5; background-color: #5552bb; mix-blend-mode: multiply;}

#projet12{grid-column: 1/2; background-color: #0099cc; mix-blend-mode: multiply;}
#projet13{grid-column: 2/3; background-color: #4752b2; mix-blend-mode: multiply;}
#projet14{grid-column: 3/4; background-color: #00aae5; mix-blend-mode: multiply;}
#projet15{grid-column: 4/5; background-color: #ff6c1a; mix-blend-mode: multiply;}

#projet16{grid-column: 1/5; background-color: #ffffff; mix-blend-mode: multiply;}

@media only screen and (max-width:770px){
#projet01{background-color: #ffffff;}
#projet02{background-color: #ffffff;}
#projet03{background-color: #ffffff;}
#projet04{background-color: #ffffff;}
#projet18{background-color: #ffffff;}
#projet06{background-color: #ffffff;}
#projet07{background-color: #ffffff;}
#projet08{background-color: #ffffff;}
#projet09{background-color: #ffffff;}
#projet10{background-color: #ffffff;}
#projet11{background-color: #ffffff;}
#projet12{background-color: #ffffff;}
#projet13{background-color: #ffffff;}
#projet14{background-color: #ffffff;}
#projet15{background-color: #ffffff;}
#projet16{background-color: #ffffff;}}





@media only screen and (max-width:1100px){
#projet01{grid-column: 1/2;}
#projet02{grid-column: 2/3;}
#projet03{grid-column: 3/4;}
#projet04{grid-column: 1/2;}
#projet05{grid-column: 2/3;}
#projet06{grid-column: 3/4;}
#projet07{grid-column: 1/2;}
#projet08{grid-column: 2/3;}
#projet09{grid-column: 3/4;}
#projet10{grid-column: 1/2;}
#projet11{grid-column: 2/3;}
#projet12{grid-column: 3/4;}
#projet13{grid-column: 1/2;}
#projet14{grid-column: 2/3;}
#projet15{grid-column: 3/4;}
#projet16{grid-column: 1/2;}}

@media only screen and (max-width:770px){
#projet01{grid-column: 1/2; margin-top: 65px;}
#projet02{grid-column: 1/2;}
#projet03{grid-column: 1/2;}
#projet04{grid-column: 1/2;}
#projet05{grid-column: 1/2;}
#projet06{grid-column: 1/2;}
#projet07{grid-column: 1/2;}
#projet08{grid-column: 1/2;}
#projet09{grid-column: 1/2;}
#projet10{grid-column: 1/2;}
#projet11{grid-column: 1/2;}
#projet12{grid-column: 1/2;}
#projet13{grid-column: 1/2;}
#projet14{grid-column: 1/2;}
#projet15{grid-column: 1/2;}
#projet16{grid-column: 1/2;}

#header{height: 65px;}}




.hoverA:hover {opacity: 0; transition: opacity 0.1s ease-in-out;}

@media only screen and (max-width:770px){:hover.hoverA {opacity: 1;}}


.hoverA {opacity: 1; transition: opacity .75s ease-in-out;}

.hoverC{filter: invert(0); transition: filter .1s ease-in-out; }
.hoverC:hover{filter: invert(1);;transition: filter 0.1s ease-in-out;}



#title{position: absolute;
       color: white;
       z-index: -1;
       width: 100%;
       text-align: center;
        top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}



.hoverA{width: 100%; height: 100%;}




        



/*POSTS PROJETS------------------------------------------------------------------------*/


#posts{display: grid;}

#postsIntro{display: grid;grid-template-columns: 1fr}



#youtube{width: 100%; 
         margin-top: 65px;
         position: relative;}

@media only screen and (max-width:770px){#youtube{margin-top: 0px;}}

#youtube::after{ content:"";
                display: block;
                width: 100%;
                padding-bottom: 56.25%;}


#youtubeB{width: 100%;
         position: relative;}

#youtubeB::after{ content:"";
                display: block;
                width: 100%;
                padding-bottom: 100%;}


/*ABOUT------------------------------------------------------------------------*/


#about{font-size: 1em;
       display: flex;
       flex-direction: column;
       margin-top: 65px;
       width: 100%;}

#about01{padding-left: 20px; padding-right: 20px; width: 75%;}
#about02{padding-left: 20px; padding-right: 20px; hyphens:none;}

#aboutPortrait{position: absolute; width: 25%; right: 0%;}

#aboutAgency{grid-column: 1/2;}
#aboutWorkshop{grid-column: 2/3;}
#aboutFest{grid-column: 3/4;}
#aboutSalons{grid-column: 4/5;}

#aboutTypo{grid-column: 1/2;}
#aboutLieux{grid-column: 2/3;}
#aboutThanks{grid-column: 3/4;}
#aboutCredits{grid-column: 4/5;}


#aboutPortraitSmartphone{display: none;}
@media only screen and (max-width:770px){
    #aboutPortrait{display: none;}
    #aboutPortraitSmartphone{display: block;}
    #about{margin-top: 30px;}
    #about01{padding-left: 10px; padding-right: 10px;}
    #about02{padding-left: 10px; padding-right: 10px;}}



/*VIDEO------------------------------------------------------------------------*/

.playPauseBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    opacity: .8;
    transform: translate(-50%, -50%);}

     
.postsMobile{display: none;}
@media only screen and (max-width:770px){.postsMobile{display: block;} .postsDesktop{display: none;}}