/* Top hook CSS */
@media (max-width: 767px) {
  #htmlcontent_top {
    padding-top: 0; } }
@media (max-width: 767px) {
  #htmlcontent_top ul {
    margin: 0 -5px; } }
#htmlcontent_top ul li {
  width: 50%;
  margin-bottom: 10px; }
  @media (max-width: 767px) {
    #htmlcontent_top ul li {
      padding-left: 5px;
      padding-right: 5px; } }
  @media (max-width: 479px) {
    #htmlcontent_top ul li {
      width: 100%; } }
  #htmlcontent_top ul li .item-link {
    display: inline-block;
    overflow: hidden;
    position: relative; }
    #htmlcontent_top ul li .item-link:before {
      background: #fff;
      border: 1px solid #ebebeb;
      bottom: 0;
      content: '';
      height: 81%;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 1;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    #htmlcontent_top ul li .item-link img {
      position: relative;
      width: 100%;
      z-index: 10; }
    #htmlcontent_top ul li .item-link h2 {
      color: #4267B2;
      font: 700 47px/40px "Nunito", Tahoma, Geneva, Kalimati, sans-serif;
      margin: 0 0 15px;
      padding: 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    #htmlcontent_top ul li .item-link p {
      font: 13px/29px "Nunito", Tahoma, Geneva, Kalimati, sans-serif;
      color: #777;
      margin: 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease; }
    #htmlcontent_top ul li .item-link .item-html {
      left: 60px;
      position: absolute;
      top: 150px;
      width: 45%;
      z-index: 11; }
    #htmlcontent_top ul li .item-link:hover:before {
      background: #4267B2;
      border-color: #4267B2; }
    #htmlcontent_top ul li .item-link:hover h2 {
      color: #fff;
      animation: 400ms ease-in-out 0s normal none 1 moveFromLeft;
      -webkit-animation: 400ms ease-in-out 0s normal none 1 moveFromLeft; }
    #htmlcontent_top ul li .item-link:hover p {
      color: #fff;
      animation: 400ms ease-in-out 0s normal none 1 moveFromRight;
      -webkit-animation: 400ms ease-in-out 0s normal none 1 moveFromRight; }
    @media (max-width: 1199px) {
      #htmlcontent_top ul li .item-link .item-html {
        left: 30px;
        top: 100px;
        width: 55%; }
      #htmlcontent_top ul li .item-link h2 {
        font-size: 40px;
        line-height: 35px; } }
    @media (max-width: 991px) {
      #htmlcontent_top ul li .item-link h2 {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 10px; }
      #htmlcontent_top ul li .item-link .item-html {
        left: 15px;
        top: 70px;
        width: 60%; }
      #htmlcontent_top ul li .item-link p {
        line-height: 20px; } }
    @media (min-width: 480px) and (max-width: 767px) {
      #htmlcontent_top ul li .item-link .item-html {
        left: 15px;
        top: 80px;
        width: 75%; }
      #htmlcontent_top ul li .item-link p {
        display: none; }
      #htmlcontent_top ul li .item-link h2 {
        font-size: 30px;
        line-height: 30px; } }
    @media (max-width: 479px) {
      #htmlcontent_top ul li .item-link .item-html {
        width: 85%; }
      #htmlcontent_top ul li .item-link p {
        display: none; } }
  #htmlcontent_top ul li:first-child .item-link:before {
    background: #4267B2;
    border-color: #4267B2; }
  #htmlcontent_top ul li:first-child .item-link h2, #htmlcontent_top ul li:first-child .item-link p {
    color: #fff; }
  #htmlcontent_top ul li:first-child .item-link:hover:before {
    background: #343436;
    border-color: #343436; }
  #htmlcontent_top ul li:last-child .item-link:before {
    background: #343436;
    border-color: #343436; }
  #htmlcontent_top ul li:last-child .item-link h2, #htmlcontent_top ul li:last-child .item-link p {
    color: #fff; }
  #htmlcontent_top ul li:last-child .item-link:hover:before {
    background: #fff;
    border-color: #ebebeb; }
  #htmlcontent_top ul li:last-child .item-link:hover h2 {
    color: #4267B2; }
  #htmlcontent_top ul li:last-child .item-link:hover p {
    color: #343436; }
  #htmlcontent_top ul li img {
    max-width: 100%;
    height: auto; }

