@charset "UTF-8";
/* ------- FONTS ------- */
/* ------- BORDERS ------- */
/* ------- BACKGROUNDS ------- */
/* ------- COLORS ------- */
/* ------- Indents ------- */
/* ------- Product Elements ------- */
/* ------- Buttons ------- */
/* ------- Buttons +/- ------ */
/* ------- Button Small ------- */
/* ------- Button exclusive-medium ------- */
/* ------- My Account List bg ------- */
/* ------- Product Listing ------- */
/* ------- Grid/List vars ------- */
/* ------- Pagination vars ------- */
/* ------- Product Info ------- */
/* ------- Cart Steps ------- */
/* ------- sub heading (h2,h3) define ------- */
/* ------- Image vars ------- */
/* Home hook CSS */
#htmlcontent_home {
  background: #333;
  padding: 10px;
  margin-bottom: 30px; }
  #htmlcontent_home ul {
    margin: 0px -10px 0 0; }
    #htmlcontent_home ul li {
      padding: 0;
      width: 32.5%;
      margin-left: 0.9%;
      float: left;
      position: relative; }
      #htmlcontent_home ul li:first-child {
        margin: 0; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li {
          width: 97.6%;
          margin: 0; } }
      #htmlcontent_home ul li img {
        max-width: 100%;
        height: auto; }
        @media (max-width: 479px) {
          #htmlcontent_home ul li img {
            min-width: 100%; } }
      #htmlcontent_home ul li .item-html {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: rgba(51, 51, 51, 0.8);
        padding: 4.6% 4.8% 4% 4.8%; }
        #htmlcontent_home ul li .item-html h2 {
          padding: 0;
          margin: 0 0 2px;
          font: 500 19px/20px "Roboto", "sans-serif";
          color: #fff;
          text-transform: uppercase; }
          @media (max-width: 767px) {
            #htmlcontent_home ul li .item-html h2 {
              font: 500 15px/20px "Roboto", "sans-serif"; } }
        #htmlcontent_home ul li .item-html p {
          margin: 0;
          padding: 0;
          font: 400 13px/18px "Roboto", "sans-serif";
          color: #c8c8c8; }
          @media (max-width: 767px) {
            #htmlcontent_home ul li .item-html p {
              display: none; } }
          @media (max-width: 479px) {
            #htmlcontent_home ul li .item-html p {
              display: block; } }
      #htmlcontent_home ul li:hover .item-html {
        background-color: rgba(247, 153, 33, 0.8);
        width: 99.88%; }
        #htmlcontent_home ul li:hover .item-html p {
          color: #fff; }

