.ligne {
    display:flex;
    width:100%;
  }

.portfolio {
  position: relative;
  background-color:white;
  box-sizing: border-box;
  width:100vw-250px;
  margin-top:38px;
  margin-left:310px;
  margin-right:50px;
  padding:25px;

}

.portfolio_entete {
  padding-left: 15px;
  padding-right: 15px;
  text-align: justify;

}


.portfoliocontainer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.image-portfolio {
  position: relative;
  width:50%;
  height:150px;
  box-sizing:border-box;
  background:#f0f0f0;
}


.unecol {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin:1%;
  opacity: 0;
}

.deuxcol {
  width:50%;
  max-width: 50%;
  box-sizing: border-box;
  margin:1%;
  opacity: 0;
}

.troiscol {
  width:33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  margin:1%;
  opacity: 0;
}

.nom_photo {
  text-align:center;
  padding-top:15px;
}


 @media only screen and (max-width:1080px) {
   .portfolio {
     position: relative;
     background-color:white;
     box-sizing: border-box;
     width:100vw;
     margin-top:0px;
     margin-left:0px;
     margin-right:50px;
     padding:25px;
   }

 }


 @media only screen and (max-width:600px) {

   .ligne {
      flex-direction: column;
   }



 .unecol {
   width:100%;
   max-width: 100%;
   box-sizing: border-box;
   margin:1%;
 }

 .deuxcol {
   width:100%;
   max-width: 100%;
   box-sizing: border-box;
   margin:1%;
 }

 .troiscol {
   width:100%;
   max-width: 3100%;
   box-sizing: border-box;
   margin:1%;
 }
}

@keyframes masuperanimation { /* Tous les autres navigateurs */
    0% {
      opacity: 0;
    }


    100% {
        opacity:1;
        transform: translateY(0px);
    }
}


.demoanim
{
  animation: masuperanimation 1s ease-out;
  animation-fill-mode: forwards;
}