/** START LOGO ANIMATION **/
.logo svg {
    animation: 6000ms 1 taille;
}

.logo {
    z-index: 9999;
    animation: 6000ms 1;
}

@media screen and (min-width: 320px) {
    .navbar-fixed-top .logo img, .navbar-fixed-top .logo svg {
        width: 80px;
        max-width: 80px;
        left: 8px;
        top: 8px;
    }
    .logo img, .logo svg {
        left:0;
        width: 140px;
        max-width: 140px;
    }
}

@media screen and (min-width: 768px) {
    .logo img, .logo svg {
        left: 38px;
    }
}
@media screen and (min-width: 991px) {
    .logo img, .logo svg {
        width: 140px;
        left:0;
    }
}

.logo img, .logo svg {
    position: absolute;
    top: 13px;
}

.logo img {
    opacity: 1;
    animation: 6000ms 1 planete;
}

.SyNKjHIV_0 {
    stroke-dasharray: 852 854;
    stroke-dashoffset: 853;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_1 {
    stroke-dasharray: 1252 1254;
    stroke-dashoffset: 1253;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_2 {
    stroke-dasharray: 12 14;
    stroke-dashoffset: 13;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_3 {
    stroke-dasharray: 483 485;
    stroke-dashoffset: 484;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_4 {
    stroke-dasharray: 11 13;
    stroke-dashoffset: 12;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_5 {
    stroke-dasharray: 4 6;
    stroke-dashoffset: 5;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_6 {
    stroke-dasharray: 15 17;
    stroke-dashoffset: 16;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_7 {
    stroke-dasharray: 6 8;
    stroke-dashoffset: 7;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_8 {
    stroke-dasharray: 6 8;
    stroke-dashoffset: 7;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_9 {
    stroke-dasharray: 3 5;
    stroke-dashoffset: 4;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_10 {
    stroke-dasharray: 2 4;
    stroke-dashoffset: 3;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_11 {
    stroke-dasharray: 26 28;
    stroke-dashoffset: 27;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_12 {
    stroke-dasharray: 3179 3181;
    stroke-dashoffset: 3180;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_13 {
    stroke-dasharray: 1 3;
    stroke-dashoffset: 2;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_14 {
    stroke-dasharray: 2808 2810;
    stroke-dashoffset: 2809;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

.SyNKjHIV_15 {
    stroke-dasharray: 2594 2596;
    stroke-dashoffset: 2595;
    animation: SyNKjHIV_draw 1500ms ease-in-out 0ms forwards;
}

@keyframes SyNKjHIV_draw {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes SyNKjHIV_fade {
    0% {
        stroke-opacity: 1;
    }
    92.98245614035088% {
        stroke-opacity: 1;
    }
    100% {
        stroke-opacity: 0;
    }
}

@media screen and (min-width: 320px) {
    @keyframes deplacement {
        0% {
            width: 225px;
            top: 95px;
            left: 45%;
        }
        50% {
            width: 225px;
            top: 95px;
            left: 45%;
        }
        100% {
            width: 50px;
            top: 10px;
            left: 0;
        }
    }
    @keyframes taille {
        0% {
            width: 225px;
        }
        50% {
            width: 225px;
        }
        100% {
            width: 140px;
        }
    }
    @keyframes planete {
        0% {
            opacity: 0;
            width: 225px;
        }
        33% {
            opacity: 0;
            width: 225px;
        }
        50% {
            opacity: 1;
            width: 225px;
        }
        100% {
            opacity: 1;
            width: 140px;
        }
    }
}

@media screen and (min-width: 768px) {
    @keyframes deplacement {
        0% {
            width: 315px;
            top: 120px;
            left: 45%;
        }
        50% {
            width: 315px;
            top: 120px;
            left: 45%;
        }
        100% {
            width: 50px;
            top: 10px;
            left: 0;
        }
    }
    @keyframes taille {
        0% {
            width: 315px;
        }
        50% {
            width: 315px;
        }
        100% {
            width: 140px;
        }
    }
    @keyframes planete {
        0% {
            opacity: 0;
            width: 315px;
        }
        33% {
            opacity: 0;
            width: 315px;
        }
        50% {
            opacity: 1;
            width: 315px;
        }
        100% {
            opacity: 1;
            width: 140px;
        }
    }
}

@media screen and (min-width: 1024px) {
    @keyframes deplacement {
        0% {
            width: 320px;
            top: 115px;
            left: 48%;
        }
        50% {
            width: 320px;
            top: 115px;
            left: 48%;
        }
        100% {
            width: 140px;
            top: 10px;
            left: 0;
        }
    }
    @keyframes taille {
        0% {
            width: 320px;
        }
        50% {
            width: 320px;
        }
        100% {
            width: 140px;
        }
    }
    @keyframes planete {
        0% {
            opacity: 0;
            width: 320px;
        }
        33% {
            opacity: 0;
            width: 320px;
        }
        50% {
            opacity: 1;
            width: 320px;
        }
        100% {
            opacity: 1;
            width: 140px;
        }
    }
}

@media screen and (min-width: 1200px) {
    @keyframes deplacement {
        0% {
            width: 400px;
            top: 115px;
            left: 48%;
        }
        50% {
            width: 400px;
            top: 115px;
            left: 48%;
        }
        100% {
            width: 140px;
            top: 10px;
            left: 0;
        }
    }
    @keyframes taille {
        0% {
            width: 400px;
        }
        50% {
            width: 400px;
        }
        100% {
            width: 140px;
        }
    }
    @keyframes planete {
        0% {
            opacity: 0;
            width: 400px;
        }
        33% {
            opacity: 0;
            width: 400px;
        }
        50% {
            opacity: 1;
            width: 400px;
        }
        100% {
            opacity: 1;
            width: 140px;
        }
    }
}


/**
ANIMATION SVG FIN
 */
@keyframes move_icon_service {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#apache,
#ia,
#automation,
#prestashop,
#symfony,
#stripe {
    position: absolute;
    max-width: 200px;
}

@media screen and (min-width: 320px) {
    #prestashop {
        min-width: 190px;
        top: 74px;
        left: 150px;
        animation: move_icon_service 300ms linear 1 normal forwards;
    }

    #stripe {
        min-width: 200px;
        top: 247px;
        left: 160px;
        animation: move_icon_service 700ms linear 1 normal forwards;
    }

    #symfony {
        min-width: 190px;
        top: 170px;
        left: 5px;
        animation: move_icon_service 400ms linear 1 normal forwards;
    }

    #apache {
        top: -25px;
        left: 70px;
        animation: move_icon_service 500ms linear 1 normal forwards;
    }

    #automation {
        top: 140px;
        left: 5px;
        animation: move_icon_service 600ms linear 1 normal forwards;
    }

    #ia {
        top: 123px;
        left: 165px;
        animation: move_icon_service 200ms linear 1 normal forwards;
    }
}

@media screen and (min-width: 768px) {
    #prestashop {
        max-width: 200px;
        top: -150px;
        left: 5%;
        animation: move_icon_service 700ms linear 1 normal forwards;
    }

    #stripe {
        max-width: 200px;
        top: -200px;
        left: 40%;
        animation: move_icon_service 600ms linear 1 normal forwards;
    }

    #symfony {
        top: -150px;
        left: 75%;
        max-width: 200px;
        animation: move_icon_service 500ms linear 1 normal forwards;
    }

    #apache {
        max-width: 200px;
        top: -15px;
        left: 0;
        animation: move_icon_service 400ms linear 1 normal forwards;
    }

    #automation {
        max-width: 200px;
        top: 50px;
        left: 33%;
        animation: move_icon_service 300ms linear 1 normal forwards;
    }

    #ia {
        max-width: 200px;
        top: 0;
        left: 66%;
        animation: move_icon_service 200ms linear 1 normal forwards;
    }
}

@media screen and (min-width: 1024px) {
    #prestashop {
        min-width: 200px;
        top: 125px;
        left: 150px;
        animation: move_icon_service 300ms linear 1 normal forwards;
    }

    #stripe {
        min-width: 200px;
        top: 150px;
        left: 40%;
        animation: move_icon_service 400ms linear 1 normal forwards;
    }

    #symfony {
        top: 125px;
        left: 66%;
        min-width: 200px;
        animation: move_icon_service 500ms linear 1 normal forwards;
    }

    #apache {
        min-width: 250px;
        top: 0;
        left: 0;
        animation: move_icon_service 200ms linear 1 normal forwards;
    }

    #ia {
        min-width: 250px;
        top: 0;
        left: 35%;
        animation: move_icon_service 600ms linear 1 normal forwards;
    }

    #automation {
        min-width: 250px;
        top: 0;
        left: 69%;
        animation: move_icon_service 700ms linear 1 normal forwards;
    }
}