/* Top hook CSS */
#htmlcontent_top {
  width: 100%;
  max-width: 100%;
  padding: 0px 10px;
  background: #333333;
  margin-bottom: 30px; }
  @media (max-width: 767px) {
    #htmlcontent_top {
      width: 100%;
      max-width: 100%; } }
  #htmlcontent_top ul {
    margin: 0; }
    #htmlcontent_top ul li {
      float: left;
      width: 420px;
      padding-right: 0;
      padding-left: 0;
      margin-bottom: 10px;
      position: relative; }
      @media (min-width: 768px) and (max-width: 1199px) {
        #htmlcontent_top ul li {
          width: 333px; } }
      @media (min-width: 768px) and (max-width: 991px) {
        #htmlcontent_top ul li {
          width: 251px; } }
      @media (max-width: 767px) {
        #htmlcontent_top ul li {
          width: 49%; } }
      @media (max-width: 479px) {
        #htmlcontent_top ul li {
          width: 100%;
          float: none; } }
      #htmlcontent_top ul li:last-child {
        margin-bottom: 0; }
      #htmlcontent_top ul li img {
        max-width: 100%;
        height: auto; }
      #htmlcontent_top ul li .item-html {
        position: absolute;
        left: 0;
        top: 0;
        width: 55.8%;
        background-color: rgba(51, 51, 51, 0.8);
        padding: 3.2% 5% 4% 4%; }
        @media (min-width: 768px) and (max-width: 1199px) {
          #htmlcontent_top ul li .item-html {
            padding: 1.3% 5% 4% 4%; } }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_top ul li .item-html {
            padding: 6.2% 5% 5.9% 4%;
            width: 77%; } }
        @media (max-width: 767px) {
          #htmlcontent_top ul li .item-html {
            padding: 2.2% 2% 0 4%;
            height: 100%;
            width: 100%; } }
        @media (max-width: 479px) {
          #htmlcontent_top ul li .item-html {
            width: 65%; } }
        #htmlcontent_top ul li .item-html h3 {
          margin: 0;
          padding: 0 0 12px;
          color: #ffffff;
          font: 400 28px/36px "Roboto", "sans-serif";
          text-transform: uppercase;
          letter-spacing: -1px; }
          @media (min-width: 768px) and (max-width: 1199px) {
            #htmlcontent_top ul li .item-html h3 {
              font: 400 30px/32px "Roboto", "sans-serif";
              padding-bottom: 4px; } }
          @media (min-width: 768px) and (max-width: 991px) {
            #htmlcontent_top ul li .item-html h3 {
              font: 400 32px/34px "Roboto", "sans-serif"; } }
          @media (max-width: 767px) {
            #htmlcontent_top ul li .item-html h3 {
              font: 400 20px/22px "Roboto", "sans-serif";
              padding-bottom: 2px; } }
          #htmlcontent_top ul li .item-html h3 span {
            display: block;
            font-weight: 100; }
            @media (max-width: 767px) {
              #htmlcontent_top ul li .item-html h3 span {
                display: inline;
                margin-right: 5px; } }
            @media (max-width: 479px) {
              #htmlcontent_top ul li .item-html h3 span {
                display: block; } }
        #htmlcontent_top ul li .item-html p {
          color: #c8c8c8;
          font: 400 13px/18px "Roboto", "sans-serif";
          margin: 0 0 0 3px;
          display: block;
          float: left; }
          @media (min-width: 768px) and (max-width: 1199px) {
            #htmlcontent_top ul li .item-html p {
              font: 400 12px/16px "Roboto", "sans-serif"; } }
          @media (min-width: 768px) and (max-width: 991px) {
            #htmlcontent_top ul li .item-html p {
              display: none; } }
          @media (max-width: 767px) {
            #htmlcontent_top ul li .item-html p {
              font: 400 11px/14px "Roboto", "sans-serif"; } }
      #htmlcontent_top ul li:hover .item-html {
        background-color: rgba(247, 153, 33, 0.8);
        width: 69%;
        padding-right: 4.5%;
        padding-bottom: 5.8%; }
        @media (min-width: 768px) and (max-width: 1199px) {
          #htmlcontent_top ul li:hover .item-html {
            padding-bottom: 4.8%; } }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_top ul li:hover .item-html {
            padding: 6.1% 5% 5.2% 4%;
            width: 77%; } }
        @media (max-width: 767px) {
          #htmlcontent_top ul li:hover .item-html {
            padding: 2.2% 2% 0 4%;
            height: 100%;
            width: 100%; } }
        @media (max-width: 479px) {
          #htmlcontent_top ul li:hover .item-html {
            width: 65%; } }
        #htmlcontent_top ul li:hover .item-html p {
          color: #fff;
          margin-right: 35px; }
          @media (max-width: 767px) {
            #htmlcontent_top ul li:hover .item-html p {
              margin-right: auto; } }
          #htmlcontent_top ul li:hover .item-html p:after {
            content: "";
            font-family: "FontAwesome";
            display: block;
            font-size: 33px;
            color: #fff;
            padding: 0px 0 0 102.4%;
            margin: -11.8% 0 0 0; }
            @media (max-width: 767px) {
              #htmlcontent_top ul li:hover .item-html p:after {
                display: none;
                margin: 0;
                padding: 0; } }
    #htmlcontent_top ul li.htmlcontent-item-1,
    #htmlcontent_top ul li.htmlcontent-item-3,
    #htmlcontent_top ul li.htmlcontent-item-5,
    #htmlcontent_top ul li.htmlcontent-item-7,
    #htmlcontent_top ul li.htmlcontent-item-9,
    #htmlcontent_top ul li.htmlcontent-item-11 {
      margin-right: 10px; }
      @media (max-width: 767px) {
        #htmlcontent_top ul li.htmlcontent-item-1,
        #htmlcontent_top ul li.htmlcontent-item-3,
        #htmlcontent_top ul li.htmlcontent-item-5,
        #htmlcontent_top ul li.htmlcontent-item-7,
        #htmlcontent_top ul li.htmlcontent-item-9,
        #htmlcontent_top ul li.htmlcontent-item-11 {
          margin-right: 2%; } }