/* Left hook CSS */
/* Right hook CSS */
/* Footer hook CSS */
#htmlcontent_home {
  background: #f2f2f2;
  text-align: center; }
  #htmlcontent_home ul.htmlcontent-home {
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: 20px;
    padding-top: 50px;
    text-align: left; }
    #htmlcontent_home ul.htmlcontent-home li {
      margin-bottom: 25px;
      width: 50%; }
      #htmlcontent_home ul.htmlcontent-home li a.item-link {
        overflow: hidden;
        display: block;
        position: relative; }
        #htmlcontent_home ul.htmlcontent-home li a.item-link h2 {
          color: #777;
          font: 700 23px/25px "Nunito", Tahoma, Geneva, Kalimati, sans-serif;
          margin: 0 0 10px;
          padding-top: 20px;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          transition: all 0.3s ease; }
        #htmlcontent_home ul.htmlcontent-home li a.item-link p {
          color: #777;
          font: 13px/29px "Nunito", Tahoma, Geneva, Kalimati, sans-serif;
          margin: 0;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          transition: all 0.3s ease; }
        #htmlcontent_home ul.htmlcontent-home li a.item-link span {
          background: #4267B2;
          border-radius: 100px;
          color: #fff;
          display: inline-block;
          float: left;
          font: 62px/60px "FontAwesome";
          height: 134px;
          margin: 10px 20px 15px 0;
          padding-top: 35px;
          position: relative;
          text-align: center;
          width: 134px;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          transition: all 0.3s ease; }
          @media (min-width: 992px) {
            #htmlcontent_home ul.htmlcontent-home li a.item-link span:after {
              border-radius: 50%;
              box-sizing: content-box;
              color: #fff;
              content: '';
              top: -7px;
              left: -5px;
              height: 100%;
              padding: 5px;
              position: absolute;
              opacity: 0;
              width: 100%;
              box-shadow: 3px 3px #343436;
              transform: rotate(-90deg);
              -webkit-transition: opacity 0.3s ease 0s, transform 0.2s ease 0s;
              -moz-transition: opacity 0.3s ease 0s, transform 0.2s ease 0s;
              transition: opacity 0.3s ease 0s, transform 0.2s ease 0s; } }
        #htmlcontent_home ul.htmlcontent-home li a.item-link:hover h2 {
          color: #343436; }
        #htmlcontent_home ul.htmlcontent-home li a.item-link:hover span {
          background: #343436;
          color: #fff; }
          #htmlcontent_home ul.htmlcontent-home li a.item-link:hover span:after {
            opacity: 1;
            transform: rotate(0deg); }
        @media (max-width: 1199px) {
          #htmlcontent_home ul.htmlcontent-home li a.item-link span {
            font-size: 46px;
            height: 100px;
            line-height: 44px;
            margin-right: 15px;
            padding-top: 27px;
            width: 100px; }
          #htmlcontent_home ul.htmlcontent-home li a.item-link p {
            line-height: 22px; } }
        @media (min-width: 768px) and (max-width: 991px) {
          #htmlcontent_home ul.htmlcontent-home li a.item-link h2 {
            font-size: 20px;
            line-height: 23px; }
          #htmlcontent_home ul.htmlcontent-home li a.item-link span {
            font-size: 36px;
            height: 80px;
            line-height: 36px;
            margin-bottom: 7px;
            margin-right: 10px;
            padding-top: 20px;
            width: 80px; } }
        @media (max-width: 479px) {
          #htmlcontent_home ul.htmlcontent-home li a.item-link h2 {
            font-size: 20px;
            line-height: 23px; }
          #htmlcontent_home ul.htmlcontent-home li a.item-link span {
            font-size: 36px;
            height: 80px;
            line-height: 36px;
            margin-bottom: 7px;
            margin-right: 10px;
            padding-top: 20px;
            width: 80px; } }
      @media (max-width: 767px) {
        #htmlcontent_home ul.htmlcontent-home li {
          width: 100%; } }

@-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%); } }
@-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%); } }
@-webkit-keyframes moveFromtop {
  0% {
    opacity: 0;
    transform: translateY(-200%); }

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

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

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

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

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

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

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

  100% {
    opacity: 1;
    transform: translateY(0%); } }