/* Top hook CSS */
#htmlcontent_top ul li {
  margin-bottom: 28px; }
  @media (max-width: 1200px) {
    #htmlcontent_top ul li {
      margin-bottom: 23px; } }
  @media (max-width: 991px) {
    #htmlcontent_top ul li {
      margin-bottom: 16px; } }
  @media (max-width: 767px) {
    #htmlcontent_top ul li {
      width: 50%;
      margin-bottom: 32px; } }
  @media (max-width: 480px) {
    #htmlcontent_top ul li {
      width: 100%;
      margin-bottom: 30px; } }
  #htmlcontent_top ul li a {
    display: block;
    position: relative;
    overflow: hidden; }
    #htmlcontent_top ul li a:hover .item-html {
      background: rgba(141, 191, 65, 0.85); }
      #htmlcontent_top ul li a:hover .item-html h2 {
        -moz-animation: 300ms ease-in-out 0s normal none 1 moveFromRight;
        -webkit-animation: 300ms ease-in-out 0s normal none 1 moveFromRight;
        animation: 300ms ease-in-out 0s normal none 1 moveFromRight; }
      #htmlcontent_top ul li a:hover .item-html h3 {
        -moz-animation: 300ms ease-in-out 0s normal none 1 moveFromLeft;
        -webkit-animation: 300ms ease-in-out 0s normal none 1 moveFromLeft;
        animation: 300ms ease-in-out 0s normal none 1 moveFromLeft; }
    @media (max-width: 1200px) {
      #htmlcontent_top ul li a {
        font-size: 0.8em; } }
    @media (max-width: 991px) {
      #htmlcontent_top ul li a {
        font-size: 0.65em; } }
    @media (max-width: 767px) {
      #htmlcontent_top ul li a {
        font-size: 1em; } }
    @media (max-width: 480px) {
      #htmlcontent_top ul li a {
        font-size: 1em; } }
    #htmlcontent_top ul li a img {
      max-width: 100%;
      height: auto; }
      @media (max-width: 767px) {
        #htmlcontent_top ul li a img {
          width: 100%; } }
    #htmlcontent_top ul li a .item-html {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 21px 0 27px 0;
      background: #8dbf41;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear; }
      @media (max-width: 991px) {
        #htmlcontent_top ul li a .item-html {
          padding: 15px 0 17px 0; } }
      #htmlcontent_top ul li a .item-html h2 {
        margin: 0;
        padding: 0 0 0 33px;
        font: 400 1.923em/1em "Open Sans", sans-serif;
        text-transform: uppercase;
        color: white;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear; }
        @media (max-width: 991px) {
          #htmlcontent_top ul li a .item-html h2 {
            padding: 0 0 0 13px; } }
      #htmlcontent_top ul li a .item-html h3 {
        margin: 0;
        padding: 0 0 0 33px;
        font: 400 1.154em/1.1em "Open Sans", sans-serif;
        text-transform: uppercase;
        color: #31353d;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear; }
        @media (max-width: 991px) {
          #htmlcontent_top ul li a .item-html h3 {
            padding: 0 0 0 13px; } }
  #htmlcontent_top ul li.htmlcontent-item-3 {
    float: right;
    margin-bottom: 0; }
    @media (max-width: 480px) {
      #htmlcontent_top ul li.htmlcontent-item-3 {
        width: 100%;
        margin-bottom: 30px; } }
    #htmlcontent_top ul li.htmlcontent-item-3 .item-html {
      padding: 27px 0 37px 0; }
      @media (max-width: 991px) {
        #htmlcontent_top ul li.htmlcontent-item-3 .item-html {
          padding: 17px 0 27px 0; } }
      #htmlcontent_top ul li.htmlcontent-item-3 .item-html h2 {
        font: 300 3.077em/1em "Open Sans", sans-serif; }
  #htmlcontent_top ul li.htmlcontent-item-2 a .item-html, #htmlcontent_top ul li.htmlcontent-item-3 a .item-html, #htmlcontent_top ul li.htmlcontent-item-4 a .item-html {
    background: #31353d; }
    #htmlcontent_top ul li.htmlcontent-item-2 a .item-html h3, #htmlcontent_top ul li.htmlcontent-item-3 a .item-html h3, #htmlcontent_top ul li.htmlcontent-item-4 a .item-html h3 {
      color: #8dbf41; }
  #htmlcontent_top ul li.htmlcontent-item-2 a:hover .item-html, #htmlcontent_top ul li.htmlcontent-item-3 a:hover .item-html, #htmlcontent_top ul li.htmlcontent-item-4 a:hover .item-html {
    background: rgba(49, 53, 61, 0.85); }
  #htmlcontent_top ul li.htmlcontent-item-6 {
    clear: both;
    margin-bottom: 0; }
    @media (max-width: 767px) {
      #htmlcontent_top ul li.htmlcontent-item-6 {
        width: 100%;
        margin-bottom: 20px; } }
    @media (max-width: 767px) {
      #htmlcontent_top ul li.htmlcontent-item-6 a {
        font-size: 0.5em; } }
    @media (max-width: 480px) {
      #htmlcontent_top ul li.htmlcontent-item-6 a {
        font-size: 0.25em; } }
    #htmlcontent_top ul li.htmlcontent-item-6 a .item-html {
      overflow: hidden;
      background: none;
      width: auto;
      padding: 30px 100px 35px 209px; }
      @media (max-width: 1200px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a .item-html {
          padding: 30px 100px 28px 170px; } }
      @media (max-width: 991px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a .item-html {
          padding: 20px 50px 18px 140px; } }
      @media (max-width: 767px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a .item-html {
          padding: 20px 50px 4% 140px; } }
      @media (max-width: 480px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a .item-html {
          padding: 20px 50px 4% 100px; } }
      #htmlcontent_top ul li.htmlcontent-item-6 a .item-html h1 {
        margin: 0;
        padding: 0;
        color: white;
        font: 300 5.385em/1em "Ubuntu", sans-serif;
        text-transform: uppercase; }
      #htmlcontent_top ul li.htmlcontent-item-6 a .item-html h4 {
        margin: 0;
        padding: 0;
        color: white;
        font: 300 1.538em/1em "Ubuntu", sans-serif;
        text-transform: uppercase; }
        @media (max-width: 480px) {
          #htmlcontent_top ul li.htmlcontent-item-6 a .item-html h4 {
            font-size: 2.8em; } }
    #htmlcontent_top ul li.htmlcontent-item-6 a:before {
      content: "\f0d1";
      font-family: "FontAwesome";
      font-size: 7.769em;
      line-height: 1em;
      position: absolute;
      left: 46px;
      top: 28px;
      color: white;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      transform: rotateY(0deg); }
      @media (max-width: 991px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a:before {
          left: 35px;
          top: 16px; } }
      @media (max-width: 767px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a:before {
          left: 35px;
          top: 21%; } }
      @media (max-width: 480px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a:before {
          top: 36%; } }
    #htmlcontent_top ul li.htmlcontent-item-6 a:after {
      content: "\f105";
      font-family: "FontAwesome";
      position: absolute;
      right: 38px;
      top: 16px;
      font-size: 8.846em;
      line-height: 1em;
      color: white;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear; }
      @media (max-width: 991px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a:after {
          right: 28px;
          top: 10px; } }
      @media (max-width: 767px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a:after {
          right: 28px;
          top: 21%; } }
      @media (max-width: 480px) {
        #htmlcontent_top ul li.htmlcontent-item-6 a:after {
          top: 36%; } }
    #htmlcontent_top ul li.htmlcontent-item-6 a:hover .item-html h1 {
      -moz-animation: 300ms ease-in-out 0s normal none 1 moveFromTop;
      -webkit-animation: 300ms ease-in-out 0s normal none 1 moveFromTop;
      animation: 300ms ease-in-out 0s normal none 1 moveFromTop; }
    #htmlcontent_top ul li.htmlcontent-item-6 a:hover .item-html h4 {
      -moz-animation: 300ms ease-in-out 0s normal none 1 moveFromBottom;
      -webkit-animation: 300ms ease-in-out 0s normal none 1 moveFromBottom;
      animation: 300ms ease-in-out 0s normal none 1 moveFromBottom; }
    #htmlcontent_top ul li.htmlcontent-item-6 a:hover:after {
      color: #f4f4f4;
      right: 28px;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear; }
    #htmlcontent_top ul li.htmlcontent-item-6 a:hover:before {
      -moz-animation: 900ms linear 0s normal none 1 moveFromLeftIcon;
      -webkit-animation: 900ms linear 0s normal none 1 moveFromLeftIcon;
      animation: 900ms linear 0s normal none 1 moveFromLeftIcon;
      transform: rotateY(-180deg); }

