#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
    
    box-shadow: 4px 1px 8px grey;
}
.M{
    width: 50px;
    height: 50px;
}

#portfolio .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
    max-height: 240px;
}
.deux{
    padding: 10px;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover  {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #1ee2e7;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
    /* padding: 0 5px 0 5px; */
}

.portfolio-link img{
    object-fit:cover;
    height:240px ;
    overflow: hidden;
}
.lien{
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-top: .5rem;
    padding: 5px;
    /* width: 50%; */

  
}

#lien{
    display: flex;
   
    justify-content: space-between;
    
}

.lien a{
    color: black;
}
/* /scroll */

/* /scroll qui monte */
.scrolly{
    opacity: 0;
    transform: translateY(30px);
}
.scrolly-visible{
    opacity: 1;
    transform: translateY(0);
    transition: .5s;
}
/* scroll ui arrive de la droite */
.scrolly2{
    opacity: 0;
    transform: translateX(-30px);
}
.scrolly2-visible{
    opacity: 1;
    transform: translateX(0px);
    transition: .5s;
/* /scroll qui arrive de la gauche */
}
.scrolly3{
    opacity: 0;
    transform: translateX(30px);
}

.scrolly3-visible{
    opacity: 1;
    transform: translateX(0px);
    transition: .5s;
}

.descriptionPortfolio{
    cursor: pointer;
   
}
.modalPorfolio{
display: none;
position: fixed;
    width: 30%;
    height:auto;
    background-color: #dbd053;
    padding: 2rem;
z-index: 99;
text-align: justify;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 5px -3px 13px 0px rgb(82, 80, 80);
border-radius: 15px;
}



/* .deux:hover{ */
    /* opacity: 1; */
    /* z-index: 12; */
/* } */

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
    opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    position: absolute;
    top: 30%;
  
    width: 100%;
    height: 20px;
    /* margin-top: -12px; */
    text-align: center;
    font-size: 20px;
    color: rgb(92, 90, 90);
}

/* #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
    margin-top: -12px;
} */

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
    margin: 0;
}

#portfolio .portfolio-item .portfolio-caption {
    margin: 0 auto;
    padding: 25px;
    max-width: 400px;
    text-align: center;
    background-color: #fff;
}

#portfolio .portfolio-item .portfolio-caption h4 {
    margin: 0;
    text-transform: none;
}

#portfolio .portfolio-item .portfolio-caption p {
    margin: 0;
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-style: italic;
}

.clignote  {
    height: 240px !important;
    animation-duration: 1.3s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
    background-color:#EE1E4D;
    color: #fff;
    padding-top: 5rem;

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

@media(min-width:767px) {
    #portfolio .portfolio-item {
        margin: 0 0 30px;
      
    }
}
.close{
    margin:  -1.5rem -1.5rem 1rem 1rem;
   
    

}
@media (max-width:800px) {
    .modalPorfolio{
        width: 80%;
        top: 60%;
    }
    
}