/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  CLIENTS
***************************************/
#clients {
  padding: 0;
  overflow: hidden; }
  #clients > .breadcrumbs-share {
    margin-bottom: 50px; }
    @media only screen and (max-width: 1130px) {
      #clients > .breadcrumbs-share {
        margin-bottom: 35px; } }
  #clients > .container.put-texture {
    position: relative;
    z-index: 1; }
    #clients > .container.put-texture:before {
      position: absolute;
      top: -20px;
      left: -40px;
      z-index: 0;
      width: 250px;
      height: 250px;
      opacity: 0.3; }
      .msie #clients > .container.put-texture:before {
        opacity: 0.5; }
      @media only screen and (max-width: 1130px) {
        #clients > .container.put-texture:before {
          width: 200px;
          height: 200px;
          left: 0; } }
    #clients > .container.put-texture > .content {
      display: table; }
      @media only screen and (max-width: 1023px) {
        #clients > .container.put-texture > .content {
          display: block; } }
      #clients > .container.put-texture > .content > .current-title {
        display: table-cell;
        vertical-align: top;
        top: -10px; }
        @media only screen and (max-width: 1023px) {
          #clients > .container.put-texture > .content > .current-title {
            display: block;
            top: 0; } }
      #clients > .container.put-texture > .content > .text {
        display: table-cell;
        vertical-align: top;
        padding-left: 150px;
        position: relative; }
        @media only screen and (max-width: 1023px) {
          #clients > .container.put-texture > .content > .text {
            display: block;
            padding: 0; } }
        #clients > .container.put-texture > .content > .text:before {
          content: '';
          position: absolute;
          top: 15px;
          left: 25px;
          display: block;
          width: 100px;
          height: 2px;
          background-color: var(--color-primary);}
          @media only screen and (max-width: 1023px) {
            #clients > .container.put-texture > .content > .text:before {
              position: relative;
              top: 0;
              left: 0;
              margin: 20px 0 25px; } }
    #clients > .container.put-texture > ul.clients {
      position: relative;
      z-index: 1;
      margin: 60px -10px 40px;
      font-size: 0; }
      @media only screen and (max-width: 1130px) {
        #clients > .container.put-texture > ul.clients {
          margin: 40px -10px 20px; } }
      #clients > .container.put-texture > ul.clients > li {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin: 0 10px 20px;
        padding: 0;
        width: calc(20% - 20px);
        height: 170px;
        text-align: center;
        background-color: #FFFFFF; }
        @media only screen and (max-width: 1129px) {
          #clients > .container.put-texture > ul.clients > li {
            width: calc(25% - 20px); } }
        @media only screen and (max-width: 1023px) {
          #clients > .container.put-texture > ul.clients > li {
            width: calc(33.33% - 20px); } }
        @media only screen and (max-width: 767px) {
          #clients > .container.put-texture > ul.clients > li {
            width: calc(50% - 20px); } }
        #clients > .container.put-texture > ul.clients > li img {
          display: block;
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
                  transform: translateY(-50%);
          margin: 0 auto;
          max-width: 100%;
          font-size: 10px; }
        #clients > .container.put-texture > ul.clients > li > a {
          position: relative;
          display: block;
          height: 100%; }
          #clients > .container.put-texture > ul.clients > li > a > svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
            z-index: 1; }
            #clients > .container.put-texture > ul.clients > li > a > svg > rect {
              stroke-dasharray: 0 1100;
              stroke-width: 6px;
              fill: transparent;
              -webkit-transition: stroke-dasharray 0.5s ease-in-out, stroke-width 0.2s ease-in-out;
              -o-transition: stroke-dasharray 0.5s ease-in-out, stroke-width 0.2s ease-in-out;
              transition: stroke-dasharray 0.5s ease-in-out, stroke-width 0.2s ease-in-out; }
              .msie:not(.edge) #clients > .container.put-texture > ul.clients > li > a > svg > rect {
                stroke-dasharray: 1100;
                opacity: 0;
                -webkit-transition: opacity 0.2s linear;
                -o-transition: opacity 0.2s linear;
                transition: opacity 0.2s linear; }
          .no-touch #clients > .container.put-texture > ul.clients > li > a:hover > svg > rect,
          .touch #clients > .container.put-texture > ul.clients > li > a:active > svg > rect {
            stroke-dasharray: 700; }
            @media only screen and (max-width: 1129px) {
              .no-touch #clients > .container.put-texture > ul.clients > li > a:hover > svg > rect,
              .touch #clients > .container.put-texture > ul.clients > li > a:active > svg > rect {
                stroke-dasharray: 900; } }
            @media only screen and (max-width: 767px) {
              .no-touch #clients > .container.put-texture > ul.clients > li > a:hover > svg > rect,
              .touch #clients > .container.put-texture > ul.clients > li > a:active > svg > rect {
                stroke-dasharray: 1100; } }
            @media only screen and (max-width: 480px) {
              .no-touch #clients > .container.put-texture > ul.clients > li > a:hover > svg > rect,
              .touch #clients > .container.put-texture > ul.clients > li > a:active > svg > rect {
                stroke-dasharray: 700; } }
          .msie:not(.edge) #clients > .container.put-texture > ul.clients > li > a:hover > svg > rect,
          .msie:not(.edge) #clients > .container.put-texture > ul.clients > li > a:active > svg > rect {
            opacity: 1; }
          .no-touch #clients > .container.put-texture > ul.clients > li > a:active > svg > rect {
            stroke-width: 10px; }



#worksSlider .slick-list .work a .btn-plus.btn-aqua,
#worksSlider .slick-list .work a:hover .btn-plus.btn-aqua {
    background-color: var(--color-primary);
}

#worksSlider > .container:not(.moved-triangles) > ul.works-slider > .slick-list li.work > a > .covered:before {
    background-color: rgba(135, 204, 208, 0.3);
}