@media (max-width: 1400px){
    .back-left, .back-right{
        display: none;
    }
}

@media (max-width: 1366px) {
        header .header-search + .reseau-sociaux{
        left: 0 !important;
    }
}

@media (max-width: 1024px) {
    
    body.traiteur, body.express, body{
        max-width: 100%;
        overflow: hidden;
    }
    
    body > .main-content, header > div, footer .main-content, .agencement.horizontal{
        width: 1024;
        max-width: 100%;
    }
    
    /*Affichage choix menu*/
    
    .grid .module-droite + .grid-content{
        width: 69%;
        max-width: 69%;
    }
    
    .grid .module-droite{
        width: 31%;
        margin-right: -6px;
    }
    
    .agencement.accordion{
        width: 200px;
        width: 200px;
    }
    
    .avec-agencement > .content{
        width: 75%;
    }
    
    .liste .row .item form, .multi_colonne .row .item form{
        display: flex;
        align-items: center;
    }
    
    .liste .row .item form .details, .multi_colonne .row .item form .details{
        width: 50%;
    }
    
    .liste .row .item form .ajoutPanier.disponible, .multi_colonne .row .item form .ajoutPanier.disponible{
        margin-right: 10em;
    }
    
    .confirmation-menu .m_floatright{
      margin-top: 3em;  
    }
    
    /**/
    
    
    /*Choix de magasin*/
    
    
    .points-vente .column-left, .points-vente-details .row > .column-left{
        width: 35%;
    }
    
    .points-vente .column-right, .points-vente-details .modalLink, .points-vente-details .row > .column-middle{
        width: 63%;
    }
    
    .points-vente-details .modalLink > .column-left, .points-vente-details .row > .column-middle > .column-left{
        padding: 0;
        width: 100%;
    }
    
    .map-wrapper{
        width: 100%;
    }
    
    .points-vente-details .modalLink > .column-right, .points-vente-details .row > .column-middle > .column-right{
        width: 100%;
    }
    
    .module-points-vente form i, .choix-points-vente .box-recherche form i, .points-vente-details .box-recherche form i, .points-vente .box-recherche form i{
        width: 38px;
    }
    
    /**/
    
    /*Modals*/
    
    .fiche-produit.ui-dialog{
        top: calc(25% - 25px) !important;
        left: calc(33% - 50px) !important;
    }
    
    /**/

}

