/* Top hook CSS */
#htmlcontent_top ul {
  margin: 0; }
  @media (max-width: 479px) {
    #htmlcontent_top ul {
      margin-bottom: -10px;
      overflow: hidden; } }
  #htmlcontent_top ul li {
    margin-bottom: 10px;
    text-align: center; }
    @media (max-width: 1199px) {
      #htmlcontent_top ul li {
        margin-bottom: 20px; } }
    @media (max-width: 479px) {
      #htmlcontent_top ul li {
        width: 100%;
        margin-bottom: 25px; } }
    #htmlcontent_top ul li img {
      max-width: 100%;
      height: auto;
      width: 100%; }
    #htmlcontent_top ul li a {
      position: relative;
      display: block;
      padding-bottom: 65px;
	  padding-top: 10px;
      overflow: hidden; }
      @media (max-width: 1199px) {
        #htmlcontent_top ul li a {
          padding-bottom: 10px; } }
      #htmlcontent_top ul li a:after {
        -moz-transition: top 0.3s ease;
        -o-transition: top 0.3s ease;
        -webkit-transition: top 0.3s ease;
        transition: top 0.3s ease;
        content: "";
        background: #000;
        opacity: 0.9;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
        height: 0; }
      #htmlcontent_top ul li a .item-html {
        margin-top: 5%; }
        @media (min-width: 1199px) {
          #htmlcontent_top ul li a .item-html {
            -moz-transition: all 0.35s ease-in;
            -o-transition: all 0.35s ease-in;
            -webkit-transition: all 0.35s ease-in;
            transition: all 0.35s ease-in;
            width: 100%;
            position: absolute;
            top: 83.4%;
            left: 0;
            z-index: 1;
            margin: 0; } }
        @media (max-width: 767px) {
          #htmlcontent_top ul li a .item-html {
            margin-top: 7%; } }
        @media (max-width: 767px) {
          #htmlcontent_top ul li a .item-html {
            margin-top: 5%; } }
      #htmlcontent_top ul li a h2 {
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        font: 500 24px/28px "Ubuntu", sans-serif;
        text-transform: uppercase;
        color: #F8C300;
        margin: 0; }
        @media (max-width: 991px) {
          #htmlcontent_top ul li a h2 {
            font-size: 21px;
            line-height: 25px; } }
        @media (max-width: 767px) {
          #htmlcontent_top ul li a h2 {
            font-size: 17px;
            line-height: 19px; } }
        @media (max-width: 479px) {
          #htmlcontent_top ul li a h2 {
            font-size: 22px;
            line-height: 21px; } }
      @media (min-width: 1199px) {
        #htmlcontent_top ul li a:hover .item-html {
          -moz-transition: all 0.37s ease 0.46s;
          -o-transition: all 0.37s ease 0.46s;
          -webkit-transition: all 0.37s ease;
          -webkit-transition-delay: 0.46s;
          transition: all 0.37s ease 0.46s;
          top: 33.5%; } }
      #htmlcontent_top ul li a:hover h2 {
        color: #EDC840; }
        @media (min-width: 1199px) {
          #htmlcontent_top ul li a:hover h2 {
            -moz-transition: all 0.3s ease-in 0.3s;
            -o-transition: all 0.3s ease-in 0.3s;
            -webkit-transition: all 0.3s ease-in;
            -webkit-transition-delay: 0.3s;
            transition: all 0.3s ease-in 0.3s;
            color: white; } }
      @media (min-width: 1199px) {
        #htmlcontent_top ul li a:hover:after {
          -moz-transition: top 0.5s ease 0.4s, left 0.5s ease 0.4s, width 0.5s ease 0.4s;
          -o-transition: top 0.5s ease 0.4s, left 0.5s ease 0.4s, width 0.5s ease 0.4s;
          -webkit-transition: top 0.5s ease, left 0.5s ease, width 0.5s ease;
          -webkit-transition-delay: 0.4s, 0.4s, 0.4s;
          transition: top 0.5s ease 0.4s, left 0.5s ease 0.4s, width 0.5s ease 0.4s;
          height: 65.4%;
          top: 7.6%;
          left: 6%;
          width: 88%;
          opacity: 0.8;
          animation: 860ms ease 0s normal none 1 height;
          -webkit-animation: 860ms ease 0s  normal none 1 height;
          -moz-animation: 860ms ease 0s  normal none 1 height;
          -o-animation: 860ms ease 0s  normal none 1 height;
          -ms-animation: 860ms ease 0s  normal none 1 height; } }

@keyframes height {
  0% {
    height: 0;
    opacity: 0.8; }

  50% {
    height: 100%;
    opacity: 0.5; }

  100% {
    height: 65.4%;
    opacity: 0.8; } }
@-webkit-keyframes height {
  0% {
    height: 0;
    opacity: 0.8; }

  50% {
    height: 100%;
    opacity: 0.5; }

  100% {
    height: 65.4%;
    opacity: 0.8; } }
