/* SHOWCASE */
#showcase {
  .showcase-container {
    padding: 0 10px;
    clear: both;
    .showcase-wrapper{
      text-align: center;
      //margin: 0px 15px;
    }
  }
  .showcase-item1,.showcase-item4{
    @media screen and (min-width: 991px){
      .showcase-mobile{
        display: none;
      }
    }
    width: auto;
    @media screen and (max-width:991px) {
      .showcase-desktop {
        display: none ;
      }
      .showcase-mobile{
        img{
          width: 100%;
        }
      }
    }
    position: relative;
    padding: 0px;
    overflow: hidden;
    padding: 5px;
    width: 100%;
    .showcase-desktop {
      img {
        -webkit-filter: brightness(0.9);
        filter: brightness(0.9);
        position: relative;
        .transform(translateY(0px));
        .transition(0.4s all ease;)
      }
    }
    .showcase-caption {
      position: relative;
      text-align: center;
      font-weight: bolder;
      width: 100%;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      color: black;
      z-index: 80;
      .transition(0.4s all ease);
      border: solid 6px @background;
      border-top: solid 4px fade(@header-bg,70%);
      border-bottom: solid 4px fade(@header-bg,70%);
      box-shadow: inset 0 6px 4px -4px fade(@header-bg,50%);
      padding: 10px;
      padding-top: 10px;
      background: fade(black,30%);
      padding-bottom: 10px;
      -webkit-backface-visibility: hidden;
      .showcase-title {
        font-size: 16px;
        color: @onaccent;
        span {
          background: fade(@accent, 70%);
          padding: 10px;
          margin: 15px;
        }
        font-weight: bold;
        .transition(0.4s all ease);
        @media screen and (max-width: 767px) {
          font-size: 13px;
        }

        @media screen and (max-width: 767px){
          position: relative;
        }
      }
      .showcase-desc {
        padding: 20px 0px;
        font-size: 14px;
        @media screen and (max-width: 767px) {
          font-size: 13px;
          padding-top: 0px;
        }
        @media screen and (max-width: 767px){
          transform: translateY(15%);
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          //position: absolute;
        }

        color: @onaccent;
        font-weight: normal;
        .transition(0.4s all ease);
      }
    }
    @media screen and (min-width:767px) {
      &:hover {
        overflow: hidden;
        .showcase-desktop {
          img {
            overflow: hidden;
          }
        }
        .showcase-caption {
          .transform(translateY(-89px));
        }
        .showcase-title, .showcase-desc {
        }
      }
    }
  }
  .showcase-item4{
    @media screen and (min-width:991px){
      width: 50%;
    }
    @media screen and (max-width: 767px){
      width: 100%;
      height: auto;
      .showcase-caption {
        margin-top: 5px;
      }
    }
  }
  .showcase-item2,.showcase-item3{
    @media screen and (min-width: 767px){
      .showcase-mobile{
        display: none;
      }
    }
    @media screen and (max-width:767px) {
      .showcase-desktop {
        display: none ;
      }
      .showcase-mobile{
        img{
          width: 100%;
        }
      }
      .showcase-mobile{
        img{
          width: 100%;
        }
      }
    }
    @media screen and (min-width: 767px) and (max-width: 991px){
      .showcase-desktop {
        img{
          width: 100% ;
        }
      }
    }
    @media screen and (max-width: 767px){
      width: 100%;
    }
    position: relative;
    padding: 0px;
    overflow: hidden;
    padding: 5px;
    @media screen and (max-width: 600px) {
      width: 100%;
    }
    .showcase-desktop {
      img {
        -webkit-filter: brightness(0.9);
        filter: brightness(0.9);
        position: relative;
        .transform(translateY(0px));
        .transition(0.4s all ease;)
      }
    }
    .showcase-caption {
      @media screen and (min-width: 767px) and (max-width: 991px){
        bottom: 67px;
        top: 115px;
      }
      position: relative;
      text-align: center;
      font-weight: bolder;
      width: 100%;
      bottom: 0;
      top: 62%;
      @media screen and (min-width: 991px) and (max-width: 1200px) {
        top: 51%;
      }
      left: 0;
      right: 0;
      position: absolute;
      color: white;
      z-index: 80;
      .transition(0.4s all ease);
      border: solid 6px @background;
      border-top: solid 4px fade(@sbg,70%);
      border-bottom: solid 4px fade(@sbg,70%);
      box-shadow: inset 0 6px 4px -4px fade(@sbg,50%);
      padding: 10px;
      padding-top: 10px;
      background:  fade(black,30%);
      padding-bottom: 10px;
      -webkit-backface-visibility: hidden;
      .showcase-title {
        span{
          background: fade(black,70%);
          padding: 10px;
          margin: 15px;
        }
        font-size: 16px;
        color: @onaccent;
        font-weight: bold;
        .transition(0.4s all ease);
        @media screen and (max-width: 600px) {
          font-size: 14px;
        }
      }
      .showcase-desc {
        padding: 20px 0px;
        font-size: 14px;
        color: @onaccent;
        font-weight: normal;
        @media screen and (max-width: 600px) {
          font-size: 12px;
          font-weight: normal;
        }
        .transition(0.4s all ease);
      }
    }
    @media screen and (min-width:767px) {
      &:hover {
        overflow: hidden;
        .showcase-desktop {
          img {
            overflow: hidden;

          }
        }
        .showcase-caption {
          .transform(translateY(-115px));
          background: fade(black,20%);
          border-top: solid 4px @accent;
          border-bottom: solid 4px @accent;
          box-shadow: inset 0 6px 4px -4px fade(@sbg,50%);
          .showcase-title {
            span{
              background: @accent;
            }
          }
          .showcase-desc {
            color: @onaccent;
          }
        }
        .showcase-title, .showcase-desc {
        }
      }
    }
    @media screen and (min-width: 991px) and (max-width: 1200px) {
      &:hover {
        .showcase-caption {
          .transform(translateY(-75px));
        }
      }
    }
  }
  .showcase-item4{
    @media screen and (min-width: 991px) and (max-width: 1200px) {
      &:hover {
        .showcase-caption {
          .transform(translateY(0px));
        }
      }
    }
  }
}