body {

    margin:5;

}

#calendrier {
    width: 1120px;
    height: 900px;
    background-image:url('../img/background-desktop.jpg');
    background-repeat: repeat;
    background-size: 100%;
    padding-top: 160px;
}

#titre {
    margin-top: -100px;
    margin-bottom: 70px;
}

#titre img {
    width: 50%;
}

.case {
    width: 15.6%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 10px;
    height: 220px;
    float: left;
    /*padding:20px;*/
}

.case img {
    width:100%;
    cursor: pointer;
}

#jour24 {
    width: 30%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 10px;
    height: 220px;
    float: left;

}

#logos-fournisseurs {
    width: 1120px;
    height: 250px;
    background-image: url('../img/partenaires-desktop.jpg');
    background-repeat: no-repeat;
    background-size: 99%;
    background-position: 0 40px;
}

#fireworks {
    position: absolute;
    top:0;
    z-index: 3;
}

.white-border {
    border:solid #D8E0E3 2px;
}

#jour24 img {
    transform: rotate(10deg);
}

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

    #calendrier {
        width: 100%;
        height: 1300px;
        margin-left: 0;
        background-repeat: repeat-y;
    }

    .case {
        width: 18%;
        margin-left: 1%;
        margin-right: 1%;
        height: 250px;
    }


    #logos-fournisseurs {
        width: 100%;
        margin-left: 0;
    }

}

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

    #calendrier {
        height: 1400px;
    }

    .case {
        width: 23%;
        margin-left: 1%;
        margin-right: 1%;
        height: 250px;
    }

    #logos-fournisseurs {
        background-image: url('../img/partenaires-smartphone.jpg');
    }

    #calendrier {
        background-image:url('../img/background-900.jpg');
    }


}

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

    #calendrier {
        height: 1600px;
    }

    .case {
        width: 31%;
        margin-left: 1%;
        margin-right: 1%;
        height: 250px;
    }

    #jour24 {
        width: 31%;
        margin-left: 1%;
        margin-right: 1%;
        height: 250px;

    }

    #calendrier {
        background-image:url('../img/background-700.jpg');
    }
}

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

    #calendrier {
        height: 2700px;
    }

    .case {
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        height: 300px;
    }

    #calendrier {
        background-image:url('../img/background-600.jpg');
    }

}