@media only screen and (min-width: 981px){ /*A PARTIR DE 981px*/
    body::before {content: 'desktop';display: none;}
    .masonry {
        -moz-column-count: 4;
        -moz-column-gap: 0;
        -moz-column-width: 25%;
        -webkit-column-count: 4;
        -webkit-column-gap: 0;
        -webkit-column-width: 25%;
        column-count: 4;
        column-gap: 0;
        column-width: 25%
    }

    ::-webkit-scrollbar-track
    {
        border-radius: 8px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar
    {
        width: 8px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb
    {
        border-radius: 8px;
        background-color: #dfdfe8;
    }
    ::-webkit-scrollbar-track:hover,
    ::-webkit-scrollbar-track:active {
        background: #f9f9f9;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
        background: #C1C1D1;
    }

    /********/
    body.fonce     ::-webkit-scrollbar-track
    {
        border-radius: 8px;
        background-color: rgb(25, 27, 32);
    }

    body.fonce ::-webkit-scrollbar
    {
        width: 8px;
        background-color: #2d323d;
    }

    body.fonce ::-webkit-scrollbar-thumb
    {
        border-radius: 8px;
        background-color: #626876;
    }
    body.fonce ::-webkit-scrollbar-track:hover,
    body.fonce ::-webkit-scrollbar-track:active {
        background: rgb(15, 16, 19);
    }
    body.fonce ::-webkit-scrollbar-thumb:hover,
    body.fonce ::-webkit-scrollbar-thumb:active {
        background: #6b7385;
    }


}



@media only screen and (max-width: 1400px){ /*JUSQUA 1400px*/
    .maxw1400{padding-left:5%;padding-right:5%}
    .imgslide{max-height: 100%;}
    .block1400{display: block }
    .none1400{display: none}
}
@media only screen and (max-width: 1300px){ /*JUSQUA 1200px*/
    .none1300{display: none}
}
@media only screen and (max-width: 1200px){ /*JUSQUA 1200px*/
    .w25P1200{width: 25%}
    .none1200{display: none}
}
@media only screen and (max-width: 1025px){ /*JUSQUA 1200px*/

    .fc-myCustomButton-button{display: block !important}
    .w25P1000{width: 25%}
    .w50P1000{width: 50%}
    .w30P1000{width: 30%}
    .w33P1000{width: 33.3%}
    .w75P1000{width: 75%}
    .pad101000{padding:10px !important}
    .pad0201000{padding:0 20px !important}
    .w100P1000{width: 100% !important}
    .none1000{display: none}
    .block1000{display: block}
    .fc-center{display: none !important}
    .masonry {
        -moz-column-count: 3;
        -moz-column-gap: 0;
        -moz-column-width: 33%;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        -webkit-column-width: 33%;
        column-count: 3;
        column-gap: 0;
        column-width: 33%
    }

}

@media only screen and (max-width: 980px){ /*MAXIMUM 980px de large TABLET*/
    body::before {content: 'mobile';display: none;}
    .w100PTablet{width: 100% !important}
    .noneTablet{display: none}
    .lastNoneTablet{display: none}
    .inblockTablet{display: inline-block !important}
    .blockTablet{display: inherit !important}
    .noCellTablet{display: inherit}
    .disBlockTablet{display: inherit !important}
    .floatNoneTablet{float: none;}
    .centerTablet{text-align: center;}
    .w60PTablet{width: 60%}
    .w50PTablet{width: 50%}
    .w40PTablet{width: 40%}
    .w25P800{width: 25%}
    .w30P800{width: 30%}
    .w33P800{width: 33%}
    .w100P800{width: 100% !important}
    .bloc3{margin-left: 1% !important;margin-right: 1% !important;width: 48%;}
    .maxw1200{padding-left:  20px;padding-right:  20px;width: 100%}
    .hautoTablet{height: auto !important}
    .cellTablet{display: table-cell;vertical-align: middle;}
    .centerTablet{text-align: center;}
    .pad0Tablet{padding:0 !important}
    .top20Tablet{margin-top: 20px}
    .top0Tablet{margin-top: 0px !important}
    .relativeTablet{position: relative}
    .leftTablet{float: left}
    .rightTablet{float: right}
    .cellTablet{display: table-cell !important}
    .w50Tablet{width: 50px !important}
    .w80Tablet{width: 80px !important}
    .w25PTablet{width: 25% !important}
    .w80PTablet{width: 80% !important}
    .w48PTablet{width: 48% !important}
    .left0Tablet{margin-left: 0 !important}
    .l0Tablet{left: 0 !important}
    .right0Tablet{margin-right: 0 !important}
    .m0{margin: 0}
    .spacerTablet{clear: both}
    .bnTablet{border:none}
    .nospacerTablet{clear: inherit !important}
    .top0Tablet{margin-top: 0px !important}
    .top7Tablet{margin-top: 7px}
    .top10Tablet{margin-top: 10px}
    .top20Tablet{margin-top: 20px !important}
    .top40Tablet{margin-top: 40px !important}
    .top80Tablet{margin-top: 80px !important}
    .relativeTablet{position: relative}
    .font50{font-size: 40px}
    .font25Tablet{font-size: 25px;font-weight: 400}
    .maxw1400,.maxw1200,.maxw1000,.maxw600{padding-left:  2%;padding-right:  2%;}
    .h50Tablet{height: 50px}
    .line50Tablet{line-height: 50px}
    .padL20Tablet{padding-left:20px !important}
    .pad0Tablet{padding:0 !important}
    .pad05Tablet{padding:0 5px !important}
    .pad10Tablet{padding:10px !important}
    .pad200Tablet{padding:20px 0 !important}
    .autolrTablet{margin-left: auto;margin-right: auto}
    .wcalc190Tablet{width: calc(100% - 190px) !important}
    .txtRightTablet{text-align:right}
    /*****************/
    a:active,.liencache:active,.bouton:active,.fhover:active,.push:active,.pointer:active,
    a:focus,.liencache:focus,.bouton:focus,.fhover:focus,.push:focus,.pointer:focus{-webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;-ms-transform:scale(0.9);-webkit-transform:scale(0.9);transform:scale(0.9);}
    header{position: fixed !important;top:0;width:100%;z-index: 20 !important}
    #navigation,#panier{width: 60%;height: calc(100% - 50px);top:50px}
    #corp.active{width: 100%;left:60%}
    #corp.activepanier{width: 100%;left:-60%}
    #fixedSlide{height: 350px;position: relative}
    #conteneur{top:0 !important}
    .produit .legende .absolute{top:0 !important}
    #headernoir{width: calc(100% - 100px) !important}
    .promo .reduction{top:25%;}
    #fixedSlide.panier,#fixedSlide.compte {display:none;}
    #conteneur.panier,#conteneur.compte {top: 20px !important;}
    #conteneur.compte {top: 50px !important;}
    .fc-center{display: none !important}
}
@media only screen and (max-width: 800px){ 
    .w20P800{width: 20% !important}
    .w28P800{width: 38% !important}
    .w70P800{width: 60% !important}
    .w80P800{width: 80% !important}
    .hauto800{height: auto !important}
    .w90P800{width: 90% !important}
    .w100P800{width: 100% !important}
    .none800{display: none}
    .pad200800{padding: 20px 0 !important}
    .flex80800 {flex: 0 0 80px;-webkit-flex: 0 0 80px;}
    .flex70800 {flex: 0 0 70px;-webkit-flex: 0 0 70px;}
    .flex50800 {flex: 0 0 50px;-webkit-flex: 0 0 50px;}
    .flex30800 {flex: 0 0 30px;-webkit-flex: 0 0 30px;}
    .block800{display: block}
    .pad100800{padding: 10px 0 !important}
    .pad010800{padding: 0 10px  !important}
    .vue{
        -webkit-transition: max-height 0.7s ease-in-out 0s; 
        -moz-transition: max-height 0.7s ease-in-out 0s; 
        -o-transition: max-height 0.7sease-in-out 0s; 
        -ms-transition: max-height 0.7s ease-in-out 0s; 
        transition: max-height 0.7s ease-in-out 0s;
    }

    .masonry {
        -moz-column-count: 3;
        -moz-column-gap: 0;
        -moz-column-width: 33%;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        -webkit-column-width: 33%;
        column-count: 3;
        column-gap: 0;
        column-width: 33%
    }

}
@media only screen and (max-width: 650px){ /*MAXIMUM 450px de large MOBILE*/
    #contenu{padding: 0}
    .fc .fc-axis {padding: 0 !important;font-size: 10px !important}
    .fc-event {padding: 2px !important;font-size: 10px !important;}
    .fc-event * {font-size: 10px !important;}
    .fc-today-button,.fc-center{display: none !important}
    .center600{text-align: center !important;}
    .hauto600{height: auto}
    .h60600{height: 60px}
    .padL10600{padding-left:10px}
    .w48P600{width: 48%}
    .w50P600{width: 50%}
    .w60P600{width: 60%}
    .w70P600{width: 70%}
    .w90P600{width: 90%}
    .w98P600{width: 98%}
    .w100P600{width: 100% !important}
    .w100P600-30{width: calc(100% - 30px) !important}
    .flex80600 {flex: 0 0 80px;-webkit-flex: 0 0 80px;}
    .flex70600 {flex: 0 0 70px;-webkit-flex: 0 0 70px;}
    .flex50600 {flex: 0 0 50px;-webkit-flex: 0 0 50px;}
    .flex30600 {flex: 0 0 30px;-webkit-flex: 0 0 30px;}
    .maxwauto600{max-width: 100% !important}
    .block600{display: block}
    .inblock600{display: inline-block}
    .txtLeft600{text-align: left}
    .top20600{margin-top: 20px}
    .top10600{margin-top: 10px}
    .top30600{margin-top: 30px}
    .bottom30600{margin-bottom: 30px}
    .autolor600{margin-left: auto;margin-right: auto}
    .line35600{line-height: 35px}
    .h35600{height: 35px}
    .bb600{border-bottom: 1px solid #ccc}
    .pad0600{padding : 0 !important}
    .pad5600{padding : 5px !important}
    .pad10600{padding : 10px !important}
    .pad010600{padding : 0 10px !important}
    .pad50600{padding : 5px 0 !important}
    .autolr600{margin-left:auto;margin-right:auto}
    .top50600{margin-top: 50px}
    .fc-button-group button {
        margin-left: 5px !important;
    }
    .fc button {
        height: 35px !important;
        line-height: 35px !important;
        padding: 0 13px !important;
    }
    #apercu{
        position: fixed;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
    }
    #apercu.ouvert{
        z-index: 999;
        visibility:  visible;
    }
    .apercu{
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100%;
        height: 100vh
    }
    .divpop .vue.active,.vue,.vue.active {
        max-height: 100vh;
        height: 100vh;
    }
    .mh66vh{max-height: 72vh}
    .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{background: rgba(51,51,51,0.3) !important;}
    audio{
        width: 200px !important;
    }
    .swc-toolbar,.fc-header-toolbar {
        height: 40px !important;
    }
    .fc-view-container {
        height: calc(100% - 40px) !important;
    }
    .masonry {
        -moz-column-count: 2;
        -moz-column-gap: 0;
        -moz-column-width: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 0;
        -webkit-column-width: 50%;
        column-count: 2;
        column-gap: 0;
        column-width: 50%
    }
}
@media only screen and (max-width: 450px){ /*MAXIMUM 450px de large MOBILE*/
    #bloc_affinage{position: fixed;z-index: 1000;height: calc(100% - 50px);top:50px;left:0;width: 100%;background-color: #fff}
    .cellMobile{display: table-cell !important;vertical-align: middle !important;}
    .centerMobile{text-align: center !important;}
    .noneMobile{display: none !important}
    .none600{display: none !important}
    .blockMobile{display: inherit !important}
    .noCellMobile{display: inherit !important}
    .lastNoneTablet{display: inherit !important}
    .disBlockMobile{display: inherit !important}
    .floatNoneMobile{float: none !important;}
    .centerMobile{text-align: center !important;}
    .w50PMobile{width: 50% !important}
    .w100PMobile,.w500{width: 100vw !important;margin-right: 0 !important;margin-left: 0 !important}
    .pad010Mobile{padding:0 10px !important}
    .pad100Mobile{padding:10px 0 !important}
    .pad0Mobile{padding:0 !important}
    .hautoMobile{height: auto !important}
    .w50Mobile{width:50px !important}
    .w150Mobile{width:150px !important}
    .top10Mobile{margin-top: 10px}
    .autolrMobile{margin-left: auto;margin-right: auto}
    .h100Mobile{height: 100px}
    .w100Mobile{width: 100px}
    .pad20Mobile{padding: 20px !important}
    .pad10Mobile{padding: 10px !important}
    .t0Mobile{top:0 !important}
    .txtLeftMobile{text-align: left !important}
    .bnMobile{border:none}
    /******************/
    #navigation,#panier{width: 80% !important}
    #corp.active{width: 100%;left:80% !important;overflow: hidden  !important;position: fixed}
    #corp.activepanier{left:-80% !important}
    #headernoir{width: calc(100% - 100px) !important}
    #btpanier{width: 50px !important}
    #divsearch.w350{width: calc(100vw - 100px) !important}
    .font50{font-size: 35px !important}
    .imgInter{height: 150px !important}
    .beforetri05:before{
        background-image: none;
    }
    .txtSlide{padding: 20px 0 40px}
    #fixedSlide{height: auto}
    .divpop{height: 100vh}
    .fc-day-header{font-size: 10px}
    #popContent{box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2)}
}