/* MAIN */

html{
  scroll-behavior: smooth;
}

body{
    font-family: "Nunito", Arial, sans-serif;
    background:#edebeb;
    color: #222;
    margin: 0;
}

body #content-wrapper{
    padding-right: 0px;
    padding-left: 0px;
}

#wrapper row{
    max-width: 100%;
}

ul{ margin: 0}

body .fluid{
    width: 96%;
    padding: 0px 2%;
    margin: 0 auto;
    max-width: 1520px;
}
.bg-black{

}
.bg-brown{
    background: #dfd1c8;
}

a{ color: #3073a7; text-decoration:none; }

a:hover{  text-decoration:none;  }

.btn-primary,.btn-primary:hover{color:#fff;background-color:#cba284;border:none; border-bottom:2px solid #aa866b}

  /* HEADER */

#header{
    position: relative;
    box-shadow : none;
    border-bottom: 1px solid #fff ;
}

#nav{
    min-height: 100px;
}


#nav-top-left{
  width: 15%;
    margin-right: 3%;
}
#nav-main{
  max-width: 70%;
}
#nav-top-right{
    position: absolute;
    right: 5%;
    top: 20px;
}

#nav-top-left,
#nav-top-right{
    padding: 15px 0px;
}

#search_widget{
    width: 100%;
    display: none;
}



  .block-wishlist{
      display: block;
      width: 40px;
      height: 24px;
      position: relative;
      margin-right: 10px;
  }
  body #bonwishlist .wishlist-tooltip{
      right: inherit;
      top: -2px;
  }
  #bonwishlist .wishlist-count {
      position: absolute;
      right: -12px;
      top: -8px;
      background: #333;
      color: #fff;
      border-radius: 50%;
      box-shadow: 0 4px 4px rgba(0,0,0,.14);
      font-size: 10px;
      height: 18px;
      width: 18px;
      line-height: 18px;
      text-align: center;
      display: block;
      transition: all .2s linear;
  }

  #cart-btn{
      position: relative;
  }
  .cart-products-count{
      position: absolute;
      right: -12px;
      top: -8px;
  }


  .block-wishlist a,
  #user-login a,
  a#search-btn,
  a#cart-btn{
      display: block;
      width: 28px;
      height: 28px;
      padding: 8px 20px;
      background-position: center center;
      background-repeat: no-repeat;
      margin-left:25px;
      padding: 0;
  }


  .block-wishlist a{
      background-image: url("./../../../../images/icons/heart-duotone-thin.svg");
  }
  #user-login a{
      background-image: url("./../../../../images/icons/user-duotone-thin.svg");
  }

  a#search-btn{
      background-image: url("./../../../../images/icons/search-duotone-thin.svg");
  }

  a#cart-btn{
      background-image: url("./../../../../images/icons/bag-shopping-duotone-thin.svg");
  }



#top-menu-rf{
    text-align: right;
    font-family: "Nunito", arial;
}

  #top-menu-rf > li {

      margin: 0;
  }

  #top-menu-rf a[data-depth="0"] {
      padding: 0px 10px;
      font-size: 18px;
      font-weight: 100;
      height: 100px;
      display: flex;
      align-items: center;

      margin: 0;
  }

  #top-menu-rf a:hover {
      color: #000;
      text-decoration: none;
  }

  #top-menu-rf a[data-depth="0"]:hover span,
  #top-menu-rf li.current a[data-depth="0"] span{
      border-bottom: 1px solid #333;
  }


.top-menu-rf .sub-menu {
  padding-top: 0px;
  transform: translateY(7px);
    width: 100%;
    margin: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    position: absolute;
    background: #FFF;
    left: 0;
    top: 100px;
    width: 100%;
    box-shadow: 0px 20px 20px rgba(0,0,0,0.2);
    transform: translateY(0%);

    display: none;

}

  #top-menu-rf > li:hover .sub-menu {
      display: block;


  }

  .top-menu-rf .sub-menu ul{
      display: flex;
      flex-wrap: wrap;
  }
  .top-menu-rf .sub-menu li{
      width: 160px;
      margin-right: 20px;
  }

  .top-menu-rf .sub-menu li a{
      width: 160px;
      height: 160px;
      font-size: 13px;
      font-weight: 100;
      text-align: center;
  }

  .top-menu-rf .sub-menu li a img{
      width: 160px;
      height: 160px;
      display: block;
  }



