/**
 * Themes style settings
 * This file may be used by any other sass file
 * to provide global settings, functions and mixins
 */
.zp_use_cases {
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding-bottom: 30px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: relative; }
  .zp_use_cases .grid {
    margin-bottom: 30px; }
    .zp_use_cases .grid .article {
      width: 25%;
      opacity: 0;
      transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1); }
      .zp_use_cases .grid .article.article-loaded {
        opacity: 1; }
        .zp_use_cases .grid .article.article-loaded .inner {
          -ms-transform: translateY(0);
              transform: translateY(0); }
      .zp_use_cases .grid .article .inner {
        margin: 0 15px 30px 15px;
        overflow: hidden;
        display: block;
        -ms-transform: translateY(25px);
            transform: translateY(25px);
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease-out, border-radius 0.3s ease-out; }
        .zp_use_cases .grid .article .inner .image {
          width: 100%;
          margin-bottom: 10px;
          padding: 0;
          overflow: hidden;
          line-height: 0;
          display: block; }
          .zp_use_cases .grid .article .inner .image .image-src {
            width: 100%;
            height: auto;
            line-height: 0;
            margin: 0;
            padding: 0;
            transition: transform 0.3s ease-out; }
        .zp_use_cases .grid .article .inner .title {
          font-weight: bold; }
        .zp_use_cases .grid .article .inner .content {
          margin-bottom: 15px; }
        .zp_use_cases .grid .article .inner .link {
          margin-bottom: 10px;
          position: relative;
          display: inline-block;
          font-weight: bold;
          vertical-align: middle;
          overflow: hidden;
          padding-bottom: 5px;
          transition: color 0.6s cubic-bezier(0.575, 0.405, 0.035, 1.005); }
          .zp_use_cases .grid .article .inner .link:hover::after {
            -ms-transform: translateX(0);
                transform: translateX(0); }
      .zp_use_cases .grid .article:hover .inner .image .image-src {
        -ms-transform: scale(1.05);
            transform: scale(1.05); }
  .zp_use_cases .load-more {
    text-align: center;
    transition: opacity 0.6s ease-out, height 0.6s ease-out;
    height: 52px; }
    .zp_use_cases .load-more .button {
      cursor: pointer;
      margin: auto;
      position: relative;
      display: inline-block;
      z-index: 1;
      overflow: hidden; }
      .zp_use_cases .load-more .button .label {
        position: relative;
        display: inline-block;
        padding: 12px 25px;
        width: 100%;
        font-size: 19px;
        text-transform: uppercase;
        font-weight: 700;
        transition: color 0.6s cubic-bezier(0.575, 0.405, 0.035, 1.005); }
      .zp_use_cases .load-more .button::before {
        content: '';
        display: block;
        z-index: -1;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        -ms-transform: translateY(100%);
            transform: translateY(100%);
        transition: transform 0.6s cubic-bezier(0.575, 0.405, 0.035, 1.005); }
      .zp_use_cases .load-more .button:hover::before {
        -ms-transform: translateY(0);
            transform: translateY(0); }
    .zp_use_cases .load-more .loading {
      display: none;
      width: 52px;
      height: 52px;
      margin: auto;
      background-image: url("../../images/ajax-loader.svg");
      background-size: contain;
      background-repeat: no-repeat; }
  .zp_use_cases.is-loading-more .load-more .button {
    display: none; }
  .zp_use_cases.is-loading-more .load-more .loading {
    display: inline-block; }
  .zp_use_cases.no-more .load-more {
    opacity: 0;
    height: 0;
    pointer-events: none; }

@media (max-width: 1350px) {
  .zp_use_cases .grid .article {
    width: 33%; } }

@media (max-width: 900px) {
  .zp_use_cases .grid .article {
    width: 50%; } }

@media (max-width: 500px) {
  .zp_use_cases .grid .article {
    width: 100%; }
    .zp_use_cases .grid .article .inner {
      margin: 0 0 30px 0; } }

/*# sourceMappingURL=use-cases.css.map */