@media (max-width: 992px) {
	body.express, body {
	    background-color: #fff;
	}
	header {
		height: 90px;
		width: 100%;
	}
	body.portail header .toggle-nav {
		display: none !important;
	}
	body > .main-content, 
	header > div, 
	footer .main-content, 
	.agencement.horizontal {
		width: 100%;
	}
	header .first {
		top: 54px;
		left: 0;
		width: auto;
	}
	header .header-search {
		width: 130px;
	}
	header .second {
		top: 50px;
	}
	header .second .logo {
		left: auto;
		width: 100%;
		margin-top: -45px;
        text-align: center;
	}
	header .logo img {
		height: 40px;
	}
	header .second .logo a.app-name {
		font-size: 1.3em;
	}
	header .second .block-user {
		right: auto;
	}
	header .navbar-user > li,
	header .navbar-user > li:hover {
		font-size: 0.85em;
	}
	header .lien-fdf {
		left: auto;
        z-index: 1;
	}
	header .lien-fdf li {
		margin-top: 16px;
		font-size: 0.8em;
	}
    
    header .lien-fdf li a{
        font-size: .8em;
    }
    
    header .header-search + .reseau-sociaux{
     display: none;   
    }

	.index .module-bas .boxArticle, 
	.index .module-bas .boxRayon {
		width: 100%;
		height: 250px;
	}

	.express .agencement.accordion li.niveau_0 > a {
		padding-right: 10px;
        height: 35px !important;
	}
	.avec-agencement > .content {
		width: 100%;
	}
	.boxCarrousel .item img {
		max-width: 100%;
	}

	body > .main-content {
		min-height: auto;
		height: 100%;
        padding: 0 27px 0 27px;
	}
	body > .main-content .module-choix-magasin {
		display: none;
	}
    
	footer {
		position: relative;
		bottom: 0;
		width: 100%;
        margin-top: 4em;
	}
    
    /*Menu Mobile*/
    
    .agencement.accordion, 
	.agencement.horizontal {
		/*z-index: 9999;
		width: auto;
		position: absolute;
		display: none;
		background: #222;
		height: auto;
		top: 0;
		left: 0;
		padding-right: 1px;*/
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        position: inherit;
	}
    
    .agencement.horizontal .navbar-collapse{
        width: 100%
    }
    
    .agencement.horizontal .navbar-nav > li{
        width: 50%;
    }
    
    .agencement.horizontal .navbar-nav > li > a{
        border: none;
    }
    
    .agencement.horizontal ul.navbar-nav{
        flex-flow: inherit;
        flex-flow: wrap;
    }
    
    .agencement.accordion .separatorLibelle, .express .agencement.accordion li.niveau_0, .express .agencement.accordion li.niveau_0:hover{
        border: none;
    }
    
    .agencement.accordion li > a span.libelle{
        margin: 0;
    }
    
    .agencement.accordion li.niveau_0 > a{
        padding: 6px 0 0 7px;
    }
    
    .agencement.accordion{
        display: none;
    }
    
    header button.toggle-nav {
    position: fixed;
    top: 1em;
    left: 2em;
    z-index: 9999999999999999;
        
    height: 28px;
    color: #FFFFFF;
    background-color: #F2BC5A;
    background-image: none;
    padding: 0 10px;
    opacity: 0.8;
    width: 40px;
    }
    
    header button.toggle-nav:after {
    content: "";
    display: block;
    border: 1px solid #fff;
    width: 16px;
    height: 1px;
    position: absolute;
    top: 5px;
    left: 11px;
    }
    
    header button.toggle-nav span{
    content: "";
    display: block;
    border: 1px solid #fff;
    width: 16px;
    height: 1px;
    position: absolute;
    top: 12px;
    left: 11px;
    }
    
    .glyphicon-align-justify:before{
        content: "";
        display: block;
        border: 1px solid #fff;
        width: 16px;
        height: 1px;
        position: absolute;
        top: 6px;
        left: -1px;
    }
    
    .confirmation-menu{
        margin-bottom: 2em;
    }
    
    .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){
        font-size: 1em;
    }
    
    header .reseau-sociaux .share-facebook{
        height: 17px !important;
    }
    
    .express header .navbar-user > li > a.lidentification, .express header .navbar-user > li > a.lmagasin, .express header .navbar-user > li > a.laccount{
        font-size: 0.9em;
    }
    
    /*Style chevrons mobile*/
    
    .grid .module-droite{
        width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }
    
    .grid-sous-menu .selection-menu{
        width: 100%;
    }
    
    .etape-menu a{
        flex: none;
        width: 80%;
        margin-top: 0;
    }
    
    .etape-menu a:first-child span.etape{
        font-size: 0.9em;
    }
    
    .grid-sous-menu .bloc{
        margin-top: 50px;
    }
    
    .boxArticle .details{
        height: 52px;
    }
    
    /**/
    
    .liste.vignette .row .item form .details, .multi_colonne.vignette .row .item form .details{
        width: 100%;
    }
    
    .liste.vignette .grid ul.bloc > li.item, .liste.vignette .boxModule > ul > li.item, .multi_colonne.vignette .grid ul.bloc > li.item, .multi_colonne.vignette .boxModule > ul > li.item{
        width: 100%;
    }
    
    /*Meilleur Spin dans le panier mobile*/
    
    .etape-panier .spin{
        width: 65px;
        height: 65px !important;
    }
    
    .etape-panier .spin button.spin-minus, .etape-panier .spin button.spin-plus{
        height: 25px;
        width: 25px;
    }
    
    .etape-panier .spin button.spin-minus{
        margin-top: 25px;
    }
    
    /**/
    
    /**/
}
@media (max-width: 768px) {
	.module-points-vente,
	.choix-points-vente .box-recherche,
	.points-vente-details .box-recherche,
	.points-vente .box-recherche {
		width: 100%;
	}
	header {
		height: 130px;
	}
	header .header-search {
		width: 230px;
	}
	.f_search_pv.navbar-form .input-group > .form-control {
		width: 100%;
	}
	header > .first { 
		margin-top: 21px;
	}
	header > .first > div, 
	header .header-search {
		margin-top: 25px;
	}
	header .header-search + .reseau-sociaux {
		margin-top: 25px;
	}
    
    .boxModule .item:hover .boxRayon img {
        width: 150px;
        height: 150px;
    }
    
    .boxModule .item:hover .boxRayon .back{
        background-color: transparent;
    }
    
    header .glyphicons-home{
        margin: 0;
        font-size: 1.4em;
    }
    
    .reseau-sociaux{
        background-color: #F19309;
        padding: 6px;
    }
    
    header .header-search form i{
        background-color: #F19309;
    }
    
    header .second .block-user{
        padding-right: 0;
    }
    
    header .lien-fdf{
        display: none !important;
    }
    
    .fiche-produit.ui-dialog .ui-dialog-title{
        float: right;
        margin-top: 8px;
    }
    
    .fiche-produit.ui-dialog .article .droite div.acheter{
        position: relative;
        float: right;
    }
    
    .choix-enlevement-express.ui-dialog .ui-dialog-titlebar button{
        right: 0;
        top: 0;
    }
    
    
    /*.content .head .title{
        padding-left: 1em;
    }*/
    
    
    .main-content .ariane{
        margin-top: 35px;
        padding-left: 1em;
    }
    
    .etapes .etape-panier, 
	.etapes .etape-coordonee, 
	.etapes .etape-expedition, 
	.etapes .etape-paiement,
	.commande .etape-panier,
	.commande .etape-coordonee,
	.commande .etape-expedition,
	.commande .etape-paiement {
        padding: 0;
    }
    
    .messageCookieMessage{
        font-size: 12px;
        margin-top: 2em;
    }
    
    .messageCookie .glyphicons, .controleCookie .glyphicons{
        right: 50%;
        top: 0.4em;
    }
    
    .points-vente-details.ui-dialog, .points-vente-details.ui-dialog .ui-dialog-content{
        width: 100% !important;
    }
    
    .points-vente-details .modalLink > .column-right{
        padding: 9em !important;
    }
    
    .points-vente-details .head, .points-vente .head{
        padding-left: 20px;
    }
    
    .points-vente-details .modalLink > .column-left, .points-vente-details .row > .column-middle > .column-left, .points-vente-details .row > .column-left{
        width: 100% !important;
    }
    
    .article-ajout{
        padding: 0 4em;
    }
    
    .commande thead .border, .commande .total th span, .etapes thead .border, .etapes .total th span{
        border: none;
    }
    
    .commande .itemsDetails tbody .border, .etapes .itemsDetails tbody .border, .commande .total th span, .etapes .total th span{
        border: none !important;
        padding: 4px;
    }
    
    .etapes .fidelite > div form i{
        padding: 6px 0px 0px 11px;
    }
    
    .etapes .fidelite > div form{
        margin: 0;
    }
    
    .module-points-vente, .choix-points-vente .box-recherche, .points-vente-details .box-recherche, .points-vente .box-recherche{
        border: 0;
    }
    
    .express .boxCarrousel .boxArticle .ajoutPanier, .express .boxModule .boxArticle .ajoutPanier{
        margin-top: 95px;
    }
    
    .boxArticle .details .ttrPu, .express .boxModule .boxArticle .details .ttrPu{
        position: relative;
        text-align: center;
        margin-right: -50px;
        margin-top: 0px;
    }
    
    .article-type-M .boxArticle .details a.hrefLibelle, .boxArticle .details a.hrefLibelle{
        text-align: center;
        margin-bottom: 0px;
    }
    
    .short-desc{
        margin-top: 30px;
    }
    
    .boxArticle .details .pu{
        top: 0;
    }
    
    .boxArticle{
        margin: auto;
    }
    
    .boxArticle .ajoutPanier, .boxArticle .details, .boxArticle .details .pu{
        text-align: center;
    }
    
    .grid-sous-menu .boxArticle .details .pu{
        right: 0;
    }
    
    .grid.grid-sous-menu .boxArticle .details .ttrPu{
        margin: auto;
        margin-top: 21px;
        font-size: 0px;
        right: 49px;
    }
    
    /*.express .grid .navigationBar{
        display: none;
    }*/
    
    .fiche-produit.ui-dialog{
        width: 100% !important;
        top: calc(11% - 25px) !important;
        left: calc(11% - 50px) !important;
    }
    
    .tabs.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all{
        display: flex;
        justify-content: center;
    }
    
    .grid-sous-menu ul.row:first-of-type{
        margin-top: 4em;
    }
    
    .article .composition, .grid .bloc{
        margin-right: -10px;
    }
    
    .grid .bloc .item:hover{
        margin: 0;
        /*margin-right: 15px;*/
    }
    
    .boxArticle .ajoutPanier{
        margin: 6em auto 0;
    }
    
    .article-type-M, .article .composition .item, .boxCarrousel .item, .boxModule .item, .grid .bloc .item{
        margin-right: 15px;
    }
    
    .choix-enlevement-express.ui-dialog, .ui-dialog.ui-widget-content, .ui-dialog.max-size-buttons, .ui-dialog{
        width: 100% !important;
    }
    
    .choix-enlevement-express .choose-title{
        width: 92%;
    }
    
    .choix-enlevement-express .choose-delivery > div:nth-last-child(2), .choix-enlevement-express .column-right, .choix-enlevement-express .column-right{
        width: 100% !important;
    }
    
    /*.grid-sous-menu .selection-menu{
        display: none;
    }
    
    .grid .module-droite{
        display: none;
    }*/
    
    div.m_floatright a.ajout {
    background-color: #F19309 !important;
    border-radius: 8px;
    padding: 1em 1em;
    text-align: center;
    color: #fff !important;
    padding: 11px 12px 12px 22px !important;
    }
    
    div.m_floatright{
        margin-top: 2em;
    }
    
    /*Affichage choix menu*/
    
    .etape-menu span.etape{
        font-size: 11px;
    }
    
    .grid-sous-menu .selection-menu .etape-menu .etape .etape-selection{
        width: 80%;
    }
    
    .column-left, .column-right, .article .gauche, .article .droite, .module-gauche{
        width: 71% !important;
    }
    
    .grid-content{
        width: 100% !important
    }
    
    .grid-content ul.bloc.row{
        width: 100%;
    }
    
    
    
    /**/
    
    .choix-points-vente-details .row > .column-middle, .points-vente-details .row > .column-middle, .points-vente-details .row > .column-right, .points-vente-details .modalLink > .column-right, .points-vente-details .row > .column-middle > .column-right{
        width: 100% !important;
    }
    
}

