// CORE
@import "../../../global/less/core/variable.less";
@import "../../../global/less/core/mixins.less";
@import "../../../global/less/core/functions.less";

/* ========================================================================
 * BLANKON SPECIAL PAGE
 * ======================================================================== */
.list-frontend-theme{
  text-decoration: none !important;
  .image-bg{
    background-image: url('../../../../img/frontend-themes/bg-macbook.png');
    background-size: 470px;
    width: 470px;
    height: 280px;
    display:inline-block;
    position: relative;
    &.coming-soon{
      background-image: url('../../../../img/frontend-themes/bg-macbook-empty.png');
      background-size: 470px;
      .img-scroll{
        background-image: none !important;
      }
    }
    .image-scroll{
      background-position: center 0;
      background-repeat: no-repeat;
      position:absolute;
      width: 339px;
      height: 217px;
      top: 24px;
      left: 68px;
      .border-radius(4px);
    }
    .image-scroll{
      &.available{
        .transition(all 10s ease-out 0s);
      }
      &.start-page{
        background-image: url('../../../../img/frontend-themes/one-page/start-page/showcase/start-page.jpg');
      }
      &.app-showcase{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page/app-showcase/showcase/app-showcase.jpg');
        }
      }
      &.rs-web-product-light{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/web-product-light/showcase/web-product-light.jpg');
          background-size: cover;
        }
      }
      &.rs-web-product-dark{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/web-product-dark/showcase/web-product-dark.jpg');
          background-size: cover;
        }
      }
      &.rs-photography{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/photography/showcase/photography.jpg');
          background-size: cover;
        }
      }
      &.rs-photography-2{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/photography-2/showcase/photography.jpg');
          background-size: cover;
        }
      }
      &.rs-restaurant{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/restaurant/showcase/restaurant.jpg');
          background-size: cover;
        }
      }
      &.rs-gym{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/gym/showcase/gym.jpg');
          background-size: cover;
        }
      }
      &.rs-not-generic{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/not-generic/showcase/not-generic.jpg');
          background-size: cover;
        }
      }
      &.rs-fashion{
        &.one-page{
          background-image: url('../../../../img/frontend-themes/one-page-revolution-slider/fashion/showcase/fashion.jpg');
          background-size: cover;
        }
      }
      .image-ribbon{
        background:url("../../../../img/frontend-themes/ribbon.png") no-repeat scroll right top rgba(0, 0, 0, 0);
        display:inline-block;
        width:100%;
        height:100%;
        margin:0px -40px 0 0;
        border-radius: 0 3px 0 0;
      }
    }
    &:hover{
      .image-scroll{
        &.available{
          background-position: center 100%!important;
        }
      }
    }
  }
  .image-title{
    text-transform: capitalize;
    text-align: center;
    margin: 0 0 40px 0;
    font-weight: 300;
  }
}

// DESKTOP
@media (max-width: 1024px) and (min-width: 801px) {
  .list-frontend-theme{
    .image-bg{
      margin-left: 175px !important;
    }
  }
}
@media (max-width: 800px) {
  .list-frontend-theme{
    .image-bg{
      margin-left: 90px !important;
    }
  }
}
@media (max-width: 360px) {
  .list-frontend-theme{
    .image-bg{
      background-size: 335px auto !important;
      width: 320px;
      height: 205px;
      margin-left: 0px !important;
    }
    .image-scroll{
      width: 235px !important;
      height: 150px !important;
      top: 20px !important;
      left: 50px !important;
      &.start-page{
        background-size: 300px;
      }
    }
  }
}
@media (max-width: 320px){
  .list-frontend-theme{
    .image-scroll{
      width: 194px !important;
      height: 121px !important;
      top: 18px !important;
      left: 40px !important;
    }
    .image-bg{
      background-size: 272px auto !important;
      width: 270px !important;
      height: 157px !important;
      .image-scroll{
        .image-ribbon{
          background-size: 65px;
        }
      }
    }
  }
}