#top-menu-rf a[data-depth="1"], .top-menu-rf a[data-depth="2"] {
  text-transform: none;
    text-align: center;
    display: block;
    margin-bottom: 30px;
}


#logo{
    max-width: 300px;
    display: block;
}

#nav-main{

}

#main-menu{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#main-menu li.cat-n1{
    display: block;
    width: 10%;
    margin: 0;
}

#main-menu li.cat-n1 > a{
    display: block;
    text-align: center;
    color: #fff;
    font-size: 13px;
    height: 100%;
    line-height: 140%;
    padding: 10px;

}
#main-menu li.cat-n1 > a img{
    width: auto;
    height: 72px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    padding: 10px;
}

#main-menu li.cat-n1:hover > a{
    background: #f8f8f8;
    color: #333;
    border-radius: 3px 3px 0px 0px;
}
#main-menu li.cat-n1:hover > a img{
    filter:brightness(90%);
}

#main-menu li.cat-n1.current > a{
    background-image: linear-gradient(0deg,rgba(255,255,255,0.15),rgba(255,255,255,0) 75% );
}

#main-menu li.cat-n1 .sub-menu{
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    background: #f8f8f8;
    padding: 30px 0px;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
    z-index: 10;


}

#main-menu li.cat-n1:hover .sub-menu{
    display: block;
    animation: 0.3s cubic-bezier(.33,1.22,.71,1.03) 0s 1 normal forwards running subMenuDown;
}

@keyframes subMenuDown {
    0% { opacity: 1; transform: translateY(0px); }
    100% { opacity: 1; transform: translateY(-3px); }
}


#main-menu li.cat-n1 .sub-menu ul{
    display: flex;
    justify-content: flex-start;
}
#main-menu li.cat-n1 .sub-menu ul li{
    width: 140px;
    margin-right: 20px;
}
#main-menu li.cat-n1 .sub-menu ul li a{
    width: 100%;
    display: block;
    text-align: center;
    font-size: 13px;
}
#main-menu li.cat-n1 .sub-menu ul li a img{
    margin-bottom: 10px;
    border: none;
    border-radius: 3px;

}

/* CONTENT */

#index #wrapper{
    padding-top: 0;
}

.bloc{
    background: #fff;
    border: none;
    border-radius: 5px;
}

.breadcrumb{
    margin: 0px 0px 0px 0px;
}
.breadcrumb ol{
    margin: 10px 0px 0px 0px;
}
.breadcrumb li{
    display: inline;
    font-size: 14px;
}
#wrapper .breadcrumb li a{
  color: #888;
}

h1, .h1{
    color: #2c2e30;
    font-size: 30px;
    font-weight: 400;
    margin: 0px 0px 10px 0px;
    line-height: 120%;
}
h1 span{
    color: #888;
    display: block;
    font-size: 24px;
    font-weight: 400;
    margin: 0px 0px 10px 0px;
}
h2{
    color: #2c2e30;
    font-size: 28px;
    font-weight: 400;
    margin: 20px 0px 10px 0px;
}
h3{
    color: #2c2e30;
    font-size: 20px;
    font-weight: bold;
    margin: 15px 0px 5px 0px;
}
h4{
    color: #83be4b;
    font-size: 18px;
    font-weight: 600;
    margin: 15px 0px 5px 0px;
}

