body {
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif !important;
}

/*
------------- Sytle logo ------------
*/
.btn-home {
    float: left;
    margin: 15px 40px;
    font-size: 30px;
    color: #ffffff;
    transition: all 2s ease-in-out;
}

/* .btn-home img {
    width: 100px;
} */
/*
    ------------- Effet lorsqu'on survole le logo ------------
    */
.btn-home:hover {
    color: rgb(75, 221, 221);
    transform: scale(1.5);
    transition: all 2s ease-in-out;
}

@keyframes slideInFromTop {
    0% {
        transform: translateX(100%);
        top: 0
    }

    100% {
        transform: translateX(0);
    }
}

/*
------------  Icone centrale ----------------
*/
.btn-menu .ligne p a {
    text-decoration: none;
    text-align: center;
    color: #fff;
}

.btn-menu .ligne p {
    text-align: center;
    margin-left: 10px;
}

/* Mise en forme ecran telephone*/
@media (max-width: 575.98px) {
    @keyframes rotation {
        100% {
            transform: rotate(360deg);
        }
    }

    /*postionnement logo*/

    .btn-home {
        margin: 5px 10px;
        font-size: 30px;
    }

    /*
    ------------- Taille logo ----------
    */

    .btn-home img {
        width: 70px;
    }


    /* Rotation des icone */
    .poleicons {
        margin: auto;
        height: 100%;
        width: 100%;
        animation: rotation 35s linear infinite;
        animation-direction: alternate-reverse;
        background: none;

    }

    /* Arret de la rotation après survol*/
    .poleicons:hover {
        /* margin: auto; */
        animation-play-state: paused;

        /* animation: rotation 9000000s linear infinite; */
    }

    .poleicons:hover .blob a {
        text-decoration: none;
        color: #fff;
        animation-play-state: paused;
    }



    .blob a {
        animation: rotation 35s linear infinite;
        animation-direction: alternate;
        color: #fff;
        text-align: center;
        width: 83%;
        font-size: 12px;
    }

    .blob a:hover {
        animation-play-state: paused;
    }

    .blob1,
    .blob2,
    .blob3,
    .blob4,
    .blob5,
    .blob6 {
        width: 62px !important;
    }

    .blob1 span {
        margin-left: -10px;
    }

    .blob3 span {
        margin-left: -6px;
    }
}

/* Mise en forme ecran tablette*/
@media (min-width: 575.99px) and (max-width: 768px) {
    .poleicons {
        /* position: absolute; */
        margin: auto;
        height: 100%;
        width: 40%;
        animation: rotation 35s linear infinite;
        animation-direction: alternate-reverse;
        background: none;

    }

    .poleicons:hover {
        margin: auto;
        animation-play-state: paused;
        /* animation: rotation 9000000s linear infinite; */
    }

    @keyframes rotation {
        100% {
            transform: rotate(360deg);
        }
    }

    .blob a {
        animation: rotation 35s linear infinite;
        animation-direction: alternate;
        color: #fff;
        text-align: center;
        width: 80%;
        font-size: 13px;

    }

    .poleicons:hover .blob a {
        text-decoration: none;
        color: #fff;
        animation-play-state: paused;
    }

    /*
 ------------ Taille logo -----------
 */
    .btn-home img {
        width: 70px;
    }

    .blob1,
    .blob2,
    .blob3,
    .blob4,
    .blob5,
    .blob6 {
        width: 100px !important;
    }
}

/* Mise en forme ecran tablette*/
@media (min-width: 769px) and (max-width: 991px) {

    /*
    ===========  Block d'icones en rotation =========
    */
    .poleicons {
        position: absolute;
        margin: auto;
        height: 93%;
        width: 80%;
        left: 10%;
        top: 3%;
        animation: rotation 35s linear infinite;
        animation-direction: alternate-reverse;
        background: none;
    }

    .poleicons:hover {
        margin: auto;
        animation-play-state: paused;
        /* animation: rotation 9000000s linear infinite; */
    }

    .poleicons:hover .blob a {
        text-decoration: none;
        color: #fff;
        animation-play-state: paused;
    }

    @keyframes rotation {
        100% {
            transform: rotate(360deg);
        }
    }

    .blob a {
        animation: rotation 35s linear infinite;
        animation-direction: alternate;
        color: #fff;
        text-align: center;
        font-size: 13px;
        width: 75%;
    }

    /*
    ------------------- Taille logo -------------
    */
    .btn-home img {
        width: 78px;
    }

    .blob1,
    .blob2,
    .blob3,
    .blob4,
    .blob5,
    .blob6 {
        width: 100px !important;
    }

}

/* Mise en forme ecran moyen*/
@media (min-width: 992px) and (max-width: 1199px) {
    @keyframes rotation {
        100% {
            transform: rotate(360deg);
        }
    }

    /* Ajustement de bloc icone*/
    .poleicons {
        position: absolute;
        height: 90%;
        width: 60%;
        top: 5%;
        left: 23%;
        animation: rotation 35s linear infinite;
        animation-delay: 0.5s;
        animation-direction: alternate-reverse;

    }

    .poleicons:hover {
        height: 90%;
        width: 60%;
        top: 5%;
        left: 23%;
        position: absolute;
        animation-play-state: paused;
    }

    .poleicons:hover .blob a {
        text-decoration: none;
        color: #fff;
        animation-play-state: paused;
    }



    .blob a {
        animation: rotation 35s linear infinite;
        animation-delay: 0.5s;
        animation-direction: alternate;
        color: #fff;
        font-size: 13px;
    }

    .blob {
        text-align: center;
    }

    .blob a:hover img {
        border-radius: 50%;
    }

    @keyframes arriere {
        0% {
            opacity: 0.2;
        }

        20% {
            opacity: 0.5;
        }

        40%,
        60% {
            opacity: 0.7;
        }

        100% {
            opacity: 0.5;
        }

    }

    .btn-home img {
        width: 100px;
    }

    .blob1,
    .blob2,
    .blob3,
    .blob4,
    .blob5,
    .blob6 {
        width: 100px !important;
    }
}


/* Mise en forme grand ecran*/
@media (min-width: 1200px) {



}