/* Left hook CSS */
#htmlcontent_left ul {
  margin-bottom: 0; }
  #htmlcontent_left ul li {
    position: relative;
    margin-bottom: 30px; }
    @media (max-width: 767px) {
      #htmlcontent_left ul li {
        display: none; } }
    #htmlcontent_left ul li .item-html {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background-color: rgba(51, 51, 51, 0.8);
      text-align: center;
      padding: 13px 20px 16px 13px; }
      @media (min-width: 768px) and (max-width: 1199px) {
        #htmlcontent_left ul li .item-html {
          left: 8px;
          right: 8px;
          bottom: 7px; } }
      @media (min-width: 768px) and (max-width: 991px) {
        #htmlcontent_left ul li .item-html {
          left: 6px;
          right: 6px;
          bottom: 6px;
          padding: 7px 20px 8px 13px; } }
      #htmlcontent_left ul li .item-html h3 {
        margin: 0;
        padding: 0;
        color: #fff;
        font: 500 19px/25px "Roboto", "sans-serif";
        text-transform: uppercase; }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_left ul li .item-html h3 {
            font: 400 13px/18px "Roboto", "sans-serif"; } }
    #htmlcontent_left ul li:hover .item-html {
      background-color: rgba(113, 163, 47, 0.8); }
  #htmlcontent_left ul li.htmlcontent-item-2 {
    min-width: 270px;
    height: auto;
    padding: 15px 0 18px 0;
    background: #71a32f; }
    @media (min-width: 768px) and (max-width: 1199px) {
      #htmlcontent_left ul li.htmlcontent-item-2 {
        min-width: 213px; } }
    @media (min-width: 768px) and (max-width: 991px) {
      #htmlcontent_left ul li.htmlcontent-item-2 {
        min-width: 158px; } }
    @media (max-width: 767px) {
      #htmlcontent_left ul li.htmlcontent-item-2 {
        display: block;
        margin-top: 30px; } }
    #htmlcontent_left ul li.htmlcontent-item-2 .item-html {
      position: static;
      left: auto;
      right: auto;
      bottom: auto;
      background: none;
      padding: 0; }
      #htmlcontent_left ul li.htmlcontent-item-2 .item-html h4 {
        margin: 0;
        padding: 0;
        font: 500 39px/35px "Roboto", "sans-serif";
        text-transform: uppercase;
        color: #fff; }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_left ul li.htmlcontent-item-2 .item-html h4 {
            font: 500 29px/25px "Roboto", "sans-serif"; } }
      #htmlcontent_left ul li.htmlcontent-item-2 .item-html h5 {
        margin: 3px 0 0 0;
        padding: 0;
        font: 500 19px/25px "Roboto", "sans-serif";
        text-transform: uppercase;
        color: #333333; }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_left ul li.htmlcontent-item-2 .item-html h5 {
            font: 500 12px/18px "Roboto", "sans-serif"; } }
      #htmlcontent_left ul li.htmlcontent-item-2 .item-html h6 {
        margin: 0;
        padding: 0;
        font: 400 13px/18px "Roboto", "sans-serif";
        color: #fff; }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_left ul li.htmlcontent-item-2 .item-html h6 {
            font: 400 11px/18px "Roboto", "sans-serif"; } }
    #htmlcontent_left ul li.htmlcontent-item-2:hover {
      background: #333; }
      #htmlcontent_left ul li.htmlcontent-item-2:hover .item-html h5 {
        color: #71a32f; }

/* Right hook CSS */
/* Footer hook CSS */