/* Large screens ----------- */  /******* LG *******/
@media only screen
and (min-width : 1200px) {
    /* Styles */
  
    #category > li {
        position: relative;
    }

    .sub-category {
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.67);
    }
    .sub-category-row {
        padding: 30px 30px 30px;
    }

    .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        grid-gap: 20px;
    }

    .limit-max-width {
        grid-template-columns: repeat(auto-fit, minmax(220px, 250px))!important;
    }

}


/*  ECRAN CARRE 1440 x 1024  */
@media only screen
and (min-width : 1024px)
and (max-width : 1440px) {
    aside.nav-sidebar {
        display: none;
    }
}




/*  ECRAN CARRE 1280 x 1024  */
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 1200px)
and (max-width : 1300px) {
    /* Styles */


    #category > li {
        font-size: 12px;
    }

    .sidebar-title {
        font-size: 16px;
    }

    #category-title-page {
        display:none;
    }

    .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        grid-gap: 10px;
    }
    .addToBasketPlaceholder {
        position: absolute;
        top: 14px!important;
        right: 28px!important;
        font-size: 10px!important;
        text-transform: uppercase;
        font-weight: bold;
    }

    .limit-max-width {
        grid-template-columns: repeat(auto-fit, minmax(220px, 234px))!important;
    }

}

/* Desktops and laptops ----------- */ /******* MD *******/
@media only screen
and (min-width : 992px)
and (max-width : 1200px) {
    /* Styles */
    .addToBasketPlaceholder {
        position: absolute;
        top: 14px;
        right: 28px;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        grid-gap: 10px;
    }
    .limit-max-width {
        grid-template-columns: repeat(auto-fit, minmax(220px, 234px))!important;
    }

    #category > li {
        border: 0px solid rgba(0, 0, 0, 0.06);
        position: relative;
        text-transform: uppercase;
        text-align: center;
        font-size: 14px;
        line-height: 30px;
        letter-spacing: 2px;
        font-weight: bold;
    }
    .sub-category {
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.67);
    }

    .sub-category-row {
        padding: 30px 30px 30px;
    }
}




/* iPads & iphone(portrait and landscape) ----------- */    /******* SM *******/
@media only screen
and (max-width : 992px) {



    body[data-controller="History"] h1 {
        padding: 0 15px;
    }

    body[data-controller="Cart"] h1 {
        padding: 0 15px;
    }

    .historySolde {
        display: block;
        float: none;
    }

    /* Styles */

    .flag-fr {
        background-image: url(/assets/img/fr.jpg);
        background-size: cover;
        overflow: visible;
        padding-top: 5px;
        display: block;
        height: 5px;
        text-align: center;
    }
    nav.main-nav {
        display: none;
    }

    #myFav {
        display: none;
    }

    #app > #content > .container {
        margin:0 auto;
    }

    body[data-controller='Category'] #app > #content > .container {
        margin:0 0px;
    }
.product-image {
    position: absolute;
    width: 78px;
    top: 0;
    bottom: 0;
    border: 1px solid silver;
}

.product-info {
    /* margin-top: auto; */
    padding-top: 0px;
    padding-left: 80px;
    text-align: center;
}

.product-card {
    display: flex;
    flex-direction: column;
    padding: 0%;
    flex: 1 19%;
    background-color: #FFF;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
}
	
	.product-info h5 {
		padding-left:5px;
	}
	.product-picto {
    position: absolute;
    top: 0;
    right: 0;
    width: 78px;
    height: 40px;
}

.addToCart-widget, .addToCart-widget-frac {
    background: #efebe7;
    margin: 0px 0;
    text-align: center;
}

	.products-container {

  grid-gap: 5px;
}
	
	
/*
    .uniCdeDropdown, .product-unicde {
        width: 100%;
    }
	*/
