/*
    Styles généraux
*/

button {
    border: 0;
    cursor: pointer;
}

html, body {
    padding: 0;
    margin: 0;
}

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

.main-content-center {
    display: flex; 
    flex-direction: column;
}


.facebook::before {
    content: "\F020C"; 
}

.nav-croix::before{
    content: "\F0156";
}

.nav-croix {
    cursor: pointer; 
    position: absolute;
    right: 20px; 
    top: 0;
}

.twitter::before{
    content: "\F0544";
}

.pinterest::before{
    content: "\F0407";
}

.linkedin::before{
    content: "\F033B";
}

.instagram::before {
    content: "\F02FE";
}

.list-fill::before {
    content: "\F0279";
}
.only-responsive {
    display: none; 
}

.hide {
    display: none;
}

.bold {
    font-weight: bold;
}

.btn {
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    font-size: 13px;
    margin: 0;
    padding: 10px 20px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    position: relative;
    transition: all 400ms ease-in-out 0s;
    -webkit-transition: all 400ms ease-in-out 0s;
}


:root {
    --color-text: #111111;
    --color-body-text: #666666;
    --color-body: #ffffff;
    --color-border: #e5e5e5;
    --color-header-text: #333333;
    --color-sale-text: #222222;
}

.menu-item-title-link, .left-menu-link{
    font-family: Jost;
}

.header-info{
    font-family: Roboto-Thin;
    color: #666666;
}

a, a > p, .dropdown-subtitle {
    color: #666666;
    background: transparent;
    text-decoration: none;
    transition: all 400ms ease-in-out 0s;
    -webkit-transition: all 400ms ease-in-out 0s;
    -moz-transition: all 400ms ease-in-out 0s;
    -o-transition: all 400ms ease-in-out 0s;
    -ms-transition: all 400ms ease-in-out 0s;
}

ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
}

div {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}

.search-bar {
    position: fixed;
    z-index: 100;
    background-color: #fff;
    width: 100%;
    height: 40vh;
}

.back-black{
    height: 100vh; 
    width: 100vw; 
    background-color: rgba(19, 19, 19, 0.422);
    position: fixed;
    z-index: 10;
}

.search-bar-inner {
    position: relative;
    width: 70%;
    margin: auto;
}
 
input[type="search"] {
    -webkit-appearance: none;
    box-sizing: border-box;
    font-size: 30px;
    color: #111;
    border: none;
    font-weight: 500;
    height: 80px;
    line-height: 80px;
    border-bottom: 2px solid rgba(84,84,84,.1);
    font-family: Jost;
    padding: 0;
    width: 100%;
    outline: none;
}

.looking-for {
    padding-top: 80px;
    font: 700 18px Jost; 
}

.search-bar-disable{
    top: -100%;
    transition: all 400ms ease-in-out 0s;
}

.search-bar-active{
    top:0;
    transition: all 400ms ease; 
}

.top-bar {
    height:max-content;
    margin: 0 0 50px;
    background: url("../img/chaises.jpg") 50% 40.3361%;
    background-size: cover;
}

.bar {
    padding: 50px 0;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}

.material-icons{
    font-family: "Material Design Icons";
    font-size: 24px;
    height: 24px;
    width: 24px;
    font-style: normal ;
}

.bar-title, .direction, .home, .to-icon {
    font-size: 16px;
}

.home::before {
    content: "\F06A1";
}

.to-icon::before {
    content: "\F0142";
}

.container {
    max-width: 90vw;
}

.icon {
    width:16px;
    height: 16px;
}

.icon-medium {
    width:28px;
    height: 28px;
}

.icon-navigation{
    height:30px;
    width: 30px;
    margin-left: 5px;
    cursor: pointer; 
}

.dropdown {
    position: relative;
    display: inline-block;
}

.header-sticky .dropdown {
    position: unset;
}


.header-sticky .dropdown-content{
    border: none !important;
}

