/* version desktop */
@media screen and (min-width: 1280px)
{

    #menu li a:hover, #cat li label:hover
    {
        animation: neon, o.4s;
        transition: text-shadow 0.3s;
        text-shadow: 0px 0px 30px;
    }

    #menu li a, #cat li label /* not(hover)*/
    {
        transition: text-shadow 0.3s;
        text-shadow: 0px 0px 0px;
    }
    
    #kits
    {
        animation: kits-middle 1.5s ease-out;
    }
    
    .in_box:hover .info
    {
        display: block;
    }
    
    #marques
    {
        animation: marques-top 1s ease-out;
    }
    
    .ma_box:hover
    {
        animation: marques-hover 0.1s;
    }
    
    #produits
    {
        animation: produits-middle 2s ease-out;
    }
    
    #map
    {
        animation: map-opacity 1.5s ease-out;
    }

    @keyframes neon
    {
        0% {text-shadow: 0px 0px 0px;}
        100% {text-shadow: 0px 0px 30px;}
    }
    
    @keyframes kits-middle
    {
        0% {transform: translateX(-4000px);}
        100% {transform: translateX(0px);}
    }
    
    @keyframes marques-top
    {
        0% {transform: translateY(3000px);}
        100% {transform: translate(0px);}
    }
    
    @keyframes marques-hover
    {
        0% {transform: translate3d(0px, 0px, 0px);}
        25% {transform: translate3d(-3px, 3px, 0px);}
        75% {transform: translate3d(3px, -3px, 0px);}
        100% {transform: translate3d(0px, 0px, 0px);}
    }
    
    @keyframes produits-middle
    {
        0% {transform: translateX(4000px);}
        100% {transform: translateX(0px);}
    }
    
    @keyframes map-opacity
    {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
}

/* version mobile */
@media screen and (max-width: 1279px)
{
    #btmenu:hover ~ ul
    {
        transition: top 0.5s;
        top: -12px;
    }
    
    #marques
    {
        animation: marques-top 1s ease-out;
    }
    
    @keyframes marques-top
    {
        0% {transform: translateY(2000px);}
        100% {transform: translateY(0px);}
    }
}