@keyframes moveFromRight {
  0% {
    opacity: 0;
    transform: translateX(200%); }

  100% {
    opacity: 1;
    transform: translateX(0%); } }
@-webkit-keyframes moveFromRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200%); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%); } }
@-webkit-keyframes moveFromLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200%); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%); } }
@keyframes moveFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-200%); }

  100% {
    opacity: 1;
    transform: translateX(0%); } }
@-webkit-keyframes moveFromLeftIcon {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200%); }

  50% {
    opacity: 0;
    -webkit-transform: translateX(-200%), rotateY(-180deg); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%), rotateY(-180deg); } }
@keyframes moveFromLeftIcon {
  0% {
    opacity: 0;
    transform: translateX(-200%); }

  50% {
    opacity: 0;
    transform: translateX(-200%), rotateY(-180deg); }

  100% {
    opacity: 1;
    transform: translateX(0%), rotateY(-180deg); } }
@-webkit-keyframes moveFromTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200%); }

  50% {
    opacity: 0.5;
    -webkit-transform: translateY(-100%); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0%); } }
@keyframes moveFromTop {
  0% {
    opacity: 0;
    transform: translateY(-200%); }

  50% {
    opacity: 0.5;
    transform: translateY(-100%); }

  100% {
    opacity: 1;
    transform: translateY(0%); } }
@-webkit-keyframes moveFromBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200%); }

  50% {
    opacity: 0.5;
    -webkit-transform: translateY(100%); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0%); } }
@keyframes moveFromBottom {
  0% {
    opacity: 0;
    transform: translateY(200%); }

  50% {
    opacity: 0.5;
    transform: translateY(100%); }

  100% {
    opacity: 1;
    transform: translateY(0%); } }
@keyframes ScaleFromLargeEffect {
  0% {
    opacity: 0;
    transform: scale(1.1) rotate(0deg); }

  50% {
    opacity: 0.5;
    border-radius: 270px;
    transform: scale(0) rotate(-360deg); }

  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg); } }
@-webkit-keyframes ScaleFromLargeEffect {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.1) rotate(0deg); }

  50% {
    opacity: 0.5;
    border-radius: 270px;
    -webkit-transform: scale(0) rotate(-360deg); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(360deg); } }
/* Left hook CSS */
/* Right hook CSS */
/* Footer hook CSS */