.color-turquoise{color:#12a28f}
.bg-turquoise{background-color:#12a28f}

.btn-primary{

}

.color-light-green{
    color: #83be4b;
}


p, li, td{
    font-size: 15px;
    color: #333;
    margin-bottom: 5px;
    line-height: 150%;
}

picture, picture img{
    width: 100%;
    display: block;
    height: auto;
}

.credit{
    font-size: 12px;
    color: #999;
    line-height: 100%;

}

table{ border-collapse: collapse; }
table tr th, table tr td{ padding: 3px 6px; border-bottom: 1px solid #ccc; border-collapse: collapse }


input, textarea, select{
    padding: 8px;
    background-image: linear-gradient(0deg, #fff, #fefefe);
    border: 1px solid #bbb;
    border-radius: 4px;
}



b,strong{font-weight:600}

.bloc-txt li,
ul.check li{
    list-style-type: disc;
    margin: 0px 0px 0px 16px ;
}

ul.avantages{
    list-style-type: none;
    padding: 5px 0px 0px 0px;
}
ul.avantages li{
    color: #333;
    list-style-type: none;
    padding: 0;
    margin: 8px 0px;
}

/* home & category */
.product-list{
    display: flex;
    flex-wrap: wrap;
}

.product-item{
    width: 240px;
    padding: 20px;
    border-radius: 5px;
    margin: 0px 27px 30px 0px;
    display: block;
    background: #fff;
    transition: ease all 0.1s;
}
a.product-item:hover{
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
}

.product-item .stock-infos > span{
    width: 100%;
}



#reassurance img{
    max-width: 160px;
}

#applications h3{
    margin-top: 5px;
}

#applications p{
    margin-top: 0px;
}


table{
    width: 100%;
}
table tr{

}
table tr td{
    border-bottom: 1px solid #ccc;
    padding: 5px;

}
table tr:last-child td{
    border-bottom: none;


}

.flag{
    display: inline-block;
    height: 1em;
    width: 1em;
    border-radius: 2px;


}
.flag.fr{
    background-image: url("./images/icons/flag/svg/4x3/fr.svg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto;
}

.to-sort-bloc{
    background-color: #fff;
    background-image: url("./themes/biosource/assets/img/loader-grey.svg");
    background-position: center 100px;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}
.btn-sort{
    padding: 6px;
    border-radius: 6px;
    color: #333;
    opacity: 1;
    background-color: #e1e1e1;
    opacity: 0.9;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    cursor: pointer;
    border-radius: 2px;
    padding: 6px 10px;
    margin-bottom: 4px;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.btn-sort:hover{
    filter: brightness(105%);
    transition: ease 0.15s all;
}
.btn-sort.active{
    opacity: 1;

    background-color: #fff;
    border-radius: 2px 2px 0px 0px;
    border-bottom: 1px solid #3972ac;
}

.to-sort-items{

}
.to-sort-items.anim{
    animation: sortMotion 1s ease-in-out 0s none ;
}
@keyframes sortMotion {
    0% { opacity: 1; }
    10% { opacity: 0.1; }
    30% { opacity: 0.1; }
    100% { opacity: 1; }
}

.array{}
.array-row{
    padding: 5px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;

    font-size: 15px;
}
.array-row:first-child{


}
.array-row:nth-child(2n+1){
    background-color: #fefefe;
}
.array .array-row:hover{
    background-color: #f0f0f0;
}
.array .array-row.active{
    background-color: #ffcd26;
}

body .show-before-loaded {
    display: block;
}
body.isloaded .show-before-loaded {
    display: none;
}

body .show-after-loaded {
    display: none;
}
body.isloaded .show-after-loaded {
    display: block;
}

#blockcart-modal{
    top:40px
}


#up{
    position: fixed;
    bottom: -30px;
    right: 16px;
    transition: ease all 0.2s;
    opacity: 0;
}
#up.active{
    bottom: 16px;
    opacity: 1;
}
#up a{
    border: 1px solid #ccc;
}

#wrapper .discount{
    background-color: #cd511a;
    color: #fff;
    border-radius: 1px;
}

.cart-item{
    border-bottom: 1px solid #ddd;
}
.cart-item:last-child{
    border-bottom: none;
}



