@charset "utf-8";

@import "../initial";

// Gallery MODULES
.widget-gallery {
  .widget-title {
    @extend .unity-title;
  }

  .widget-content {
    position: relative;
  }
  &.widget8 {
    .widget-content {
      overflow: hidden;
      width: 130%;
      @media(min-width: 1500px){
        // height: 30em;
      }
      @media(max-width: 767px){
        height: 16em!important;
      }

      .album-item {
        display: flex;
        flex-direction: column;
      }

      .widget-pic {
        border-radius: 1em;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        @media(min-width: 2000px){
          height: 21em !important;
        }
        @media(min-width: 1700px)and(max-width: 2000px){
          width: 37vw!important;
          height: 24em !important;
        }
        @media(min-width: 1500px)and(max-width: 1700px){
          width: 43vw!important;
          height: 24em !important;
        }
        @media(min-width: 1201px)and(max-width: 1500px){
          width: 42vw!important;
          height: 21em!important;
        }
        @media(min-width: 800px)and(max-width: 1200px){
          width: 42vw!important;
          height: 20em!important;
        }
        @media(max-width:800px )and(min-width:$screen-xs){
          width: 42vw!important;
          height: 12em !important;
        }
        @media(max-width: $screen-xs){
           width: 86vw !important;
        }
        margin-right:1em;
        display: inline-block;
        padding: 0.0625em;
        text-align: center;

        @include size(20%, auto);

        img {
          width: 100%;
          border-radius:1.5em;
          @media(max-width: 768px){

          }
        }
      }
    }
  }
  &.widget1 {
    .widget-content {
      overflow: hidden;
      width: 130%;

      .album-item {
        display: flex;
        flex-direction: column;
      }

      .widget-pic {

        display: inline-block;
        padding: 0.0625em;
        text-align: center;

        @include size(20%, auto);

        img {
          @include size(100%, 100%);
        }
      }
    }
  }

  &.widget2 {
    .widget-content {
      margin-left: -0.3125em;
      margin-right: -0.3125em;

      .widget-pic {
        margin-bottom: 0.625em;
        padding-left: 0.3125em;
        padding-right: 0.3125em;

        img {
          @include size(100%, auto);
        }
      }
    }
  }
}

.index-gallery {
  .index-title {
    @extend .unity-title;
  }

  &.index1 {
    .index-content {
      &:nth-child(4n+1) {
        clear: both;
      }

      .index-part {
        padding: 0.5em;
            height: 5em;
      }

      .index-content-inner {
        position: relative;
      }

      .index-content-title {
        font-family: $main-font;
        font-weight: bold;
        padding-left: 1em;
        font-size: 1.2em;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .index-img-description {
        font-size: 0.813em;
      }
    }
  }

  &.index2 {
    .index-content {
      padding: 1.5625em 0.9375em;
      background: lighten($theme-gray, 60%);
      margin-bottom: 1.25em;
      border-radius: 0.125em;
      width: 100%;

      @media screen and (max-width: $screen-sm) {
        margin-right: 1.25em;
        margin-left: 1.25em;
      }
    }

    .index-content-inner {
      margin-bottom: 1.5625em;
    }

    .index-img {
      border-radius: 0.125em;
    }

    .index-content-title {
      font-family: $main-font;
      font-weight: bold;
      padding-left: 1em;
      font-size: 1.2em;
    }

    .index-img-description {
      font-size: 0.813em;
    }
  }
}

.show-gallery {
  .show-title {
    @extend .unity-title;
  }

  .show-content {
    padding-right: 0;
    padding-left: 0;

    &:nth-child(6n+1) {
      clear: both;
    }
    .show-pic{
      border-radius: 0 0 1.5em 1.5em;

      overflow: hidden;
      @media(min-width: 1200px){
        // height: 12em;
        overflow: hidden;
      }
      // @media(min-width: 769px)and(max-width: 1200px){
      //   height: 9em;
      // }
      // @media(max-width: 768px){
      //   height: 21em;
      // }
      // @media(max-width: $screen-xs){
      //   height: 10em!important;
      // }
    }

    .img {
      display: inline-block;
      width: 100%;
      border-radius: 0 0 1.5em 1.5em;
      display: flex;
      overflow: hidden;
      // height: auto;
      // border-radius: 1.5em;
      // transform: scale(1.5) translateY(-1%);
    }

    .show-content-inner {
      position: relative;
      padding: 0.3125em;
      z-index: 0;
    }

    .show-description {
      font-family: $main-font;
      font-size: 0.813em;
      padding: 0;
    }
  }
}
.index-content{
    margin-bottom: 1em;
    padding: 0;
  @media(min-width:$screen-xs)and(max-width:1024px){
    width: calc(100% / 2 - 1em) !important;
    min-height: unset;
    margin: 1em 0.5em;
    padding: 0;
  }
  @media(max-width: $screen-xs){
    width: 100%;
  }
}
.index-content-inner{
    position: relative;
    background: #E6E6E6 !important;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    -webkit-box-shadow: 0 1px 2px 0 #0000002e;
    box-shadow: 0 1px 2px 0 #0000002e;
    border-radius: 0 0 0 48px;
    padding-right: 1.5em;
    padding-left: 0;
    border: none !important;
    @media(min-width: 769px){
          margin-right: 1em;
    }
  &:hover{
      background: $theme-color-third!important;
      .index-content-title{
        a{
          color: #fff;
        }
      }
  }
}
.index-pic{
  height: 9.5em;
  overflow: hidden;
  border-radius: 0 0 60px !important;
  @media(max-width:1024px)and(min-width:900px){
    height: 12.5em;
  }
  @media(max-width: 768px){
    height: 10.5em;
  }
  .img-thumbnail{
    @media(max-width: 768px){

    }
    border: none !important;
    padding: 0;
    width: 100%;


    // border-radius: 0 0 60px !important;
    // border: none !important;
    // padding: 0;
    // height: 100%;
    // width: auto;
    // max-width: unset;
  }
}