/* Top hook CSS */
#htmlcontent_top {
  overflow: hidden;
  padding: 30px 0;
  border-top: 0;
  border-bottom: 0; }
  @media (max-width: 480px) {
    #htmlcontent_top {
      padding-bottom: 0; } }
  #htmlcontent_top ul {
    position: relative;
    width: 100%; }
    @media (max-width: 480px) {
      #htmlcontent_top ul {
        margin-bottom: 0; } }
    @media (min-width: 1199px) {
      #htmlcontent_top ul:after {
        position: absolute;
        content: "";
        width: 1px;
        height: 216px;
        right: 0;
        top: 0;
        background: #dbdbdb; }
      #htmlcontent_top ul:before {
        position: absolute;
        content: "";
        width: 1px;
        height: 216px;
        top: 0;
        left: -1px;
        background: #dbdbdb; } }
    #htmlcontent_top ul li {
      float: left;
      width: 25%; }
      @media (max-width: 480px) {
        #htmlcontent_top ul li {
          width: 100%;
          float: none;
          margin-bottom: 20px; } }
      #htmlcontent_top ul li a {
        position: relative;
        display: block;
        text-align: center; }
        #htmlcontent_top ul li a:before {
          -moz-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
          position: absolute;
          content: "";
          width: 1px;
          height: 84%;
          top: 0;
          left: -1px;
          background: #dbdbdb; }
        #htmlcontent_top ul li a:after {
          -moz-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
          position: absolute;
          content: "";
          width: 1px;
          height: 84%;
          right: 0;
          top: 0;
          background: #dbdbdb; }
        #htmlcontent_top ul li a .item-html {
          position: absolute;
          top: 35%;
          padding: 15px;
          width: 100%; }
        #htmlcontent_top ul li a h2 {
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
          font: 400 20px/24px "Marcellus SC", serif;
          color: #111111;
          margin: 0 0 6px 0;
          padding: 0;
          position: relative;
          margin-bottom: 10px; }
          @media (max-width: 991px) {
            #htmlcontent_top ul li a h2 {
              font-size: 17px;
              line-height: 18px; } }
          @media (max-width: 767px) {
            #htmlcontent_top ul li a h2 {
              font-size: 16px;
              line-height: 17px;
              min-height: 30px; } }
          @media (max-width: 480px) {
            #htmlcontent_top ul li a h2 {
              font-size: 20px;
              line-height: 24px;
              margin-bottom: 0; } }
        #htmlcontent_top ul li a p {
          font: 400 14px/18px "Roboto", sans-serif;
          color: #888888;
          padding-bottom: 10px; }
          @media (max-width: 991px) {
            #htmlcontent_top ul li a p {
              font-size: 12px;
              line-height: 15px;
              margin-bottom: 0; } }
          @media (max-width: 767px) {
            #htmlcontent_top ul li a p {
              display: none; } }
          @media (max-width: 480px) {
            #htmlcontent_top ul li a p {
              display: block; } }
          #htmlcontent_top ul li a p + p {
            display: inline-block;
            padding-bottom: 5px; }
            @media (max-width: 767px) and (min-width: 480px) {
              #htmlcontent_top ul li a p + p {
                padding-bottom: 0; } }
        #htmlcontent_top ul li a button {
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
          font: 900 13px/1.05em "Roboto", sans-serif;
          background: #db4360;
          border: none;
          color: white;
          text-transform: uppercase;
          position: relative;
          padding: 10% 24%; }
          @media (max-width: 991px) {
            #htmlcontent_top ul li a button {
              font-size: 12px;
              padding: 9% 14%; } }
          @media (max-width: 767px) {
            #htmlcontent_top ul li a button {
              font-size: 11px; } }
          @media (max-width: 480px) {
            #htmlcontent_top ul li a button {
              font-size: 13px;
              padding: 10% 24%; } }
          #htmlcontent_top ul li a button:hover {
            background: #bb3b53; }
        #htmlcontent_top ul li a span {
          -moz-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
          display: inline-block;
          width: 74.1%;
          margin-top: 10.7%;
          border-bottom: 1px solid #dbdbdb; }
        #htmlcontent_top ul li a:last-child {
          margin-bottom: 0; }
        #htmlcontent_top ul li a img {
          -moz-transition: all 0.5s ease;
          -o-transition: all 0.5s ease;
          -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
          max-width: 100%;
          height: auto; }
        #htmlcontent_top ul li a:hover h2 {
          color: #db4360; }
        #htmlcontent_top ul li a:hover span {
          border-color: #db4360; }
          @media (min-width: 1199px) {
            #htmlcontent_top ul li a:hover span {
              animation: 300ms linear 0s normal none 1 moveFromLeft;
              -webkit-animation: 300ms linear 0s normal none 1 moveFromLeft;
              -moz-animation: 300ms linear 0s normal none 1 moveFromLeft;
              -o-animation: 300ms linear 0s normal none 1 moveFromLeft;
              -ms-animation: 300ms linear 0s normal none 1 moveFromLeft; } }
        #htmlcontent_top ul li a:hover:before {
          background: #db4360;
          z-index: 1; }
          @media (min-width: 1199px) {
            #htmlcontent_top ul li a:hover:before {
              animation: 400ms linear 0s normal none 1 moveFromTop;
              -webkit-animation: 400ms linear 0s normal none 1 moveFromTop;
              -moz-animation: 400ms linear 0s normal none 1 moveFromTop;
              -o-animation: 400ms linear 0s normal none 1 moveFromTop;
              -ms-animation: 400ms linear 0s normal none 1 moveFromTop; } }
        #htmlcontent_top ul li a:hover:after {
          background: #db4360;
          z-index: 1; }
          @media (min-width: 1199px) {
            #htmlcontent_top ul li a:hover:after {
              animation: 400ms linear 0s normal none 1 moveFromBottom;
              -webkit-animation: 400ms linear 0s normal none 1 moveFromBottom;
              -moz-animation: 400ms linear 0s normal none 1 moveFromBottom;
              -o-animation: 400ms linear 0s normal none 1 moveFromBottom;
              -ms-animation: 400ms linear 0s normal none 1 moveFromBottom; } }
        @media (min-width: 1199px) {
          #htmlcontent_top ul li a:hover img {
            animation: 300ms linear 0s normal none 1;
            -webkit-animation: 300ms linear 0s normal none 1 moveFromScaleimg;
            -moz-animation: 300ms linear 0s normal none 1 moveFromScaleimg;
            -o-animation: 300ms linear 0s normal none 1 moveFromScaleimg;
            -ms-animation: 300ms linear 0s normal none 1 moveFromScaleimg; } }
      #htmlcontent_top ul li:first-child a:before {
        left: -1px; }
    #htmlcontent_top ul .htmlcontent-item-1 a span,
    #htmlcontent_top ul .htmlcontent-item-4 a span {
      margin-top: 10%; }

