/* Top hook CSS */
#htmlcontent_top {
  padding: 0; }
  @media (max-width: 767px) {
    #htmlcontent_top {
      width: 100%;
      max-width: 100%;
      padding-left: 0;
      padding-top: 0; } }
  #htmlcontent_top ul {
    margin: 0; }
    #htmlcontent_top ul li {
      font-size: 1em;
      padding: 0;
      overflow: hidden;
      -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 {
          font-size: 0.8em; } }
      @media (max-width: 991px) {
        #htmlcontent_top ul li {
          font-size: 0.6em; } }
      @media (max-width: 767px) {
        #htmlcontent_top ul li {
          font-size: 0.8em;
          width: 100%; } }
      @media (max-width: 480px) {
        #htmlcontent_top ul li {
          font-size: 0.5em; } }
      #htmlcontent_top ul li a {
        font-family: "Lato", sans-serif;
        color: white;
        display: block;
        position: relative;
        text-transform: uppercase; }
        #htmlcontent_top ul li a .item-html {
          position: absolute;
          left: 0;
          top: 0;
          padding: 9% 9% 0 6%; }
          #htmlcontent_top ul li a .item-html h2 {
            font: 400 3.077em/1.09em "Lato", sans-serif;
            margin: 0 0 6px 0; }
          #htmlcontent_top ul li a .item-html strong {
            font: 300 1.769em/1.1em "Lato", sans-serif;
            margin: 0;
            display: block; }
          #htmlcontent_top ul li a .item-html p {
            font: 400 0.846em/1.6em "Roboto", sans-serif;
            margin: 0; }
            @media (max-width: 767px) {
              #htmlcontent_top ul li a .item-html p {
                font-size: 1.1em; } }
            @media (max-width: 480px) {
              #htmlcontent_top ul li a .item-html p {
                font-size: 1.1em; } }
          #htmlcontent_top ul li a .item-html span {
            display: block;
            font: 400 4.462em/1.1em "Lato", sans-serif; }
      #htmlcontent_top ul li:hover img {
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1); }
      #htmlcontent_top ul li:last-child {
        margin-bottom: 0; }
      #htmlcontent_top ul li img {
        width: 100%;
        max-width: 100%;
        height: auto;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease; }
    #htmlcontent_top ul .htmlcontent-item-1 {
      background: #0aa6a3; }
      #htmlcontent_top ul .htmlcontent-item-1:hover {
        background: #0d8684; }
    #htmlcontent_top ul .htmlcontent-item-2 {
      background: #fefe5e; }
      #htmlcontent_top ul .htmlcontent-item-2 .item-html {
        padding: 0;
        width: 100%; }
        #htmlcontent_top ul .htmlcontent-item-2 .item-html > span {
          text-align: center;
          float: left;
          display: block;
          letter-spacing: -8px;
          color: black;
          font-size: 10.000em;
          padding: 12% 0;
          width: 50%;
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease; }
        #htmlcontent_top ul .htmlcontent-item-2 .item-html div {
          width: 50%;
          padding: 9% 0 0 7%;
          float: left; }
      #htmlcontent_top ul .htmlcontent-item-2:hover {
        background: #fed35e; }
      #htmlcontent_top ul .htmlcontent-item-2:hover .item-html > span {
        color: white;
        text-shadow: 0px 9px 0 #080808; }
    #htmlcontent_top ul .htmlcontent-item-3 {
      clear: left;
      background: #e81478;
      text-align: right; }
      #htmlcontent_top ul .htmlcontent-item-3 .item-html {
        right: 0;
        padding: 9% 6% 0 0; }
      #htmlcontent_top ul .htmlcontent-item-3:hover {
        background: #e8142d; }
    #htmlcontent_top ul .htmlcontent-item-4,
    #htmlcontent_top ul .htmlcontent-item-5,
    #htmlcontent_top ul .htmlcontent-item-6 {
      float: right;
      width: 25%; }
      @media (max-width: 480px) {
        #htmlcontent_top ul .htmlcontent-item-4,
        #htmlcontent_top ul .htmlcontent-item-5,
        #htmlcontent_top ul .htmlcontent-item-6 {
          width: 100%;
          font-size: 1.1em; } }
    #htmlcontent_top ul .htmlcontent-item-4 .item-html {
      padding: 18% 12% 0 14%; }
      #htmlcontent_top ul .htmlcontent-item-4 .item-html span {
        margin-bottom: 15px; }
      #htmlcontent_top ul .htmlcontent-item-4 .item-html p {
        margin-bottom: 15px; }
      #htmlcontent_top ul .htmlcontent-item-4 .item-html p.btn {
        font-family: "Lato", sans-serif;
        font-size: 1.692em;
        padding: 8px 18px;
        border: 1px solid white;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease; }
    #htmlcontent_top ul .htmlcontent-item-4:hover p.btn {
      border-color: #fefe5e;
      padding: 13px 24px;
      color: #fefe5e; }
      #htmlcontent_top ul .htmlcontent-item-4:hover p.btn:hover {
        color: white; }
    @media (max-width: 767px) and (min-width: 480px) {
      #htmlcontent_top ul .htmlcontent-item-4 {
        max-height: 760px; } }
    @media (max-width: 767px) {
      #htmlcontent_top ul .htmlcontent-item-4 {
        width: 100%;
        font-size: 1.3em; } }
    @media (max-width: 480px) {
      #htmlcontent_top ul .htmlcontent-item-4 {
        font-size: 0.9em; } }
    #htmlcontent_top ul .htmlcontent-item-5 {
      background: #0196fa; }
      #htmlcontent_top ul .htmlcontent-item-5 .item-html {
        padding: 18% 10% 0 13%; }
      #htmlcontent_top ul .htmlcontent-item-5:hover {
        background: #5fc8f4; }
      @media (max-width: 767px) {
        #htmlcontent_top ul .htmlcontent-item-5 {
          width: 50%; } }
      @media (max-width: 480px) {
        #htmlcontent_top ul .htmlcontent-item-5 {
          width: 100%; } }
    #htmlcontent_top ul .htmlcontent-item-6 {
      background: #0aa6a3; }
      #htmlcontent_top ul .htmlcontent-item-6 .item-html {
        text-align: right;
        right: 0;
        padding: 26% 13% 0 0; }
      #htmlcontent_top ul .htmlcontent-item-6:hover {
        background: #318482; }
      @media (max-width: 767px) {
        #htmlcontent_top ul .htmlcontent-item-6 {
          width: 50%; } }
      @media (max-width: 480px) {
        #htmlcontent_top ul .htmlcontent-item-6 {
          width: 100%; } }
    #htmlcontent_top ul .htmlcontent-item-7,
    #htmlcontent_top ul .htmlcontent-item-8 {
      text-align: center;
      width: 25%;
      background: #61248d; }
      @media (max-width: 767px) {
        #htmlcontent_top ul .htmlcontent-item-7,
        #htmlcontent_top ul .htmlcontent-item-8 {
          width: 50%;
          font-size: 0.7em; } }
      @media (max-width: 480px) {
        #htmlcontent_top ul .htmlcontent-item-7,
        #htmlcontent_top ul .htmlcontent-item-8 {
          width: 100%;
          font-size: 0.9em; } }
      #htmlcontent_top ul .htmlcontent-item-7 .item-html,
      #htmlcontent_top ul .htmlcontent-item-8 .item-html {
        padding: 10% 5% 0.6%; }
        #htmlcontent_top ul .htmlcontent-item-7 .item-html em,
        #htmlcontent_top ul .htmlcontent-item-8 .item-html em {
          font-size: 6.923em;
          color: #fefe5e;
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease; }
        #htmlcontent_top ul .htmlcontent-item-7 .item-html h2,
        #htmlcontent_top ul .htmlcontent-item-8 .item-html h2 {
          margin-bottom: 12px; }
      #htmlcontent_top ul .htmlcontent-item-7:hover,
      #htmlcontent_top ul .htmlcontent-item-8:hover {
        background: #4b219a; }
      #htmlcontent_top ul .htmlcontent-item-7:hover em,
      #htmlcontent_top ul .htmlcontent-item-8:hover em {
        text-shadow: -2px 3px 0 black;
        color: white; }
    #htmlcontent_top ul .htmlcontent-item-8 {
      background: #fefe5e; }
      #htmlcontent_top ul .htmlcontent-item-8 a {
        color: black; }
      #htmlcontent_top ul .htmlcontent-item-8 .item-html em {
        font-size: 9.154em;
        line-height: 0.75em;
        color: #0aa6a3; }
        @media (max-width: 1199px) {
          #htmlcontent_top ul .htmlcontent-item-8 .item-html em {
            font-size: 8em; } }
        @media (max-width: 480px) {
          #htmlcontent_top ul .htmlcontent-item-8 .item-html em {
            font-size: 11em; } }
      #htmlcontent_top ul .htmlcontent-item-8:hover {
        background: #fff4a9; }

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