@media (max-width: 640px) {
	header .second .block-user {
		padding-right: 0;
	}

	.index .module-bas .item {
		width: 100%;
	}

	.index .module-bas .boxArticle, 
	.index .module-bas .boxRayon {
		width: 100%;
		height: 225px;
	}
	.express header .navbar-user > li > a + ul {
		display: none !important;
	}
	.express header .navbar-user > li > a.lidentification {
		padding-right: 15px;
	}
    
}

@media (max-width: 410px){
        
    header .navbar-user > li > a{
        /*text-indent: 46px !important;
        background-position: 11px 8px !important;*/
        text-indent: 0px !important;
        background-position: 7px 11px !important;
        background-image: none !important;
        font-size: 11px !important;
        text-align: center;
    }
    
    header .navbar-user{
        display: flex;
        float: none;
    }
    
    header .navbar-user li{
        width: initial;
    }
    
    .express header .navbar-user > li > a.lcadencier, .express header .navbar-user > li > a, .traiteur header .navbar-user > li > a{
        font-size: 0.8em;
        padding: 11px 6px 10px 17px;
        padding-left: 0 !important;
    }
    
        .express header .navbar-user > li > a.lidentification, .express header .navbar-user > li > a.lmagasin, .express header .navbar-user > li > a.laccount{
        font-size: 0.6em;
    }
    
    .choix-enlevement-express .column-left, .choix-enlevement-express .column-right{
        width: 100% !important;
    }
    
    .column-left, .column-right, .article .gauche, .article .droite, .module-gauche, .grid-content{
        width: 100% !important;
    }
    
    .grid-sous-menu .selection-menu, .grid .module-droite{
        display: none !important;
    }
    
    .grid-sous-menu .bloc{
        margin-top: 0;;
    }
    
    .grid-sous-menu .bloc.button-niveau{
        max-width: 100%;
        text-align: center;
    }
    
    .grid ul.bloc > li.item.article-type-M{
        margin-bottom: 6em !important;
    }
    
    .bloc.row.button-niveau{
        margin-top: 12px;
    }
    
    button.valid-ingredient-menu, button.choisir-ingredient-menu, button.sans-ingredient-menu{
        width: 88%;
    }
    
    button.sans-ingredient-menu{
        margin-left: 0;
    }
    
    .express.commande div.acheter > div, .express .article-ajout div.acheter{
        float: none;
        margin: auto;
        margin-top: 2em;
    }
    
    .module-cross-selling-article-associe ul.row li.item{
        width: 100%;
    }
    
    /*Spins*/
    
    button.spin-minus, button.spin-plus{
        width: 40px;
        margin: 0;
    }
    
    .liste .row .item form .ajoutPanier.disponible, .multi_colonne .row .item form .ajoutPanier.disponible{
        margin-right: 0;
    }
    
    .liste .row .item form .details, .multi_colonne .row .item form .details{
        width: 61%;
    }
    
    .liste .row .item form, .multi_colonne .row .item form{
        justify-content: space-between;
    }
    
    header .navbar-user .lcadencier span, header .navbar-user .lcart span{
        left: 50px;
        top: -10px;
    }
    
    .grid.grid-sous-menu .navigationBar .blocTitle > span{
        display: none;
    }
    
    .ariane.row{
        display: none;
    }
    
    .grid.grid-article .grid-content .bloc.roc{
        display: flex !important;
    }
    
    /**/
    
}