/* Left hook CSS */
/* Right hook CSS */
/* Footer hook CSS */
#htmlcontent_footer {
  padding-top: 52px;
  padding-bottom: 33px; }
  #htmlcontent_footer .htmlcontent-item-1 a,
  #htmlcontent_footer .htmlcontent-item-2 a {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #fff;
    position: relative;
    overflow: hidden;
    display: block;
    max-height: 211px; }
    #htmlcontent_footer .htmlcontent-item-1 a .item-html,
    #htmlcontent_footer .htmlcontent-item-2 a .item-html {
      position: relative;
      min-height: 209px; }
  @media (max-width: 767px) {
    #htmlcontent_footer .htmlcontent-item-1,
    #htmlcontent_footer .htmlcontent-item-2 {
      width: 100%;
      margin-bottom: 12px; } }
  #htmlcontent_footer .htmlcontent-item-1 a .item-html {
    text-align: center; }
    #htmlcontent_footer .htmlcontent-item-1 a .item-html:after {
      -moz-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      -webkit-transition: all 0.8s ease;
      transition: all 0.8s ease;
      position: absolute;
      content: "";
      background: url(../../../../img/baner6-img-old.png) no-repeat;
      width: 143px;
      height: 126px;
      bottom: -33%; }
      @media (min-width: 767px) {
        #htmlcontent_footer .htmlcontent-item-1 a .item-html:after {
          left: -15%; } }
      @media (max-width: 767px) {
        #htmlcontent_footer .htmlcontent-item-1 a .item-html:after {
          right: -13%;
          bottom: 76%; } }
  #htmlcontent_footer .htmlcontent-item-1 a h2 {
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font: 400 50px/50px "Marcellus SC", serif;
    color: white;
    margin: 0;
    padding-top: 21%;
    letter-spacing: -1.1px; }
    @media (max-width: 1199px) {
      #htmlcontent_footer .htmlcontent-item-1 a h2 {
        font-size: 43px; } }
    @media (max-width: 991px) {
      #htmlcontent_footer .htmlcontent-item-1 a h2 {
        font-size: 40px;
        line-height: 38px; } }
    @media (max-width: 767px) {
      #htmlcontent_footer .htmlcontent-item-1 a h2 {
        padding-top: 15%; } }
    @media (max-width: 480px) {
      #htmlcontent_footer .htmlcontent-item-1 a h2 {
        padding-top: 23%; } }
  @media (min-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-1 a:hover .item-html:after {
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      left: -5%;
      bottom: -20%; } }
  @media (min-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-1 a:hover h2 {
      padding-top: 12%; } }
  @media (max-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-1 a:hover h2 {
      color: #d2d2d2; } }
  #htmlcontent_footer .htmlcontent-item-2 a .item-html {
    text-align: right; }
    #htmlcontent_footer .htmlcontent-item-2 a .item-html:after {
      -moz-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      -webkit-transition: all 0.8s ease;
      transition: all 0.8s ease;
      position: absolute;
      top: 19%;
      left: 5.2%;
      content: "";
      background: url(../../../../img/baner6-img.png) no-repeat;
      width: 143px;
      height: 126px; }
      @media (max-width: 991px) {
        #htmlcontent_footer .htmlcontent-item-2 a .item-html:after {
          left: -8.8%;
          top: -25%; } }
      @media (max-width: 767px) {
        #htmlcontent_footer .htmlcontent-item-2 a .item-html:after {
          top: -15%; } }
  #htmlcontent_footer .htmlcontent-item-2 a h2 {
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font: 900 54px/54px "Roboto", sans-serif;
    text-transform: uppercase;
    color: white;
    padding-right: 4%;
    margin: 0; }
    @media (max-width: 767px) {
      #htmlcontent_footer .htmlcontent-item-2 a h2 {
        font-size: 30px;
        line-height: 35px; } }
  #htmlcontent_footer .htmlcontent-item-2 a h3 {
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font: 400 90px/90px "Marcellus SC", serif;
    color: white;
    padding: 2.2% 3.5% 2.1%;
    margin: 0; }
    @media (max-width: 767px) {
      #htmlcontent_footer .htmlcontent-item-2 a h3 {
        padding: 8% 3.5% 3.5%;
        font-size: 50px;
        line-height: 50px; } }
    @media (max-width: 480px) {
      #htmlcontent_footer .htmlcontent-item-2 a h3 {
        padding: 18% 3.5% 3.5%; } }
    #htmlcontent_footer .htmlcontent-item-2 a h3 span {
      display: inline-block;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out; }
  @media (min-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-2 a:hover .item-html:after {
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(360deg);
      left: 10%; } }
  @media (min-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-2 a:hover h2 {
      padding-right: 7%; } }
  @media (max-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-2 a:hover h2 {
      color: #d2d2d2; } }
  @media (min-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-2 a:hover h3 span {
      -moz-transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
      color: #e3e1e1; } }
  @media (max-width: 1199px) {
    #htmlcontent_footer .htmlcontent-item-2 a:hover h3 {
      color: #d2d2d2; } }

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

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

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

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

  100% {
    opacity: 1;
    transform: translateY(0%); } }
@-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 moveFromBottom {
  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 moveFromScaleimg {
  0% {
    transform: scale(0.9); }

  15% {
    transform: scale(0.8); }

  30% {
    transform: scale(0.9); }

  45% {
    transform: scale(1); }

  60% {
    transform: scale(1.1); }

  75% {
    transform: scale(1.15); }

  90% {
    transform: scale(1.1); }

  100% {
    transform: scale(1); } }
@-webkit-keyframes moveFromScaleimg {
  0% {
    transform: scale(0.9); }

  15% {
    transform: scale(0.8); }

  30% {
    transform: scale(0.9); }

  45% {
    transform: scale(1); }

  60% {
    transform: scale(1.1); }

  75% {
    transform: scale(1.15); }

  90% {
    transform: scale(1.1); }

  100% {
    transform: scale(1); } }