/* ------- 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 ------- */
/* Top hook CSS */
@media (max-width: 767px) {
  #htmlcontent_top {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-top: 0px;
    margin-bottom: 20px; } }
#htmlcontent_top ul {
  margin-bottom: 0; }
  @media (max-width: 767px) {
    #htmlcontent_top ul {
      margin: 0 -5px; } }
  #htmlcontent_top ul li {
    margin-bottom: 31px; }
    @media (max-width: 767px) {
      #htmlcontent_top ul li {
        float: left;
        padding-left: 5px;
        padding-right: 5px;
        width: 50%;
        margin-bottom: 10px; } }
    @media (max-width: 580px) {
      #htmlcontent_top ul li {
        float: none;
        width: 100%; } }
    #htmlcontent_top ul li:last-child {
      margin-bottom: 0; }
    #htmlcontent_top ul li img {
      max-width: 100%;
      height: auto;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease; }
      @media (max-width: 767px) {
        #htmlcontent_top ul li img {
          width: 100%; } }
    #htmlcontent_top ul li a {
      display: block;
      position: relative;
      overflow: hidden; }
      #htmlcontent_top ul li a:hover .item-html {
        bottom: 0;
        background-color: black; }
        #htmlcontent_top ul li a:hover .item-html h2 {
          color: #fff; }
        #htmlcontent_top ul li a:hover .item-html span {
          filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
          opacity: 1; }
    #htmlcontent_top ul li .item-html {
      position: absolute;
      padding: 11px 15px 13px;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      bottom: -92px;
      text-align: center;
      background-color: #fee402;
      left: 0;
      width: 100%; }
      @media (max-width: 1199px) {
        #htmlcontent_top ul li .item-html {
          position: relative;
          bottom: auto;
          top: 0; } }
      #htmlcontent_top ul li .item-html h2 {
        color: #fff;
        margin: 0;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        font-family: "Roboto", sans-serif;
        color: black;
        font-weight: 900;
        font-size: 35px;
        line-height: 1em; }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_top ul li .item-html h2 {
            font-size: 28px; } }
      #htmlcontent_top ul li .item-html span {
        font-size: 12px;
        line-height: 19px;
        color: #888;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        display: block;
        margin-bottom: 15px;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease; }
        @media (max-width: 1199px) {
          #htmlcontent_top ul li .item-html span {
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
            opacity: 1; } }
      #htmlcontent_top ul li .item-html b {
        display: inline-block;
        text-transform: uppercase;
        font-weight: 900;
        color: black;
        font-size: 22px;
        line-height: 1em;
        text-transform: uppercase;
        background-color: #fee402;
        padding: 7px 18px 9px; }
        @media (max-width: 1199px) {
          #htmlcontent_top ul li .item-html b {
            background-color: #fff; } }
    #htmlcontent_top ul li.htmlcontent-item-1 {
      float: none;
      clear: left;
      width: 100%;
      margin-bottom: 30px; }
      #htmlcontent_top ul li.htmlcontent-item-1 .item-html {
        overflow: hidden;
        position: relative;
        top: 0;
        text-align: left;
        width: 100%;
        background-color: #000;
        left: 0;
        padding: 8px 0 8px 15px; }
        #htmlcontent_top ul li.htmlcontent-item-1 .item-html h2 {
          display: inline-block;
          font-weight: normal;
          font-family: "Righteous", cursive;
          color: #fff;
          margin: 0;
          font-size: 32px;
          line-height: 1em;
          text-transform: uppercase; }
          @media (min-width: 768px) and (max-width: 991px) {
            #htmlcontent_top ul li.htmlcontent-item-1 .item-html h2 {
              font-size: 28px; } }
          @media (max-width: 767px) {
            #htmlcontent_top ul li.htmlcontent-item-1 .item-html h2 {
              font-size: 20px; } }
          #htmlcontent_top ul li.htmlcontent-item-1 .item-html h2 i {
            font-size: 32px;
            color: #fee402;
            margin-right: 12px;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease; }
          #htmlcontent_top ul li.htmlcontent-item-1 .item-html h2 span {
            color: #fee402;
            display: inline-block;
            text-transform: uppercase;
            font-size: 32px;
            line-height: 1em;
            margin: 0;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
            opacity: 1; }
            @media (min-width: 768px) and (max-width: 991px) {
              #htmlcontent_top ul li.htmlcontent-item-1 .item-html h2 span {
                font-size: 28px; } }
            @media (max-width: 767px) {
              #htmlcontent_top ul li.htmlcontent-item-1 .item-html h2 span {
                font-size: 20px; } }
        #htmlcontent_top ul li.htmlcontent-item-1 .item-html strong {
          margin-left: 10px;
          font-size: 11px;
          line-height: 14px;
          color: #fff;
          display: inline-block;
          max-width: 140px; }
          @media (max-width: 1199px) {
            #htmlcontent_top ul li.htmlcontent-item-1 .item-html strong {
              max-width: 100%;
              display: block;
              margin-left: 0; } }

#htmlcontent_top ul li.htmlcontent-item-1:hover .item-html h2 i {
  margin-left: -48px; }




.pageName {
    overflow: hidden;
    position: relative;
    top: 0;
    text-align: left;
    width: 100%;
    background-color: #FF9900;
    left: 0;
    padding: 13px 15px 13px 18px;
    margin-bottom: 20px;
}

.pageName h2 {
    display: inline-block;
    font-weight: normal;
    /*font-family: "Righteous", cursive;*/
    color: #000;
    margin: 0;
    line-height: 1em;
    text-transform: uppercase;
    font: 600 22px/22px "Roboto", sans-serif;
}

    @media (min-width: 768px) and (max-width: 991px) {
        .pageName h2 {
            font-size: 28px; } }

    @media (max-width: 767px) {
        .pageName h2 {
            font-size: 20px; } }

.pageName h2 span {
    color: #fee402;
    display: inline-block;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 1em;
    margin: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1; }

    @media (min-width: 768px) and (max-width: 991px) {
        .pageName h2 span {
            font-size: 28px; } }

    @media (max-width: 767px) {
        .pageName h2 span {
            font-size: 20px; } }





/* Home hook CSS */
#htmlcontent_home ul {
  margin: 0 -5px; }
  #htmlcontent_home ul li {
    padding: 0 5px 10px; }
    @media (max-width: 479px) {
      #htmlcontent_home ul li {
        width: 100%; } }
    #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.htmlcontent-item-5 {
      width: 66.6667%; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li.htmlcontent-item-5 {
          width: 100%; } }

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