/*Surhcarge responsive*/

header button.toggle-nav{
    /*display: none !important;*/.grid ul.bloc,
}

@media (max-width: 768px) {
    /*.grid ul.bloc, .boxModule > ul{
        display: block;
    }*/
    
    .grid .sous-rayon ul.bloc, .boxModule > ul{
        display: block;
        margin: auto;
    }
    
    .fiche-produit.ui-dialog .ui-dialog-content {
    padding: 43px 20px 0 20px;
    }
    
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.confirmation-menu{
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .express .ui-dialog .button, .express .ui-dialog .ui-dialog-buttonpane button:hover, .express .ui-dialog .ui-dialog-buttonpane button{
        margin: auto !important;
        padding: 1em !important;
        margin-bottom: 1em !important;
    }
    
    .ui-dialog .ui-dialog-titlebar button, .ui-dialog .ui-dialog-titlebar-close{
        right: 7px;
        top: -1px;
    }
    
    /*Corriger les décalage au hover de certains éléments*/
    
    .grid ul.bloc > li.item, .boxModule > ul > li.item{
        margin: 0 !important;
        padding: 0 !important    
    }
    
    .grid ul.bloc > li.item:hover, .boxModule > ul > li.item:hover{
        margin: 0;
        padding: 0;
    }
    
    .button.sans-supplement-menu, button.sans-ingredient-menu, .button.sans-supplement-menu:hover, button.sans-ingredient-menu:hover{
        margin-left: 0;
    }
}

@media (max-width: 431px) {
    .commande .content .action a, .etapes .content .action a{
        font-size: 1em;
    }
}