@keyframes portfolioOpening {
    0%{
        transform: translateX(0)
    }
    100%{
        transform: translateX(120%)
    }
}

.portfolioOpening{
    animation : portfolioOpening 0.5s 0.5s ease forwards

}



@keyframes loadOpening {
    0% {
        transform: translateY(800px);
        opacity: 50%;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.497);
    }
    50%{
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.497);

    }
    100%{
        transform: translateY(0);
        opacity: 100%;
        box-shadow: 15px 20px 10px -5px rgba(0, 0, 0, 0.497);
    }
}
.loadOpening {
    animation: loadOpening 1.2s  ease forwards;
}


@keyframes menuOpen {
    0%{
        top: -160px;

    }
    100%{
        top: 70px;

    }
}
@keyframes menuClose{
    0%{
        top: 70px;
        

    }
    100%{
        top: -160px;
        
    }
} 

@keyframes accueilClose {
    0% {

        transform: translateY(0);
        opacity: 100%;
        box-shadow: 15px 20px 10px -5px rgba(0, 0, 0, 0.497);
        
    }
    50%{
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.497);

    }
    100%{
        transform: translateY(800px);
        opacity: 50%;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.497);
    }
}

.headerclosing {
    animation: accueilClose 0.5s ease-in forwards
}




@media screen and (max-width: 599px){
    .adScroll {
        animation : adScroll 10s linear infinite

    }
    @keyframes adScroll {
        0%{
            transform: translateX(100%)
        }
        100%{
            transform: translateX(-100%)
        }
    }
}
@media screen and (min-width:600px){
    .adScroll {
        animation : adScroll 15s linear infinite
    }
    @keyframes adScroll {
        0%{
            transform: translateX(200%)
        }
        100%{
            transform: translateX(-150%)
        }
    }
}