/*
    .addToCartAjax {
        width: 100%;
        min-height: 33px;
    }
*/
	/*
    body[data-controller='Category'] .addToCart-widget, body[data-controller='Category'] .addToCart-widget-frac {
        background: #ffffff;
        margin: 20px 0;
        text-align: center;
        border: 6px solid #fd7b00;
        border-bottom: none;
        padding: 0px 0px 5px 0px;
        border-left: none;
        border-right: none;
    }
	*/
    #header-container .hc-container {
        margin-left: 10px;
        margin-right: 15px;
    }

    #countdown {
        display: none;
    }

    .login-text-app {
        font-size: 12px;
    }

    aside.nav-sidebar {
        display:none;
    }

    #magasins {
        margin-left: 0px;
        width: 100%;
    }

    #magasins .magasins-item-list {

        z-index: 99999;
        background: white;
    }

    #univers {
        width:100%;
        margin:0;
        background: #edf5fd;
        border-bottom: 1px solid #e1e1f1;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.11);
    }

    #univers .univers-item-list {
        top:40px;
    }

    .main-nav > div.container.flex {
        display: block;
    }

    .nav-account {
        margin-top:6px;
    }

    .myAccount.dropdown > div {

        top: 41px;
    }

   
    .phone-logo {
        float: left;
    }

    .phone-search {
        display: block;
        background: white;
        position: fixed;
        top: 50px;
        left: 0;
        height: 48px;
        right: 0;
        box-shadow: -4px -1px 6px 3px rgba(115, 110, 110, 0.57);
    }

    .displaySearchPhone .k-icon.active {
        color: #ffffff;
        font-weight: bold;
    }

    .searchNav {
        max-width:100%;
    }

    #searchResult {
        left: 0px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }



    .phone-icon-nav {

    }

    .phone-menu-bar {
        width: 35px;
        display: block;
        margin: 9px auto 0;

    }

    .phone-menu-bar > span {
        display: block;
        background-color: rgb(234, 224, 224);
        width: 100%;
        height: 2px;
        margin: 6px 0;
    }

    .topbar-menu-icon {
        float: left;
        height: 50px;
        width: 35px;
        margin:0 20px;
    }

    .topbar-menu-icon span.text-menu {
        font-size: 10px;
        display: block;
        text-align: center;
        margin-top: -3px;
        text-transform: uppercase;
    }

    .main-nav-phone-layer {
        display:none;
        position: fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color: rgba(73, 73, 73, 0.62);
        z-index: 99999;
    }

    .main-nav {
	display:none;
        position: fixed;
        top: 0;
        left: 0;
		right: 0;
        bottom: 0;
        width: 100%;
        background: white;
        z-index: 999999;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        transition-duration: 0.1s;
    }

    .main-nav.show-me {
        /*left: 0px;*/
		display:block;
        transition-duration: 0.1s;
    }
	
	.mobile-close-parent {
		display:none;
	    position: fixed;
		top: 0;
		width: 100%;
		z-index: 999999999999;
	}
	
	.main-nav .container {
	padding-top:30px;
	}
	
	.menu-mobile-close {
	color: white;text-align: right;display: block;padding: 5px;background: black;
	

	}
    body.push-me #app {
        transform: translateX(100%);
        transition-duration: 0.1s;
        margin-top: 0;
        position: absolute;
        top: 0;
        bottom: 0;
    }
    body.push-me {
        overflow: hidden;

    }

    body.push-me #content {
        overflow: hidden;
    }

    body.push-me .tbmi1 {
        transform: rotate(45deg);
        margin-top: 20px;
        transition-duration: 0.5s;
    }

    body.push-me .tbmi2 {
        opacity: 0;
    }

    body.push-me .tbmi3 {
        transform: rotate(-45deg);
        margin-top: -16px;
        margin-bottom: 16px;
        transition-duration: 0.5s;
    }

    .close-phone-nav {
        position: fixed;
        left:300px;
        top:0;
        color: #000;
        font-size: 30px;
        background-color: white;
    }

    #category {
        display: block;
    }

    #category > li {
        display: block;
        width:100%;
    }

    #category > ul > li {
        display: block;
        width:100%;
    }

    #category > li > a  {
       text-align: left!important;
       display: block;
       padding-left: 13px;
       color: #000000;
       font-size: 15px;
       background: #f7f7f7;
       font-weight: bold;
    }

    .main-nav .container {
        padding-right: 0;
        padding-left: 0;
    }

    #category .col {
        padding:0;
    }

    .sub-category {
        position: static;
        display: block;
        visibility: visible;
        opacity: 1;
        transition-duration: 0.2s;
        border-top: 1px solid silver;
    }

    .sub-category-row {
        display: block;
        padding:0;
    }

    .sub-category-row > div.col {
        border-right: 0px dashed #b6b2b6;
    }

    .sub-category-row img {
        width:100%;
    }

    .menu-title {
        color: #000!important;
        text-transform: uppercase!important;
        margin-bottom: 0px!important;
        line-height: 35px;
        font-weight: bold;
        border-bottom:1px solid silver;
        overflow: hidden;
    }

    .menu-title > a {
        font-size: 13px !important;
        letter-spacing: 0px;
		color: #000!important;
        text-transform: uppercase!important;
        margin-bottom: 0px!important;
        line-height: 35px!important;
        font-weight: bold;
        padding-left: 15px;
		display:block;
        overflow: hidden;
    }

    .product-filter {
        display:block;
    }

    #app {
        margin-top:0px;
    }

    #content {
        margin-top:50px!important;
    }

    .myCart {
        margin: 0px 0px;
    }

    #category > li:hover {
        border-bottom: 0px solid black;
    }


    #myDelivery #ribbon
    {
        display: none;
    }

    .list-inline>li {
        padding-right: 5px;
        padding-left: 17px;
    }

    #myDelivery {
        display: inline-block;
        margin-top: 0px;
        position: static;
        padding: 0 5px 0 17px;
        cursor: pointer;
        width: auto;
    }

    #chrono-icon {
        display: inline-block;
    }

    .mntext {
        display: none;

    }

    .nav-account span.k-icon {
        font-size: 27px;
        margin-top: 7px;
    }

    .myCartNbProduct {
        background-color: rgba(255, 5, 5, 0.76);
        display: block;
        color: #fff;
        font-weight: bold;
        font-size: 11px;
        position: absolute;
        line-height: 20px;
        left: 30px;
        border-radius: 20px;
        width: 18px;
        height: 19px;
        top: 1px;
        z-index: 2;
        display: none;
    }

    #myCart .k-icon {
        margin-bottom: 0px;
        font-size:22px;
    }

    .collection-sort {
        padding-top: 16px;
    }

    .container {
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
    }

}