.dropdown-content {
    border: 1px solid #e5e5e5;
    border-top: none;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.myaccount .dropdown-content{
    background-color: #fff;
    box-shadow: none;
} 

.hamburger {
  display: block;
  width: 33px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 3px;
  transform-origin: 4px 0px;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: growDown 400ms ease-in-out;
    transform-origin: top center; 
}

@keyframes growDown {
    0% {
       transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes reduceUp {
    0% {
       transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

.dropdown-shop-subtitle{
    font: 200;
    padding-bottom: 5px;
    font-family: Roboto;
    border-bottom: 1px solid #797979;
}

.dropdown > li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.dropdown-shop-section{
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    vertical-align: top;
    margin-top:0;
    text-align: left;
}

.navigation-dropdown{
    padding: 30px 100px;
    padding-left: 20px;
    position: absolute;
    z-index: 1000;
}

.dropdown-subtitle{
    padding: 5px;
}

.header-middle {
    width: 100%; 
    border-bottom: 1px solid #e5e5e5;
} 

.header-middle-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header-contact-link {
    float: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    padding: 5px;
}

.header-info {
    margin: 5px 2px 5px 2px;
}

.header-contact-link-img {
    margin-right: 5px;
}

.left-nav, .right-nav {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center; 
}


.right-nav > div, .left-nav > div{
    margin-right: 15px;
}

.header-logo {
    width: 100%;
}

.header-logo-link{
    width: 30%;
}

.large-logo {
    display: flex;
    margin: 30px auto; 
}

.header-sticky {
    background-color: #383127;
}

.header-sticky-fixed {
    position: fixed;
    top: 0;
    left: 0; 
    right: 0;
    z-index: 10;
}

.header-sticky > .container {
    display: grid; 
    grid-template-columns: repeat(3,1fr);
}

.croix {
    position: absolute;
    top: 20px; 
    left: 20px;
}

.left-menu{
    position: fixed;
    left: 0;
    top: -110%; 
    width: 30vw;
    height: 100vh;
    background-color: #fff;
    z-index: 1;
    padding: 0 20px;
    transition: top 400ms, left 400ms  ease-in-out 0s;
}

.left-menu-links{
    height: 100%;
    padding: 255px 5px 30px 0;
}

.load-left-menu{
    left: 0; 
    top: 0;
    transition: top 400ms, left 400ms ease-in-out 0s;
}

.left-menu-link{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.nav-toggle, .menu-item-title-link {
    color: #ffffff;
    height:100%;
}

.menu-item {
    height: 100%;
}

.droppable-hover{
    height: 100%;
    
}

.menu-item-title-chevron {
    margin-left: 5px;
}

.menu-item-title-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    padding: 15px 5px;
    margin: 10px 0;
}


.menu-item-title-link:hover{
    background-color: #ef8f75; 
}

.menu-item-title-link:hover > .menu-item-title-chevron{
    transform: rotate(-90deg);
    transition: all 450ms ease-in-out 0s;
}

.text-link {
    display: inline;
    border: 0 none;
    background: none;
    padding: 0;
    margin: 0;
}

.slide-element{
    position: relative;
}


.menu-toggle-wrap, .icons-right {
    display: flex;
    vertical-align: baseline;    
    align-items: center; 
}


.article__title > a{
    overflow: hidden;
    width: 100%;
    font: 400 22px/26px Jost;
    color: #111 !important;   
}

.article-data{
    display: flex;
    flex-direction: column;
}

.rte  {
    font: 500 13px/22px Roboto;
    color: #666;
    margin-bottom: 20px;
}
.article__title {
    margin: 0 0 15px;
}

.main-navbar {
    width: max-content;
    display: inline-block;
}

.navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
}

.navigation-dropdown-shop {
    position: absolute;
    left: 0;
    text-align: center;
    width: 100%;
    padding: 30px 0;
    z-index: 10000;
    
}

.navigation-dropdown-look {
    position: absolute;
    text-align: center;
    left: 0;
    width: 100%;
    padding: 30px 0;
    z-index: 10000;
}

.value {
    color:#666666;
    background-color: white; 
    border-radius: 50%;
    width: 16px;
    height: 8px;
    padding-bottom: 8px;
    text-align: center;
    margin: 5px;
}

.navigation-dropdown-shop-inner {
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: flex-start;
}

.dropdown-shop{
    margin: 20px;
}

.icons-right{
    justify-content: flex-end;
}

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

.slide-img {
    aspect-ratio: auto 1903 / 870;
}

.slideshow {
    position: relative;
    margin-bottom: 50px;
}

.shop-now-slide-2, .shop-btn-slide-2{
    width:max-content !important;
}

.slide-image-min {
    padding:3px 0px 3px 3px;
    background-color: #fff;
    width: 130px;
    transform: translateX(30%);
    margin-bottom: 1px;
    cursor: pointer;
}

.slide-image-min:hover{
    transform: translateX(5%);
    transition: all 400ms ease-in-out 0s;
}

.slide-image-min:not(:hover){
    transform: translateX(30%);
    transition: all 400ms ease-in-out 0s;
}

.slide-image{
    display: block;
    width: 100%;
}
.show {
    opacity: 1;
    transition: all 400ms ease-in-out 0s;
}

.not-show{
    opacity: 0;
    transition: all 400ms ease-in-out 0s;
}

.min-icons {
    position: absolute; 
    right: 0;
    top:50%;
    width: 9%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.slideshow {
    position: relative; 
}

.slide{
    position: absolute;
}

.slideshow-title {
    position: absolute;
    right: 0;
    width: 40%;
    bottom:0%;
    margin-right: 10%;
    padding-bottom: 10%;
}

.slideshow-title-text, .slideshow-subtitle-text {
    text-align: right;
    width: 100%;
    line-height: 40px;
    color:white;
    margin: 0 0 20px;
    font-family: Lora;
    font-size: 2.5vw;
}


.slideshow-subtitle-text{
    bottom: 20%;
    line-height: 35px;
    font-family: Roboto;
    font-size: 1vw;
    font-weight: 0;
}   

.slideshow-title-2 {
    width: 100%;
    margin-right: 0;
}
.slideshow-title-text-2, .slideshow-subtitle-text-2{
    text-align: center;
    margin: 20px 0; 
    line-height:inherit;
}

.shop-btn {
    position: absolute;
    right: 0;
}

.shop-now {
    text-align: left;
    background-color: #272727;
    color: #ffffff;
    padding: 14px 10px;
    width: 100%;
    margin: 0 0 5px;
    white-space:nowrap;
    font-family: Roboto;
}


.comments .container{
    display:flex;
    flex-direction: row;
    align-items: center;
}
.shop-btn-slide-2 {
    width: 5%;
    margin: auto;
}

.shop-now-slide-2{
    display: block;
    text-align: center;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: auto;
}

.category{
    margin-bottom: 80px;
}

.category-image-parent> a, .category-image-parent {
    overflow: hidden;
    position: relative;
    width:22%;
    max-height: 100%;
}

.one-category {
    display:none; 
}

.category-image {
    overflow: hidden;
    height: 100%;
    transition: transform ease 0.3s;
}

.category-image:hover { 
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
 }

.category-image-parent:hover > .category-banner{
    right: 0;
}

.category-banner-title {
    text-align: right;
    color: #111111;
    font-size: 15px;
    font-weight: bold;
}

.category-banner-desc {
    margin-left: auto;
    text-align: right;
    color: #666666;
    font-size:12px;
}

.category-banner{
    float: left;
    width: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #fff;
    padding: 10px 15px;
    height: auto;
    top: 20px;
    bottom: auto;
    right: -100%;
    left: auto;
    margin: auto;
    position: absolute;
    justify-content: right;
    transition: all 400ms ease-in-out 0s;
    -webkit-transition: all 400ms;
}


.trends {
    margin-bottom: 80px;
}

.title {
    float: left;
    width: 100%;
    position: relative;
    text-align: center;
    color: var(--color-text);
    font: 500 38px/40px Lora, serif, sans-serif;
    margin-bottom: 10px;
}

.subtitle {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    margin: 0 0 30px;
    color: #666666;
    font-family: Roboto;
}

.product-category {
    text-align: center;
    margin: 0 0 30px;
}

.product-category-links{
    color: black;
    font-size: 16px;
    font-family: Jost, sans-serif;
    padding: 10px 20px;
    margin: 0 0 5px 0;
}

.main-product{
    position: relative;
    overflow: hidden;
}

.new-etiquette {
    background-color: black;
    color: white;
    margin-top: 10px;
    position: absolute;
    right: -100%;
    opacity: 1;
    width: 10%;
    top: 0;
    padding: 10px;
}

.new-product-text {
    margin: 0;
}

.product-buttons {
    overflow: hidden;
    position: absolute;
    left: -100%;
    bottom: 0;
    background-color:white; 
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center
}

    
.parallax-title{
    font: 500 40px Lora; 
    padding: 0; 
    margin: 0;
    white-space: nowrap;
}

.product-buttons > .icons {
    margin: 5px;
}

.main-product:hover > .product-buttons, .main-product:hover > .new-etiquette, .main-product:hover > .second-image{
    transition: all 400ms ease-in-out 0s;
    -webkit-transition: all 400ms ease-in-out 0s;
    -moz-transition: all 400ms ease-in-out 0s;
    -o-transition: all 400ms ease-in-out 0s;
    -ms-transition: all 400ms ease-in-out 0s;
}

.main-product:hover > .product-buttons{
    left:0;
}

.main-product:hover > .new-etiquette{
    right:20px;
    opacity: 1;
}

.main-product:hover > .second-image{
    opacity: 1;
    scale: 1;
    transform: scale(1,1);
}

.main-product:not(:hover) > .second-image{
    opacity: 0;
    transform: scale(0,0);
}

.second-image{
    position: absolute;
    top:0;
    opacity: 0;
    transform: scale(0,x0);
}

.product-category > li{
    width: auto;
    display: inline-block;
}

.product-category-links:hover, .active > a{
    background-color: #ef8f75;
    color:white;
}

.products {
    display: grid; 
    grid-template-columns: repeat(4,1fr);
    column-gap: 30px;
    row-gap: 30px;
}

.item-swatch.color_swatch_Value label, .product-size li label {
    cursor: pointer;
    float: left;
    height: 12px;
    width: 12px;
    line-height: 12px;
    margin-right: 5px;
    border-radius: 50%;
}

.subbaner {
    margin: 0 0 80px;
}

.banner-image-parent {
    position: relative;
    min-height: 100%;
}

.banner-image {
    width: 100%;
    height: 100%;
}

.banner-image-info{
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    text-align: center;
}

.banner-image-info-btn{
    padding: 10px 22px;
    font: 200 13px Roboto;
    background-color: #ef8f75;
    color: white; 
}

.first-banner-info{
    width: max-content;
    left: inherit;
    right: 5%;
    top: 20px;
    text-align: right;
}

.last-banner-info{
    transform: rotate(90deg); 
    width: max-content;
    left: inherit;
    right: -10%;
    top: 10%;
    bottom: inherit;
    text-align: right;
}

.banner-desc {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
}

.banner-image-info > h2{
    font: 500 32px/36px Lora;
    color: #111111;
}

.banner-info-desc {
    font: 500 18px/22px Lora;
    color: #222222;
    font-style: italic;
}


.banner-image-info > .shop-now{
    margin: 19.92px 0;
}

.row-subbaner{
    display: grid; 
    grid-template-columns: 0.5fr 0.25fr 0.25fr;
    column-gap: 20px;
}

.row-subbaner > img {
    height: 100%;
}

.parrallax {
    padding: 0 45px;
    margin: 0 0 80px;
}

.parrallax-image {
    position: relative;
    background-image: url("../img/parralax.jpg");
    height: 505px;
    background-position: 50% 64.2798%;
}

.star::before {
    content: "\F04D2"; 
    color: #fec500;
}

.star, .pen {
    font-size: 16px;
}


.container-parallax{
    background: rgba(255,255,255,0.5);
    margin: 0;
    vertical-align:middle;
    width: max-content;
    height: max-content;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 50px 30px;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex; 
    flex-direction: column;
}

.container-parallax > .shop-now {
    padding: 10px;
    margin: 20px;
    display: block;
    width: 20%;
    margin: auto;
    text-align: center;
}

.parallax-subtitle, .parallax-title{
    text-align: center;
    padding: 10px;
}

.parallax-subtitle{
    color: white;
    background-color:#ef8f75;
}
.special-product > .container{
    display: flex;
    flex-direction: column;
}

.special-product {
    margin: 0 0 50px;
    transform: translate3d(0px, 0px, 0px);
    transition: all 0s ease 0s;
}

.block-back {
    background: url("../img/banner/banner-04.jpg") no-repeat scroll 0 0;
    background-size: cover;
    border: 20px solid transparent;
    border-image: url("../img/pattern.jpg") 25% round;
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 40px 0;
}

.block-back .subtitle {
    margin: 0 0 38px;
}

.block-back .title {
    margin: 0 0 15px;
}

.custombtn{
    padding: 14px 28px;
}

.custom-block {
    margin: 0 0 80px;
    overflow: auto;
}

.custombtn {
    width:max-content;
}

.marques-display {
    display:grid; 
    grid-template-columns: repeat(5,1fr);
    column-gap: 20px;
    overflow: hidden;
}

.marque {
    height: 100%;
    max-width: none;
    margin: auto;
    opacity: 0.75; 
    transition: all 400ms ease-in-out 0s;
}

.marque:hover {
    opacity: 1;
    transition: all 400ms ease-in-out 0s;
}

.marque--link:hover{
    color: #111111;
}

.news {
    transition: all 400ms ease-in-out 0s;
}

.news > .container {
    display: flex;
    flex-direction: column;
}

.news-articles {
    display: grid;
    grid-template-columns: repeat(2,1fr); 
    
}

.news{
    margin: 0 0 80px;
}

.im-article{
    min-width: 95%;
    max-width: 95%; 
}

.article-data{
    padding: 0 15px;
}

.article {
    display: grid; 
    grid-template-columns: repeat(2,1fr);
}

.images > .container {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    column-gap: 10px;
}

.images {
    margin: 0 0 50px;
}

.services {
    margin: 0 0 50px;
}

.services > .container{
    display: flex; 
    flex-direction: row; 
    justify-content: space-between;
}

.service, .service-left, .service-right{
    width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center; 
}

.icon-service{
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

.service-text  {
    text-align: left;
}

.service, .link-text {
    border-left: 1px solid gray; 
    border-right: 1px solid gray; 
}

.footer {
    display: flex; 
    flex-direction: column; 
}

.newsletter{
    background: #383127;
}

.newsletter-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsletter-left {
    display: flex;
    width: 50%;
    color: #fff;
    flex-direction: row;
    align-items: center;
}

.newsletter-text{
    font-size:32px;
    font-family: Lora, sans-serif;
}

.newsletter-icon{
    width:42px;
    height: 42px;
}

.newsletter-right{
    padding: 5px 0;
    border-bottom:1px solid gray;
    min-width: 30%;
    display: flex;
    flex-direction: row;
}

.subscribe{
    padding: 0 22px;
    height: 45px;
    border: none;
    color:#111111;
    background-color: #fff;
}

.email-input {
    background:none;
    border:none;
    width: 100%;
    color: rgb(203, 203, 203);
}

.comments {
    padding: 30px 0;
    background-color: #F1F1F1;
}

.comment-center{
    display: flex; 
    flex-direction: row;
    width: max-content;
    max-width: 100%;
    overflow-x: hidden;
    padding: 20px;
    margin: auto; 
}

.comment-content {
    min-width: 100%;
    display: grid;
    grid-template-columns: 0.1fr 0.1fr 0.8fr; 
    column-gap:10px;
    transform: translateX(0%);
    transition: all 400ms ease-in-out; 
    padding: 0 20px;
}

.comment-content:last-child{
}

.comment-content:first-child{
    padding-left: 0;
}

.name{
    font-weight: bold; 
    text-align: center;
}

.job {
    text-align: center;
    color:#666666;
    font-size: 12px;
}

.photo-profil > img {
    width: 100px;
    border-radius: 50%;
    border: 1px solid rgb(233, 233, 233);
    margin:auto;
}

.comment {
    background-color: #fff;
    border-radius:28px;
    padding:28px 40px;
}

.data {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: 20px;
    margin: 70px 0; 
}

.data > div {
    display: flex;
    flex-direction: column;
}

.data-title, .quick-links, .enterprise-info {
    text-align: center;
}

.data-text {
    display: inline-block;
}

.data-title{
    color: #111111;
    font-size: 20px;
}

.data-title{
    color: rgb(14, 14, 14);
}

.desc {
    color: #666666;
    font-size:13px;
}

.footer-logo {
    max-width: 100%;
    height: auto;
    aspect-ratio: auto 210 / 40;
    width: 210px;
    margin: auto;
}

.reseaux-list::before, .reseaux-list::after {
    content: "";
    margin: auto 0;
    background: rgba(0,0,0,0.1);
    height: 1px;
    width: 42%;
}

.reseaux-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:center;
}

.reseau-logo {
    font-size: 16px;
    color: #666; 
}

.reseaux-list > li {
    margin: 0 10px;
}

.links{
    padding-top: 22px;
}

.links > .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin: auto;
}

.link-text, .right-link-text, .left-link-text, .center-text {
    padding: 0 10px;
}


.localisation::before, .position::before{
    content: "\F034E";
}

.phone::before{
    content: "\F0602";
}

.email::before{
    content: "\F01EE";
}

.copyright {
    color:#666666;
    text-align: center;
    margin: 10px;
    padding-bottom: 22px;
}

.quick-links > .to-drop, .enterprise-info > .to-drop{
    display: flex;
    flex-direction: column;
}

.phone, .email, .position {
    color: #666; 
    font-size: 18px;
    margin-right: 5px;
}

.to-drop > div{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.to-up::before{
    content: "\F0143";
}

.to-up {
    border-radius: 49%;
    position:fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ef8f75;
    color: white; 
}

.to-up:hover {
    background-color: #000;
}

.drop-pc {
    cursor: pointer;
}

.left-menu-link{
    padding: 10px 0;
}

.to-drop-pc, .dropped-pc{
    display: flex;
    flex-direction: column;
}

.to-drop-pc{
    transform: scaleY(0);
    animation: reduceUp 400ms ease-in-out;
    height: 0;
}

.dropped-pc > a {
    padding-left: 15px;
}

.dropped-pc{
    transform: scaleY(1);
    animation: growDown 400ms ease-in-out;
    transform-origin: top center; 
}

.dropped--pc{
    cursor: pointer;
}

.scroll {
    opacity: 0.2;
}

.scrolled {
    opacity: 1;
    transition: all 800ms ease-in-out;
}

.rte.article__grid-excerpt {
    color: #666;
}



@media  (max-width:1000px){

    .newsletter-row, .links > .container {
        display: flex;
        flex-direction: column;
    }

    .newsletter-left{
        display: flex;
        flex-direction: row;
        white-space: nowrap;
        margin: 0 0 10px;
    }

    .newsletter-text{
        padding-left:5px;
        margin:0;
    }

    .newsletter {
        padding: 32px;
    }

    .newsletter-right{
        width: 90%;
    }

    .row-subbaner{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: 30px;
        column-gap: 30px;
    }
    

    .first-banner{
        grid-column: 1/3;
    }

    .comment-center{
        grid-template-columns: 0.2fr 0.8fr; 
        grid-template-rows: repeat(2,1fr);
    }

    .comment{
        grid-row: 1/3;
        grid-column: 2;
    }

    .photo-profil{
        grid-row: 1;
        grid-column: 1;
    }
    
    .photo-profil > img {
        margin: auto;
    }

    .person-info{
        grid-row: 2;
        grid-column: 1;
    }
   
}

@media (max-width: 775px){
    
    .category .row {
        overflow-x: scroll;
    }

    .category-image-parent {
        min-width: 50%;
    }

    .category-image{
        margin: auto;
        width: 90%;
        display: block;
    }

    .name, .job {
        text-align: left;
    }

    .comment-content {
        grid-template-columns: 0.5fr 0.5fr;
        padding: 20px;
        min-width: 100%;
    }
    
    .comment-center{
        grid-template-columns: 0.5fr 0.5fr;
        grid-template-rows: 0.2fr 1fr;
        row-gap: 10px;
    }

    .comment {
        grid-column: 1/3;
        grid-row: 2;
    }

    .person-info{
        grid-column: 2; 
        grid-row:1;
        width:50%;
        margin:auto;
    }

    .photo-profil > img {
        margin-left: 50%;
    }


}

.header-sticky {
    position: relative;
}

.main-navbar{
    width: 100%;
}
@media only screen 
    and (max-device-width: 768px), 
    only screen and (max-device-width: 768px), 
    only screen and (max-width: 768px){

        .header-sticky {
            position: relative;
        }

        .croix {
            display: none; 
        }

        .left-menu{
            transition-duration: 0ms;
            position: absolute;
            top: inherit;
            width: 100%;
            transform: scaleY(0);
            height: 0;
        }

        .dropped-pc{
            width:90%;
        }
        
        .load-left-menu{
            height: auto;
            transform: scaleY(1);
            transition: all 400ms ease-in-out;
            transform-origin: top center;
        }

        .comment-content {
            grid-template-columns: 0.5fr 0.5fr;
            margin: inherit;
            padding: 20px;
          }

          .comment-content:first-child{
              padding-left: 20px;
          }

        .container{
            max-width:90vw;
        }

        .shop-now-slide-2, .shop-btn-slide-2{
            width:max-content;
        }

        .left-menu-links{
            padding: 10px;
            height: max-content;
        }
  
        .left-menu-link{
            width: 90%;
        }

        .drop-pc-btn{
            padding: 5px 0;
        }

        .top-bar {
            background-image: url("../img/chaises.jpg");
            background-position: 50% 69.4314%;
            background-size: cover;
        }

        .value {
            padding-bottom: 9px;
        }

        .bar {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .home, .to-icon{
            width: 16px;
            height: 16px;
        }

        

        .location {
            width: max-content;
            justify-content: space-between;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .header-middle > .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
    
        .slideshow-title {
            position: absolute;
            right: 0;
            width: 30%;
        }
    
        .slideshow-subtitle-text{
            line-height: 20px;
            font-size: 1rem;
        }

        
        .min-icons{
            bottom:10%;
        }
    
        .slideshow-title-text{
            width: 100%;
            line-height: 16px;
            font-size: 2.5vw;
            margin: 0 0 5px;
            text-align:right;
            font-weight: 0;
        }
        
        .slideshow-title{
            left: auto;
            bottom: 10%;
        }
        
        .parallax {
            height: 505px;
        }
    
        .footer, .data {
            display: grid;
            grid-template-columns: 1fr; 
            margin: auto;
        }
        
        .links {
            grid-row: 4;
            padding-top: 0;
        }
        
        .enterprise-desc{
            grid-row: 1;
        }
        
        .to-drop{
            transform: scaleY(0);
            height: 0;
        }
        
        .dropped-links{
            transform: scaleY(1);
            animation: growDown 400ms ease-in-out;
            transform-origin: top center; 
        }
        
        .container-links {
            }
        
        .enterprise-desc{
            margin-top: 20px;
        }

        .enterprise-info, .quick-links, .container-links{
            margin: -10px 10px;
        }

        .enterprise-desc{
            margin: 20px 10px;
        }

        .newsletter{
            padding: 22px 0;
        }
        .slideshow-title-2{
            width: 100%;
        }

        .slideshow-title-text-2, .left-link-text, .link-text, .right-link-text{
            text-align: center;
        }
        
        .product-buttons{
            left: 0;
        }
    
        .new-etiquette{
            right: 10px;
            padding: 5px;
            width: auto;
        }
    
        .new-product-text{
            font-size: 10px; 
        }
        
        .product-buttons > .icons {
            width: 20px;
            height: 20px;
        }

        .left-nav, .main-navbar, .slideshow-subtitle-text{
            display: none;
        }
        
        .header-sticky > .container{
            display:flex;
            flex-direction: row;
            justify-content:space-between;
            padding: 10px;
        }
    
        .shop-now{
            font-size: 12px;
            padding: 6px 4px;
        }

        .banner-image-info > h2{
            font-size: 16px;
        }

        .banner-info-desc{
            font-size:10px;
        }

        .container-parallax > .shop-now{
            font-size:8px;
        }

        .banner-image-info-btn{
            font-size:7px;
        }
        
        .shop-btn{
            position: absolute;
            right: 0;
        }
    
        .categ  {
            overflow-x: scroll;
        }
    
        .category-image-parent{
            min-width: 98%;
            padding-right: 10px;
            margin: auto;
        }
    
        .category-banner{
            right:0;
        }
        
        .category-image{
            width: 100%;
        }
    
        .products {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: repeat(2,1fr);
            column-gap: 30px;
            row-gap: 30px;
        }
    
        .row-subbaner{
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }

        .first-banner{
            grid-column: 1;
        }
    
        .banner-image {
            height:auto;
        }
    
        .container-parallax{
            width:auto;
            padding: 15px;
            margin: 5px;
        }
    
        .parrallax{
            padding: 0; 
            margin: 0; 
            height: 230px; 
        }
    
        .parrallax > .container, .parrallax-image{
            height:100%; 
        }
    
        .parallax-title{
            font: 500 16px Lora; 
            padding: 0; 
            margin: 0 0 5px;
            white-space: nowrap;
        }
    
        .parallax-subtitle{
            font-size:9px;
            font-family: Roboto; 
            white-space: nowrap;
        }
    
        .custom-block,.subbaner, .category {
            margin: 0 0 30px;
        }
    
        .product-category, .trends > .container{
            display: flex;
            flex-direction: column;
        }
    
        .product-category > li {
            padding: 10px 20px;
        }
    
    
        .subtitle{
            font-size:12px;
            margin: 0 0 15px;
        }
    
        .trends > .container > .title {
            font-size:20px;
            font-family: Lora;
        }
    
        .custom-block{
            width: 90%;
            margin: auto;   
            border-width: 10px;
        }
    
        .block-back {
            max-width:90%;
            width: auto;
            padding: 20px;
            border-width: 10px;
        }
        
        .title {
            font-family: Lora;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 1px;
        }
        .block-back .subtitle {
            font-family: Roboto;
            font-size: 8px;
            letter-spacing: 1px;
            margin: 0 0 14px;
        }
    
        .marques-display, .images > .container, .services > .container{
            display: flex;
            flex-direction: row;

            margin: auto;
            overflow-x: scroll;
            scrollbar-width: none;
    
        }

        .article{
            min-width: 50%;
        }

        .article-data{
                padding: 10px;
        }
        .marque:first-child{
            margin-left: 10px;
        }
    
        .news-articles{
            overflow-x: hidden;
        }
    
        .article{
      /*      min-width: 100%;*/
            display: flex;
            flex-direction: column;
        }

        .article__title >a {
            font-size: 16px;
        }
    
        .news-articles {
            display: flex;
            flex-direction: row;
        }
    
        .image-bottom {
            max-width: 50%;
        }
    
        .im-article{
            max-width: 95%;
            height: 160px;
            margin: auto;
        }
    
        .service, .service-left, .service-right {
            border: none; 
            min-width: 100%;
        }
    
        .newsletter-text{
            margin: 0 0 10px;
            font-size: 24px; 
            white-space: nowrap;
        }

        .newsletter-left{
            width: auto;
            margin: auto;
        }
    
        .only-responsive{
            display: block;
        }
    
        .link-text, .left-link-text, .right-link-text{
            border: none;
        }

        .dropped-links {
            display: flex;
            flex-direction: column;
        }
    
        .data-title-div{
            display: flex;
            flex-direction: row;
            align-items: center;
            line-height:16px;
            font-family: Lora;
            justify-content: space-between;
        }

        .data-text, .adresse, .tel, .mail,.dropped-links > a{
            text-align: left;
        }
        
        .adresse{
            display: flex;
            flex-direction: row;
            align-items: baseline;
        }
    
        .data-title{
            margin-right: 10px;
            font-size: 15px;
            margin-top: 20px;
            margin-bottom: 20px;     
            color: #111;
            font-weight: 100;
        }

        .quick-links .dropped-links, .enterprise-info .dropped-links, .container-links .dropped-links{
            margin-bottom: 20px;
        }

        .reseaux-list{
            margin: 15px 0 0;
        }

        .desc {
            text-align: center;
        }
    }

@media only screen and (min-width: 768px) and (max-width: 1024px),
    screen and (min-device-width: 768px) and (max-device-width: 1024px){

        .rte.article__grid-excerpt {
            font-size: 12px;
            line-height: 20px;
            margin: 0 0 10px;
            color: #666;
        }
        
        
        
        .top-bar {
            background-image: url("../img/chaises.jpg");
            background-position: 50% 46.0176%;
            background-size: cover;
        }
        
        .comment-content{
            margin-right: 20px;
            grid-template-columns: inherit;
        }

        .photo-profil > img {
            margin-left: 25px;
        }

        .container-links > .to-drop{
            display: flex;
            justify-content: center;
        }

        .to-up{
            right: 40px;
            bottom: 50px;
        }

        .menu-item-title-link {
            padding: 15px 15px;
        }
        .header-sticky {
            position: relative;
        }

        .croix {
            display: none; 
        }

        .left-menu{
            transition: all 0 ease-in-out !important;
            position: absolute;
            top: inherit;
            width: 100%;
            transform: scaleY(0);
            height: 0;
        }

        .dropped-pc{
            width:90%;
        }

        .parrallax .container{
            padding: 0 !important;
        }
        
        .load-left-menu{
            height: auto;
            transform: scaleY(1);
            transition: all 400ms ease-in-out;
            transform-origin: top center;
        }

        .comment-content {
            margin-right: 0;
            padding: 20px;
          }

        .container{
            max-width:90vw;
        }

        .left-menu-links{
            padding: 10px;
            height: max-content;
        }
  
        .left-menu-link{
            width: 90%;
        }

        .drop-pc-btn{
            padding: 5px 0;
        }

        .only-responsive{
            display: block;
        }
        
        .main-navbar > .navigation {
            display: none;
        }

        .header-sticky > .container {

            justify-content: space-between;
            padding: 10px;
          }

          .data-title-div > .only-responsive{
              display: none;
          }
}