/*****--**-----*****--|NAV|-*****-----**--*****/
     #navsticky{
          box-shadow: black 14px 14px 0px 0px;
     }

     .bar{
          background-color: black;
     }
/*****--**-----*****--|NAV|-*****-----**--*****/

body{
     background-color:#CD608E;
     overflow-x: hidden;
}

/*****--**-----*****--|PORTFOLIO ACCUEIL|-*****-----**--*****/
     #portfolioaccueil{
          min-height: 100vh;
          width: 60vw;
          max-width: 960px;
          margin: auto;
          padding: 20vh 0;
     }

     #portfolioaccueil h1{
          margin: 0;
          font-family: BouhC;
          color: white;
          font-size: 5vw;
          line-height: 0.90em;
          text-align: center;
     -webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s both;
             animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s both;
     }

     #portfolioaccueil div{
          display: flex;
          margin-top: 24px;
     }

     #portfolioaccueil div img{
          width: 30%;
          margin-top: -10%;
          height: 100%;
     }

     #portfolio div:nth-child h2{
          width: 80%;
          margin: auto;
     }

     #portfolioaccueil div article{
          width: 80%;
          padding: 36px;
          margin: auto;
          -webkit-animation: slide-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.8s both;
             animation: slide-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.8s both;
     }

     #portfolioaccueil div article p{
          font-size: 15px;
          color: white;
          font-family: Valizas;
          font-weight: 500;
          padding: 6px 0;
          text-align: justify;
          line-height: 19px;
     }

     /*****--**-----*****--|PORTFOLIO ACCUEIL TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #portfolioaccueil {
                    min-height: auto;
                    width: 80%;
                    padding: 10vh 0;
               }

               #portfolioaccueil h1{
                    font-size: 10vw;
               }

               #portfolioaccueil div{
                    flex-direction: column-reverse;
               }

               #portfolioaccueil div img{
                    margin-left: auto;
                    width: 50%;
                    margin-right: -8%;
                    margin-bottom: -6%;
               }

               #portfolioaccueil div article{
                    width: 100%;
               }
          }
     /*****--**-----*****--|PORTFOLIO ACCUEIL TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|PORTFOLIO ACCUEIL MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
               #portfolioaccueil{
                    width: 100%;
                    height: auto;
                    padding: 0;
               }

               #portfolioaccueil h1{
                    font-size: 17vw;
                    padding: 11vh 12px 12px 12px;
               }
          }
     /*****--**-----*****--|PORTFOLIO ACCUEIL MOBILE|-*****-----**--****/

     /*****--**-----*****--|PORTFOLIO ACCUEIL ANIMATIONS|-*****-----**--****/
          #portfolioaccueil h1{
               -webkit-animation: slide-in-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                       animation: slide-in-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          }

          #portfolioaccueil div article p{
               -webkit-animation: slide-in-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
                       animation: slide-in-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
          }

               @-webkit-keyframes slide-in-left {
                    0% {
                         -webkit-transform: translateX(-1000px);
                                 transform: translateX(-1000px);
                         opacity: 0;
                    }
                    100% {
                         -webkit-transform: translateX(0);
                                 transform: translateX(0);
                         opacity: 1;
                    }
               }
               @keyframes slide-in-left {
                    0% {
                         -webkit-transform: translateX(-1000px);
                                 transform: translateX(-1000px);
                         opacity: 0;
                    }
                    100% {
                         -webkit-transform: translateX(0);
                                 transform: translateX(0);
                         opacity: 1;
                    }
               }
     /*****--**-----*****--|PORTFOLIO ACCUEIL ANIMATIONS|-*****-----**--****/
/*****--**-----*****--|PORTFOLIO ACCUEIL|-*****-----**--*****/

/*****--**-----*****--|PORTFOLIO LISTE|-*****-----**--*****/
     #portfolio{
          display: flex;
          width: 90%;
          flex-wrap: wrap;
          align-items: center;
          margin: auto;
          padding-bottom: 20vh;
          justify-content: space-between;
     }

     #portfolio .portfolio-item{
          width: 28%;
          text-align: center;
          margin-bottom: 42px;
          transform: rotate(-2deg);
          font-family: Valizas;
          color: White;
     }

     #portfolio .portfolio-item img{
          height: 180px;
          width: 180px;
          text-align: center;
          transition: 0.2s;
     }

     #portfolio .portfolio-item img:hover{
          transform: scale(1.1);
     }
          /*****--**-----*****--|PORTFOLIO LISTE TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #portfolio .portfolio-item{
                    width: 50%;
               }
          }
     /*****--**-----*****--|PORTFOLIO LISTE TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|PORTFOLIO LISTE MOBILE|-*****-----**--*****/
           @media (max-width: 576px){
               #portfolio{
                    flex-direction: column;
               }

               #portfolio .portfolio-item{
                    width: 100%;
               }

               #portfolio .portfolio-item img {
                    max-width: inherit;
                    width: 80%;
               }
          }
     /*****--**-----*****--|PORTFOLIO LISTE MOBILE|-*****-----**--****/
/*****--**-----*****--|PORTFOLIO LISTE|-*****-----**--*****/