@media screen and (min-width: 1200px) {
    #apache {
        min-width: 250px;
        top: 0;
        left: 0;
        animation: move_icon_service 200ms linear 1 normal forwards;
    }

    #automation {
        min-width: 250px;
        top: 0;
        left: 37%;
        animation: move_icon_service 300ms linear 1 normal forwards;
    }

    #ia {
        min-width: 250px;
        top: 0;
        left: 72%;
        animation: move_icon_service 400ms linear 1 normal forwards;
    }

    #prestashop {
        min-width: 300px;
        top: 75px;
        left: 15%;
        animation: move_icon_service 200ms linear 1 normal forwards;
    }

    #symfony {
        top: 75px;
        left: 75%;
        min-width: 300px;
        animation: move_icon_service 300ms linear 1 normal forwards;
    }

    #stripe {
        min-width: 300px;
        top: 150px;
        left: 45%;
        animation: move_icon_service 400ms linear 1 normal forwards;
    }
}

@media screen and (min-width: 1600px) {
    #apache {
        min-width: 250px;
        top: 0;
        left: 0;
        animation: move_icon_service 700ms linear 1 normal forwards;
    }

    #automation {
        min-width: 250px;
        top: 100px;
        left: 30%;
        animation: move_icon_service 600ms linear 1 normal forwards;
    }

    #ia {
        min-width: 250px;
        top: 0px;
        left: 60%;
        animation: move_icon_service 500ms linear 1 normal forwards;
    }

    #prestashop {
        min-width: 290px;
        top: 130px;
        left: 25%;
        animation: move_icon_service 400ms linear 1 normal forwards;
    }

    #symfony {
        top: 100px;
        left: 75%;
        min-width: 290px;
        animation: move_icon_service 300ms linear 1 normal forwards;
    }

    #stripe {
        min-width: 240px;
        top: 150px;
        left: 50%;
        animation: move_icon_service 200ms linear 1 normal forwards;
    }
}