/*#bodyinfos{
    background-color: #E3F1FF;
}*/
.bodydiv{
    margin: auto;
}
.bodydiv h1{
    text-align: center;
    font-size: 20px;
    font-family: Lato;
}
.bodydiv h1 a{
    color: black;
}
@media screen and (max-width: 350px){
    .bodydiv h1{
        font-size: 18px;
    }
    .bodydiv{
        margin-top: 50px;
    }
}
/*
    sliders
*/


/*------------------------------------------*/
/*------------------------------------------*/
.slides{
    width: calc(1024px * 5);
    animation: glisse 25s infinite;
}
.slide{
    float: left;
    width: 1024px;
    height: 576px;

}
.slide img{
    width: 1024px;
    height: 576px;
}
.slider{
    margin-bottom: 3%;
    width: 1024px;
    height: 576px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}


@keyframes glisse{
    0%{
        transform: translateX(0)
    }
    10%{
        transform: translateX(0)
    }
    20%{
        transform: translateX(calc(-1024px * 1))
    }
    30%{
        transform: translateX(calc(-1024px * 1))
    }
    40%{
        transform: translateX(calc(-1024px * 2))
    }
    50%{
        transform: translateX(calc(-1024px * 2))
    }
    60%{
        transform: translateX(calc(-1024px * 3))
    }
    70%{
        transform: translateX(calc(-1024px * 3))
    }
    80%{    
        transform: translateX(calc(-1024px * 4))
    }
    90%{
        transform: translateX(calc(-1024px * 4))
    }
    100%{
        transform: translateX(0)
    }
}
/*------------------------------------------*/
/*------------------------------------------*/
.slides2{
    width: calc(854px * 5);
    animation: glisse2 25s infinite;
}
.slide2{
    float: left;
    width: 854px;
    height: 480px;

}
.slide2 img{
    width: 854px;
    height: 480px; 
}
.slider2{
    width: 854px;
    height: 480px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: none;
}
@keyframes glisse2{
    0%{
        transform: translateX(0)
    }
    10%{
        transform: translateX(0)
    }
    20%{
        transform: translateX(calc(-854px * 1))
    }
    30%{
        transform: translateX(calc(-854px * 1))
    }
    40%{
        transform: translateX(calc(-854px * 2))
    }
    50%{
        transform: translateX(calc(-854px * 2))
    }
    60%{
        transform: translateX(calc(-854px * 3))
    }
    70%{
        transform: translateX(calc(-854px * 3))
    }
    80%{    
        transform: translateX(calc(-854px * 4))
    }
    90%{
        transform: translateX(calc(-854px * 4))
    }
    100%{
        transform: translateX(0)
    }
}
/*------------------------------------------*/
@media screen and (max-width: 1070px)
{
    .slider{
        display: none;
    }
    .slider2{
        display: block
    }
}
@media screen and (max-width: 875px)
{
    .slider2{
        display: none;
    }
}
/*------------------------------------------*/