/*
 * Shortcode: gallery.scss
 * -----------------------------------------------
*/
.gallery-items-rounded {
  .effect-wrapper {
    border-radius: 6px;
  }
}


//3. gallery shortcode
.tm-sc-gallery {
  .tm-gallery {
    border: 3px solid #fff;
    border-top-width: 6px;
    border-bottom-width: 6px;

    .icons-holder-inner {
      .styled-icons {
        a {
          width: 36px;
          display: inline-block;
          height: 36px;
          line-height: 36px;
        }
      }
    }
  }
  .text-holder {
    .title {
      font-size: 18px;
      text-transform: uppercase;
    }
    .date,
    .category {
      color: #aaa;
      font-size: 12px;
    }
  }
  .overlay-shade.shade-white + .text-holder {
    .date,
    .category {
      color: #777;
    }
  }
  .overlay-shade.shade-theme-colored1 + .text-holder,
  .overlay-shade.shade-theme-colored2 + .text-holder {
    .title,
    .date,
    .category {
      color: #fff;
    }
  }

  &.tm-sc-gallery-masonry-tiles {
    .has-masonry-tiles-fixed-image-size {
      &.isotope-layout {
        .isotope-item {
          .isotope-item-inner {
            height: 100%;
            .tm-gallery-inner {
              height: 100%;
              .thumb {
                height: 100%;
                a {
                  height: 100%;
                  img {
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }


  &.gallery-simple {
    .tm-gallery {
      position: relative;
      overflow: hidden;
      .thumb {
        overflow: hidden;
        position: relative;
        img {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          transform: scale(1);
          -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
          transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
        }
      }
      .tm-gallery-content-wrapper {
        .tm-gallery-content {
          .tm-gallery-content-inner {
            .title-holder {
              .title {
                text-transform: uppercase;
              }
            }
            .title, .categories {
            }
            .category-holder {
              overflow: hidden;
              .categories {
                font-size: 14px;
                list-style: none;
                a {
                  display: inline-block;
                  padding-right: 5px;
                  margin-right: 10px;
                  position: relative;
                  color: #999;
                  font-weight: $font-weight-normal;
                  &:last-child {
                    padding-right: 0;
                    &:after {
                      content: '';
                    }
                  }
                  &:after {
                    content: ',';
                    position: absolute;
                    top: 0;
                    right: 0;
                  }
                  &:hover {
                    color: #666;
                  }
                }
              }
            }
          }
        }
      }
      &:hover {
        .thumb {
          img {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            transform: scale(1.1);
          }
        }
        .tm-gallery-content-wrapper {
          .tm-gallery-content {
            .tm-gallery-content-inner {
              .title {
              }
              .categories {
              }
            }
          }
        }
      }
    }
    &.tm-sc-gallery-masonry-tiles {
      .tm-gallery {
        position: relative;
        overflow: hidden;
        .tm-gallery-content-wrapper {
          box-sizing: border-box;
          padding: 20px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          .tm-gallery-content {
            display: table;
            height: 100%;
            width: 100%;
            overflow: hidden;
            &:after {
              content: '';
              background-color: rgba(255, 255, 255, 0.95);
              position: absolute;
              top: 20px;
              left: 20px;
              bottom: 20px;
              right: 20px;
              opacity: 0;
              -webkit-transform-origin: 0 0;
              -moz-transform-origin: 0 0;
              transform-origin: 0 0;
              -webkit-transform: scaleX(0);
              -moz-transform: scaleX(0);
              transform: scaleX(0);
              -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
              transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
            }
            .tm-gallery-content-inner {
              display: table-cell;
              padding: 20px;
              height: 100%;
              width: 100%;
              position: relative;
              vertical-align: bottom;
              z-index: 9;
              .title-holder {
                overflow: hidden;
                .title {
                  text-transform: uppercase;
                }
              }
              .title, .categories {
                position: relative;
                opacity: 0;
                -webkit-transform: translate3d(-100%, 0, 0);
                -moz-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
                -webkit-transition: -webkit-transform .4s, opacity .2s;
                transition: transform .4s, opacity .2s;
                will-change: transform, opacity;
              }
              .category-holder {
                overflow: hidden;
                .categories {
                  font-size: 14px;
                  list-style: none;
                  a {
                    display: inline-block;
                    padding-right: 5px;
                    margin-right: 10px;
                    position: relative;
                    color: #999;
                    font-weight: $font-weight-normal;
                    &:last-child {
                      padding-right: 0;
                      &:after {
                        content: '';
                      }
                    }
                    &:after {
                      content: ',';
                      position: absolute;
                      top: 0;
                      right: 0;
                    }
                    &:hover {
                      color: #666;
                    }
                  }
                }
              }
            }
          }
        }
        &:hover {
          .tm-gallery-content-wrapper {
            .tm-gallery-content {
              &:after {
                opacity: 1;
                -webkit-transform: scaleX(1);
                -moz-transform: scaleX(1);
                transform: scaleX(1);
                -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
                transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
              }
              .tm-gallery-content-inner {
                .title {
                  opacity: 1;
                  -webkit-transform: translate3d(0, 0, 0);
                  -moz-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
                  -webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
                  transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
                }
                .categories {
                  opacity: 1;
                  -webkit-transform: translate3d(0, 0, 0);
                  -moz-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
                  -webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
                  transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
                }
              }
            }
          }
        }
      }
    }
  }


  &.gallery-classic {
    .tm-gallery {
      position: relative;
      overflow: hidden;
      .thumb {
        overflow: hidden;
        position: relative;
        img {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          transform: scale(1);
          -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
          transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
        }
      }
      .tm-gallery-content-wrapper {
        .tm-gallery-content {
          background-color: #fff;
          border: 1px solid rgba(234, 234, 234, 0.58);
          padding: 20px 10px;
          text-align: center;
          .tm-gallery-content-inner {
            .title-holder {
              .title {
                text-transform: uppercase;
              }
            }
            .title, .categories {
            }
            .category-holder {
              overflow: hidden;
              .categories {
                font-size: 14px;
                list-style: none;
                a {
                  display: inline-block;
                  padding-right: 5px;
                  margin-right: 10px;
                  position: relative;
                  color: #999;
                  font-weight: $font-weight-normal;
                  &:last-child {
                    padding-right: 0;
                    &:after {
                      content: '';
                    }
                  }
                  &:after {
                    content: ',';
                    position: absolute;
                    top: 0;
                    right: 0;
                  }
                  &:hover {
                    color: #666;
                  }
                }
              }
            }
          }
        }
      }
      &:hover {
        .thumb {
          img {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            transform: scale(1.1);
          }
        }
        .tm-gallery-content-wrapper {
          .tm-gallery-content {
            .tm-gallery-content-inner {
              .title {
              }
              .categories {
              }
            }
          }
        }
      }
    }
    &.tm-sc-gallery-masonry-tiles {
      .tm-gallery {
        position: relative;
        overflow: hidden;
        .tm-gallery-content-wrapper {
          box-sizing: border-box;
          padding: 20px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          .tm-gallery-content {
            background-color: transparent;
            border: none;
            display: table;
            height: 100%;
            width: 100%;
            overflow: hidden;
            &:after {
              content: '';
              background-color: rgba(255, 255, 255, 0.95);
              position: absolute;
              top: 20px;
              left: 20px;
              bottom: 20px;
              right: 20px;
              opacity: 0;
              -webkit-transform-origin: 0 0;
              -moz-transform-origin: 0 0;
              transform-origin: 0 0;
              -webkit-transform: scaleX(0);
              -moz-transform: scaleX(0);
              transform: scaleX(0);
              -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
              transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
            }
            .tm-gallery-content-inner {
              display: table-cell;
              padding: 20px;
              height: 100%;
              width: 100%;
              position: relative;
              vertical-align: bottom;
              z-index: 9;
              .title-holder {
                overflow: hidden;
                .title {
                  text-transform: uppercase;
                }
              }
              .title, .categories {
                position: relative;
                opacity: 0;
                -webkit-transform: translate3d(-100%, 0, 0);
                -moz-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
                -webkit-transition: -webkit-transform .4s, opacity .2s;
                transition: transform .4s, opacity .2s;
                will-change: transform, opacity;
              }
              .category-holder {
                overflow: hidden;
                .categories {
                  font-size: 14px;
                  list-style: none;
                  a {
                    display: inline-block;
                    padding-right: 5px;
                    margin-right: 10px;
                    position: relative;
                    color: #999;
                    font-weight: $font-weight-normal;
                    &:last-child {
                      padding-right: 0;
                      &:after {
                        content: '';
                      }
                    }
                    &:after {
                      content: ',';
                      position: absolute;
                      top: 0;
                      right: 0;
                    }
                    &:hover {
                      color: #666;
                    }
                  }
                }
              }
            }
          }
        }
        &:hover {
          .tm-gallery-content-wrapper {
            .tm-gallery-content {
              &:after {
                opacity: 1;
                -webkit-transform: scaleX(1);
                -moz-transform: scaleX(1);
                transform: scaleX(1);
                -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
                transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
              }
              .tm-gallery-content-inner {
                .title {
                  opacity: 1;
                  -webkit-transform: translate3d(0, 0, 0);
                  -moz-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
                  -webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
                  transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
                }
                .categories {
                  opacity: 1;
                  -webkit-transform: translate3d(0, 0, 0);
                  -moz-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
                  -webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
                  transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
                }
              }
            }
          }
        }
      }
    }
  }


  &.gallery-modern {
    .tm-gallery {
      position: relative;
      overflow: hidden;
      .thumb {
        overflow: hidden;
        position: relative;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
        -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
        transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
      }
      .tm-gallery-content-wrapper {
        box-sizing: border-box;
        padding: 20px;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        .tm-gallery-content {
          display: table;
          height: 100%;
          width: 100%;
          overflow: hidden;
          &:after {
            content: '';
            background-color: rgba(255, 255, 255, 0.95);
            position: absolute;
            top: 20px;
            left: 20px;
            bottom: 20px;
            right: 20px;
            opacity: 0;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleX(0);
            -moz-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
            transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s 0.5s;
          }
          .tm-gallery-content-inner {
            display: table-cell;
            padding: 20px;
            height: 100%;
            width: 100%;
            position: relative;
            vertical-align: bottom;
            z-index: 9;
            .title-holder {
              overflow: hidden;
              .title {
                text-transform: uppercase;
              }
            }
            .title, .categories {
              position: relative;
              opacity: 0;
              -webkit-transform: translate3d(-100%, 0, 0);
              -moz-transform: translate3d(-100%, 0, 0);
              transform: translate3d(-100%, 0, 0);
              -webkit-transition: -webkit-transform .4s, opacity .2s;
              transition: transform .4s, opacity .2s;
              will-change: transform, opacity;
            }
            .category-holder {
              overflow: hidden;
              .categories {
                font-size: 14px;
                list-style: none;
                a {
                  display: inline-block;
                  padding-right: 5px;
                  margin-right: 10px;
                  position: relative;
                  color: #999;
                  font-weight: $font-weight-normal;
                  &:last-child {
                    padding-right: 0;
                    &:after {
                      content: '';
                    }
                  }
                  &:after {
                    content: ',';
                    position: absolute;
                    top: 0;
                    right: 0;
                  }
                  &:hover {
                    color: #666;
                  }
                }
              }
            }
          }
        }
      }
      &:hover {
        .thumb {
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          transform: scale(1.1);
        }
        .tm-gallery-content-wrapper {
          .tm-gallery-content {
            &:after {
              opacity: 1;
              -webkit-transform: scaleX(1);
              -moz-transform: scaleX(1);
              transform: scaleX(1);
              -webkit-transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
              transition: transform 0.5s cubic-bezier(.57,.04,.06,.84), opacity 0s;
            }
            .tm-gallery-content-inner {
              .title {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                -moz-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                -webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
                transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.1s, opacity 0.2s 0.1s;
              }
              .categories {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                -moz-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                -webkit-transition: -webkit-transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
                transition: transform 0.6s cubic-bezier(.57,.04,.06,.84) 0.2s, opacity 0.2s 0.2s;
              }
            }
          }
        }
      }
    }
  }
}