@media only screen and (max-width: 1200px){
    .panel {-ms-transform: scale(0.7);-webkit-transform: scale(0.7);transform: scale(0.7);}
    #menu{left: -24px;top: 40px;}
}

@media only screen and (max-width: 980px){
    @keyframes vibre{
          0%{top:calc(10px - 4px);}
         93%{top:calc(10px - 4px);}
         94%{top:calc(10px - 2px);}
         95%{top:calc(10px - 4px);}
         96%{top:calc(10px - 6px);}
         97%{top:calc(10px - 3px);}
         98%{top:calc(10px - 4px);}
         99%{top:calc(10px - 3px);}
        100%{top:calc(10px - 4px);}
    }
    #fondMouton,#bxg{height: 100vh;}
    #tarif{height: 150vh;}
    #tarif{background-image: url('../images/tarif2.jpg');background-attachment: initial}
    #fondHome{display: none !important;}
    .pad020P{padding: 50px 20px !important}
    #methodologie,#competence,#competence2,#service,#service2,#contact,#tarif{padding: 50px 0 !important}
    #logo {top:calc(10px - 4px);left:10px;-ms-transform: scale(0.6);-webkit-transform: scale(0.6);transform: scale(0.6);}
    #logo.vibre {top:calc(10px - 4px);animation-name: vibre;animation-delay: 5s;animation-duration: 5s;animation-play-state: running;animation-iteration-count: infinite;}
    #logo.home{left:calc(50% - 40px) !important;-ms-transform: scale(0.8);-webkit-transform: scale(0.8);transform: scale(0.8);}
    .panel {-ms-transform: scale(0.6);-webkit-transform: scale(0.6);transform: scale(0.6);}
    #menu{-ms-transform: scale(0.8);-webkit-transform: scale(0.8);transform: scale(0.8);left:-20px;top: 5px;}
    .met{width: 50% !important;margin-top: 30px}
    .signature{position: relative !important;float: right;margin-top: 40px;bottom: 0 !important;}
    .nonePc{display:block}
    .noneMobile{display:none}
    .titrecomp{text-align: center !important}
    .titrecomp .nonePc{display:inline-block !important}
    .demiComp{width: 100% !important;float: none !important}
    .pie_progress{padding: 5% 10% !important}
    .pie_progress__label{font-size: 14px}
    #divprojet{margin: 0 !important}
    .box,.avenir{width: 50% !important; padding-top: 50% !important}
    .serv{display: table;padding: 0 10%;width: auto;}
    .mouton1{left:-8% !important;top:50% !important}
    .mouton2{left:12% !important;top:50% !important}
    .mouton3{left:32% !important;top:50% !important}
    .mouton4{left:83% !important;top:50% !important}
    .loup{left:42% !important;top:50% !important}
    #imaginez{display: none}
    .imgProjet,.infos{width: 100% !important;height: auto !important;float: none !important}
    .general{float: left;width: 48%}
    .outils{float: right;width: 45%}
}
@media only screen and (max-width: 450px){
    #fondMouton,#bxg,#tarif{height: 100vh;}
    #tarif{background-image: url('../images/tarif3.jpg');background-attachment: initial}
    #methodologie,#competence,#competence2,#service,#service2,#contact,#tarif{padding: 50px 0 !important}
    .met{width: 100% !important;margin-top: 30px}
    .box,.avenir{width: 100% !important; padding-top: 100% !important}
    .pie_progress{padding: 5% !important}
    .serv{width: 100%;float: none !important;margin: 0 !important;padding-left: 20px}
    .serv20{margin-top: 20px !important}
    .mouton1{left:-8% !important}
    .mouton2{left:-3% !important}
    .mouton3{left:73% !important}
    .mouton4{left:100% !important}
    .font40{font-size: 25px !important}
    .loup{left:12% !important}
    #imaginez{top:40% !important;width: 60%;left:10% !important}
    .general{float: none !important;width: 100%}
    .outils{float: none !important;width: 100%}
    #isotope{display: none}
    .vignette{padding-top:25%}
}