.open-my-modal {
    cursor: pointer;
}
.my-modal {
    left:0;
    top:-20px;
    z-index: 65001;
    position:fixed;
    width:100%;
    min-width: 100%;
    height:100%;
    min-height: 100%;
    padding:40px;
    box-sizing:border-box;
    display: none;
    justify-content:center;
    align-items:center;
    background: rgba(0,0,0,0.7);
    opacity:0;
}
.my-modal.open {
    display: flex;
    transition:0.2s;
    opacity:1;
    top:0px;
}

.my-modal-wrapper {
    height: 80%;
    max-height: 80%;
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(0px);
    opacity:1;
    transition: ease 0.3s all;
    padding: 0;
    width:98%;
    max-width:540px;
}

.my-modal-content {
    height: 100%;
    overflow-y: auto;
}


.my-modal.move .my-modal-wrapper {
    opacity:0;
    transform:translateY(10px) scale(1.03);
}
.my-modal-left,
.my-modal-right,
.my-modal-close {
    color: #fff;
    position:absolute;
    font-size: 30px;
    top:50%;
    cursor:pointer;
    width:60px;
    height:60px;
    display: flex;
    justify-content:center;
    align-items:center;

}
.my-modal-left:hover,
.my-modal-right:hover,
.my-modal-close:hover {
    color: #ffca10;
    transition:ease 0.2s all;
}
.my-modal-close {
    right:-15px;
    top:-15px;
    background: #333;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 3px solid #fff;

}
.my-modal-left {
    left:0px;
    top:45%;
}
.my-modal-right {
    right:0px;
    top:45%;
}


body .form-control {
    color: #333;
}

.form-control:focus {
  color: #232323;
  background-color: #fff;
  outline: 1px solid #000;
}


body .has-discount.product-price{
    color: #cd511a;
}

body #footer {
  padding-top: 0;
}

body #footer span.color-black{
  font-weight: 600;
}

#reassurance{
    padding: 40px 0px;
}
#reassurance img{
    width: 18%;
}

