@import "variables";

.categories-photo-selection {
  .cps-head {
    margin-bottom: 12px;
    font-size: 12px;
    .media-body {
      position: relative;
      @media (min-width: 1200px){
        padding-right: 260px;
      }
    }
    h1 {
      margin: 0 0 4px 0;
      padding: 0;
      font-size: 38px;
    }
    .cps-head-img {
      a {
        position: relative;
        border: 1px solid $color_success;
        display: block;
        width: 160px;
        height: 160px;
      }
      img {
        position: absolute; top: 50%; left: 50%;
        display: block;
        max-width: 98%;
        max-height: 98%;
        @include transform(translateX(-50%) translateY(-50%));
      }
    }
    .cps-head-sever {
      @media (min-width: 1200px){
        position: absolute; bottom: 0; right: 0;
        max-width: 240px;
        text-align: right;
      }
      color: $color_gray_50;
    }
  }
  .cps-sort {
    background: #d5e6f6;
    margin-bottom: 32px;
    padding: 12px 16px;
    font-size: 12px;
    color: $color_gray_70;
    @media (max-width: 991px) {
      .col-xs-12 + .col-xs-12 { margin-top: 12px; }
    }
  }
  .cps-gallery {
    .cps-gallery-list {
      position: relative;
      overflow: hidden;
      margin: 0 -12px;
      @media (max-width: 767px){
        margin: 0 -8px;
      }
      padding: 0;
      list-style: none;
      & > li {
        position: relative;
        float: left;
        width: 16.6666%;
        //width: 12.5%;
        margin-bottom: 24px;
        padding: 0 12px;
        //@media (max-width: 1399px){ width: 16.6666%; }
        @media (max-width: 1199px){ width: 25%; }
        @media (max-width: 991px){ width: 33.3333%; }
        @media (max-width: 767px){
          width: 50%;
          margin-bottom: 16px;
          padding: 0 8px;
        }

        &:first-child {
          .image {
            border: 1px solid $color_success;
          }
        }

        .image {
          background: $color_gray_10;// url(../images/photo-till.jpg) repeat 0 0;
          border: 1px solid $color_gray_20;
          position: relative;
          .icon {
            position: absolute; top: 4px; left: 4px;
            z-index: 5;
            font-size: 24px;
          }
          .bg {
            display: block;
            width: 100%;
          }
          .img {
            position: absolute; top: 50%; left: 50%;
            display: block;
            max-width: 100%;
            max-height: 100%;
            @include transform(translateX(-50%) translateY(-50%));
          }
        }
        .on-hover {
          position: absolute; bottom: 12px; left: 12px; right: 12px;
          margin: 0;
          padding: 0;
          list-style: none;
          text-align: center;
          display: none;
          & > li + li {
            margin-top: 8px;
          }
        }

        &.active {
          .image {
            border: 1px solid $color_success;
            .icon {
              color: #2db82d;
            }
          }
        }
        &:hover {
          .image {
            opacity: 0.6;
          }
          .on-hover {
            display: block;
          }
        }
      }
    }
  }
}