/***********POUR LE FILTRE***********/
@media only screen
and (max-width : 670px) {
    .sort {
        display: block;
    }

    .collection-sort {
        display: block;
        padding: 16px 0 0 0;
    }
}

@media only screen
and (min-width : 670px) {
    .sort {
        display: flex;
    }
    .collection-sort {
        display: flex;
        padding: 16px 16px 0 0;
    }
    .collection-sort:last-child {
        display: flex;
        padding: 16px 0 0 0;
    }

    .filter-input {
        width:300px;
    }




}




/* Smartphones (portrait and landscape) ----------- */ /******* XS *******/
@media only screen
and (min-device-width : 100px)
and (max-device-width : 320px) {




    .img-box-content > img {
        height: auto;
        width: 100%!important;
    }

    aside.nav-sidebar {
        display:none;
    }
    /* Styles */
    .product-card {
        flex: 1 46%;
    }

    h1 {
        margin-bottom: 20px;
    }

   

    .sort {
        align-self: flex-start;
    }

    .list-inline>li {
        padding-right: 5px;
        padding-left: 5px;
    }

    /*iphone 5*/

    #searchResult {
        max-height: 350px;
    }




}





/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    /* Styles */

    #category > li {
        font-size: 12px;
    }

    .sidebar-title {
        font-size: 16px;
    }

    #category-title-page {
        display:none;
    }

    .addToCartAjax input {
        width: 27px;
    }

    .username-display {
        display: none;
    }

    .addToBasketPlaceholder {
        position: absolute;
        top: 8px;
        right: 29px;
        font-size: 15px;
        text-transform: capitalize;
    }

}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    /* Styles */

    .filter-input {
        width:300px;
    }
    .k-button.download-pdf, .k-button.download-pdf:active, .k-button.download-pdf:hover, .k-button.download-pdf:active:hover {
        width: 100% !important;
    }

    .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    }

}


/**************************************************** iPad Pro ********************************************************/
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
    .addToBasketPlaceholder {
        position: absolute;
        top: 14px;
        right: 28px;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        grid-gap: 10px;
    }
}

/* Portrait */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
    #category > li {
        font-size: 12px;
    }

    .sidebar-title {
        font-size: 16px;
    }

    #category-title-page {
        display:none;
    }
    .addToBasketPlaceholder {
        position: absolute;
        top: 14px;
        right: 28px;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        grid-gap: 10px;
    }


}

/* Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {

}


/* Pour une largeur max de 400px */
@media only screen
and (min-device-width: 1164px)
and (max-device-width: 1223px) {
  .addToBasketPlaceholder {
      display: none;
  }
}

@media only screen
and (min-device-width: 993px)
and (max-device-width: 1060px) {
    .addToBasketPlaceholder {
        display: none;
    }
}

@media only screen
and (max-width : 400px) {

    #fl-container {
        position: relative;
        width: 97%;
        height: 500px;
        margin: 0 auto;
        border: 0px solid rgba(0, 0, 0, 0.24);
        border-radius: 0px;
        margin-top: 24px;
        box-shadow: 0 0 0 0px rgba(204, 204, 204, 0.16);
    }

}