// global
@import "global";


.owl-carousel(true);
.owl-home(true);

.home{
  .title-page{margin-top: 15px}
  &-promo{margin-bottom: @rules-fos;
    margin-bottom: 0; text-decoration: none; position: relative; display: block;overflow: hidden;
    @media(min-width: 768px){height: 160px!important;}
    @media(min-width: 992px){height: 190px!important;}
    @media(min-width: 1200px){height: 230px!important;}
    .lt-ie8 &{padding: 0 13px!important;}
    a{text-decoration: none;}
  }
  &-catalogue{
    text-align: center;
    background-color: @light-green; padding: 10px 0;
    @media(min-width: 768px){padding: 5px 0;}
    @media(min-width: 992px){padding: 10px 0;}
    .lt-ie8 &{ height: 220px!important; padding: 5px 0;}
    a{text-decoration: none;}
    .title{color: @white; font-size: @font-size-large; margin-bottom: 10px; display: block;
      @media(min-width: 768px){font-size: 14px;}
      @media(min-width: 992px){font-size: @font-size-large;}
    }
    img{.transition(all, 0.3s, ease-out);
      @media(min-width: 768px){max-height: 70px;}
      @media(min-width: 992px){max-height: 85px;}
      @media(min-width: 1200px){max-height: 125px;}
    }
    .btn{font-size: 15px; vertical-align: bottom; margin: 10px 0 0 0!important;padding: 6px 12px;
      &:hover{background-color: @green;border-color: @green;color: @white}
    }
    &.noTouch:hover img{.transform(1.1)}
  }
  &-destockage{padding: 0;
    img{
      @media(min-width: 768px){max-height: 160px}
      @media(min-width: 992px){max-height: 190px;}
      @media(min-width: 1200px){max-height: 230px;}
    }
  }
  &-fidelite{overflow: hidden;
    a{height: 226px;border: 5px solid @greyef;.background-gradient(top, #ffffff, 0%, #eff0fe, 100%, linear, left top, left bottom, 0); width: 100%; *width: 250px; line-height: 230px;
      @media(min-width: 768px){line-height: 130px!important;}
      @media(min-width: 992px){line-height: 160px!important;}
      @media(min-width: 1200px){line-height: 200px!important;}
      .lt-ie8 &{ height: 220px!important; width: 260px;line-height: 200px; }
    }
    span{display: block;text-align: center}
    &-content{position: relative; z-index: 2; padding: 0 15px;width: 100%; line-height: 1.42857!important; display: inline-block!important;
      .lt-ie8 &{display: block; margin-top: 40px; padding: 0}
      @media(min-width: 768px){vertical-align: top; padding-top: 10px}
      @media(min-width: 992px){vertical-align: middle; padding-top: 0}
    }
    &-title{text-transform: uppercase; font-size: @font-size-extramedium; .open-sans-semi-bold;
      @media(min-width: 768px){font-size: @font-size-medium}
      @media(min-width: 992px){font-size: @font-size-extramedium}
    }
    &-text{font-size: @font-size-large;
      @media(min-width: 768px){font-size: 14px}
      @media(min-width: 992px){font-size: @font-size-extramedium}
      @media(min-width: 1200px){font-size: @font-size-large}
    }
    &-btn{position: absolute; bottom: 15px; left: 0; width: 100%; color: @green; text-decoration: underline; font-size: @font-size-medium; line-height: 1.42857!important;}
    &-picto{position: absolute; top: 0;left: 0; z-index: 1}
  }
}