#htmlcontent_home ul {
  margin: 0; }
  @media (max-width: 479px) {
    #htmlcontent_home ul {
      margin-bottom: -10px;
      overflow: hidden; } }
  #htmlcontent_home ul li {
    width: 100%;
    margin-bottom: 35px;
    text-align: center; }
    #htmlcontent_home ul li img {
      max-width: 100%;
      height: auto;
      width: 100%; }
    #htmlcontent_home ul li a {
      position: relative;
      display: block;
      text-transform: uppercase;
      overflow: hidden; }
      #htmlcontent_home ul li a .item-html {
        width: 100%;
        position: absolute;
        top: 29%;
        left: 0; }
        @media (max-width: 1199px) {
          #htmlcontent_home ul li a .item-html {
            top: 25%; } }
        @media (max-width: 767px) {
          #htmlcontent_home ul li a .item-html {
            top: 20%; } }
        @media (max-width: 479px) {
          #htmlcontent_home ul li a .item-html {
            top: 17%; } }
      #htmlcontent_home ul li a h3 {
        -moz-transition: margin 0.5s ease, color 0.3s ease;
        -o-transition: margin 0.5s ease, color 0.3s ease;
        -webkit-transition: margin 0.5s ease, color 0.3s ease;
        transition: margin 0.5s ease, color 0.3s ease;
        font: 400 40px/1em "Ubuntu", sans-serif;
        color: #00bbd3;
        margin: 0 0 0.8%;
        padding: 0; }
        @media (max-width: 991px) {
          #htmlcontent_home ul li a h3 {
            font-size: 30px; } }
        @media (max-width: 767px) {
          #htmlcontent_home ul li a h3 {
            font-size: 25px; } }
        @media (max-width: 479px) {
          #htmlcontent_home ul li a h3 {
            font-size: 20px; } }
      #htmlcontent_home ul li a h2 {
        -moz-transition: color 0.3s ease;
        -o-transition: color 0.3s ease;
        -webkit-transition: color 0.3s ease;
        transition: color 0.3s ease;
        font: 300 60px/63px "Ubuntu", sans-serif;
        color: #F9C500;
        margin: 0 0 3.2%;
        padding: 0; }
        @media (max-width: 991px) {
          #htmlcontent_home ul li a h2 {
            font-size: 50px;
            line-height: 53px; } }
        @media (max-width: 767px) {
          #htmlcontent_home ul li a h2 {
            font-size: 40px;
            line-height: 43px; } }
        @media (max-width: 479px) {
          #htmlcontent_home ul li a h2 {
            font-size: 25px;
            line-height: 25px; } }
      #htmlcontent_home ul li a p button {
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        width: auto;
        font: 500 16px/20px "Ubuntu", sans-serif;
        padding: 15px 21px 16px;
        color: white;
        text-align: center;
        background: #F9C500;
        border: none;
        text-transform: uppercase;
        -webkit-box-shadow: 3px 4px 5px -2px #757575;
        box-shadow: 3px 4px 5px -2px #F9C500;
        transform-origin: 77px 0 0;
        transform: perspective(400px) rotate3d(0, 0, 0, -30deg); }
        @media (max-width: 991px) {
          #htmlcontent_home ul li a p button {
            font-size: 15px;
            line-height: 18px;
            padding: 11px 18px 12px; } }
        @media (max-width: 767px) {
          #htmlcontent_home ul li a p button {
            font-size: 14px;
            line-height: 16px;
            padding: 8px 15px 9px; } }
        @media (max-width: 479px) {
          #htmlcontent_home ul li a p button {
            font-size: 11px;
            line-height: 15px;
            padding: 5px 10px 6px; } }
        #htmlcontent_home ul li a p button:hover {
          color: white;
          background: #e7b816; }
      @media (min-width: 1199px) {
        #htmlcontent_home ul li a:hover h3 {
          animation: 0.45s ease 0s normal none 1 moveFromTop;
          -webkit-animation: 0.45s ease 0s normal none 1 moveFromTop;
          -moz-animation: 0.45s ease 0s normal none 1 moveFromTop;
          -o-animation: 0.4s ease 0s normal none 1 moveFromTop;
          -ms-animation: 0.4s ease 0s normal none 1 moveFromTop; } }
      @media (max-width: 1199px) {
        #htmlcontent_home ul li a:hover h3 {
          color: #374046; } }
      @media (max-width: 1199px) {
        #htmlcontent_home ul li a:hover h2 {
          color: #00bbd3; } }
      @media (min-width: 1199px) {
        #htmlcontent_home ul li a:hover p button {
          transform: perspective(300px) rotate3d(1, 0, 0, -18deg);
          -webkit-transform: perspective(300px) rotate3d(1, 0, 0, -18deg);
          -webkit-box-shadow: 5px 5px 5px -5px #757575, 8px 37px 39px -66px #000 inset;
          box-shadow: 5px 5px 5px -5px #757575, 8px 37px 39px -66px #000 inset; } }

@keyframes moveFromTop {
  0% {
    opacity: 0.8;
    transform: translateY(-300%); }

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

  100% {
    opacity: 0.8;
    -webkit-transform: translateY(0%); } }