#footer-links{
  padding: 40px 0px;
}



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



    /* MENU MOBILE */

    #menu-mobile-btn {
        position:absolute;
        color:#fff;
        width:42px;
        height:40px;
        text-align:center;
        cursor:pointer;
        z-index:65000;
        margin-left: 0;
        margin-right: 15px;
        padding-left: 0;
        padding-right: 0;
        padding-top: 5px;

    }

    #menu-mobile-btn .txt-menu {
        display:none
    }
    body.open #menu-mobile-btn .txt-menu {
        display:none
    }
    #menu-mobile-btn .txt-fermer {
        display:none
    }
    body.open #menu-mobile-btn .txt-fermer {
        display:none
    }
    #nav-hamburger {
        width:36px;
        height:36px;
        position:relative;
        margin:2px auto 2px auto;
        -webkit-transform:rotate(0);
        -moz-transform:rotate(0);
        -o-transform:rotate(0);
        transform:rotate(0);
        -webkit-transition:.5s ease-in-out;
        -moz-transition:.5s ease-in-out;
        -o-transition:.5s ease-in-out;
        transition:.5s ease-in-out;
        cursor:pointer
    }
    #nav-hamburger span {
        display:block;
        position:absolute;
        height:2px;
        width:100%;
        background:#333;
        border-radius:1px;
        opacity:1;
        left:0;
        -webkit-transform:rotate(0);
        -moz-transform:rotate(0);
        -o-transform:rotate(0);
        transform:rotate(0);
        -webkit-transition:.25s ease-in-out;
        -moz-transition:.25s ease-in-out;
        -o-transition:.25s ease-in-out;
        transition:.25s ease-in-out
    }
    #nav-hamburger span:nth-child(1) {
        top:0
    }
    #nav-hamburger span:nth-child(2),
    #nav-hamburger span:nth-child(3) {
        top:12px
    }
    #nav-hamburger span:nth-child(4) {
        top:24px
    }
    body.open #menu-mobile-btn #nav-hamburger span:nth-child(1) {
        top:7.5px;
        width:0%;
        left:50%
    }
    body.open #menu-mobile-btn #nav-hamburger span:nth-child(2) {
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        transform:rotate(45deg)
    }
    body.open #menu-mobile-btn #nav-hamburger span:nth-child(3) {
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -o-transform:rotate(-45deg);
        transform:rotate(-45deg)
    }
    body.open #menu-mobile-btn #nav-hamburger span:nth-child(4) {
        top:7.5px;
        width:0%;
        left:50%
    }

    /* Menu  */

    body #nav-bloc{
        width: 100%;
    }

    #nav .fluid{
        padding: 0px 10px;
    }

    body #nav-main{
        display: none;
    }

    body #nav-top-menu-rf{
        display: none;
    }

    body.open #nav-main,
    body.open #nav-top-menu-rf{
        display: block;
    }


    body.open #nav-top-menu-rf{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
        justify-content: space-between;
    }
    body.open #nav-top-menu-rf a{
        width: 48%;
        padding: 5px;
        margin: 0px;
        margin-bottom: 5px;
        display: inline-block;
        text-align: center;
        background: #222;
        border-radius: 12px;
    }

    .top-menu-rf .sub-menu {

        display: none;

    }
    #top-menu-rf > li:hover .sub-menu {

        display: none;

    }


    #nav #nav-bloc {
        padding: 0px 0px; /* delete fluid */
    }

    #nav {
        min-height: 70px;
    }
    body.open #nav{
        display: block;
    }
    body.open #wrapper{
        display: none;
    }
    body.open #reassurance{
        display: none;
    }



    body.open #nav-main{
        display: block;
        background: #fff;
        width: 100%;
        max-width: 100%;
        top: 70px;
        position: relative;
        left: 0;
    }



    body.open #_desktop_top_menu{
        display: block;
        width: 100%;
    }

    body.open ul#top-menu-rf {
        display: block;
        width: 100%;
    }

    body.open #nav-main li{
        display: block;
        background: #fff;
        width: 100%;
    }
    body.open #top-menu-rf a[data-depth="0"]{
        height: auto;
        padding: 20px 25px;
    }

    body.open #footer{
        padding-top: 70px;
    }


    #menu-mobile-btn{
        left: 4%;
        top: 16px;
    }

    #nav-top-left {
        position: absolute;
        top:0px;
    }

    #nav-top-right {
        top:5px;
    }
    #logo {
        width: 150px;
        position: absolute;
        left: 80px;
        top: 10px;
    }

    body #main-menu {
        display: block;
        width: 100%;
    }
    body #main-menu li.cat-n1 {
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }
    #main-menu li.cat-n1 a:hover,
    #main-menu li.cat-n1:hover{
        background: none;
        color: #fff;
        border-radius: 12px;
    }
    body #main-menu li.cat-n1:hover .sub-menu{
        display: none;
    }
    #main-menu li.cat-n1 > a{
        text-align: left;
        display: flex;
        align-items: center;
        background: #222;
        border-radius: 12px;
        padding: 12px;
    }
    #main-menu li.cat-n1 > a:hover{
        background: #222;
        border-radius: 12px;
    }
    #main-menu li.cat-n1 > a img{
        margin: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .my-modal-wrapper {
        height:94%;
        max-height: 94%;
        width:90%;
    }


    /* content */


    body .skrew, body .bloc.flip .skrew{
        background-image: none;
        padding: 10px;
    }
    body .category-description-level-2 > .c {
        background-size: cover;
    }

    body h1{ font-size: 24px; }
    body h1 span{ font-size: 18px; }

    body .h1-big-white{
        font-size: 30px;
    }
    body .category-description-level-2 > .cc {
        padding: 0px;
        border-radius: 0px;
    }

    body .product-item {
        width: 45%;
        max-width: 180px;
        padding: 10px;
        border-radius: 5px;
        margin: 0px 5% 20px 0px;
    }

    body .product-actions .add-to-cart {
        font-size: 15px;
    }

    #slider-home{
        display: none;
    }

    #reassurance-last{
        width: 100%;
        padding: 10px 25%;
    }




}