/* ---------------------------------------------------------------------------------
------------------------------   PORTFOLIO   ----------------------------------
------------------------------------------------------------------------------------*/

/* ------------------------
-----   Grid   -----
------------------------------*/

/* General rules */

#portfolio-holder {
  /*width: calc(100% - 1px);*/
  overflow: hidden;
}
#portfolio {
  overflow: hidden;
  width: 110%;
  background: transparent;
}
#portfolio .item {
  list-style: none;
  margin: 0;
  float: left;
  position: relative;
  overflow: hidden;
  display: block;
}
#portfolio .item img {
  width: 100%;
  position: relative;
}
#portfolio .item .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
}
#portfolio .item .caption > div {
  display: table;
  width: 100%;
  height: 100%;
}
#portfolio .item .caption > div > div {
  display: table-cell;
  vertical-align: middle;
}

#portfolio .item .caption h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #1d1d1d;
  margin-bottom: 0;
  text-transform: uppercase;
}
#portfolio .item .caption span {
  color: #a7a7a7;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  display: inline-block;
  text-transform: uppercase;
}
#portfolio .item .caption span:after {
  content: "";
  display: block;
  height: 3px;
  width: 27px;
  background: #1d1d1d;
  text-align: center;
  margin: 25px auto 0;
}

/* Thumbnail bg color */

#portfolio.light .item .caption {
  background: #fff;
}
#portfolio.dark .item .caption {
  background: #333;
}
#portfolio.dark .item .caption * {
  color: #fff !important;
}
#portfolio .item .caption span:after {
  background: #666;
}

/* Excerpt thumbnails */

#portfolio .item span.excerpt,
#portfolio.show-excerpt .item span.category {
  display: none;
}
#portfolio.show-excerpt .item span.excerpt {
  display: inline-block;
}
#portfolio.show-excerpt .item .caption span {
  color: #838383;
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  width: 70%;
  margin-top: 20px;
}
#portfolio.show-excerpt .item .caption span:after {
  margin-top: 30px;
}

/* Style one animation - just css */

#portfolio.style-one .item .caption {
  -webkit-transform: translate3d(0px, -100%, 0px);
  -ms-transform: translate3d(0px, -100%, 0px);
  transform: translate3d(0px, -100%, 0px);
}
.no-touch #portfolio.style-one .item:hover .caption {
  -webkit-transform: translate3d(0px, 0, 0px);
  -ms-transform: translate3d(0px, 0, 0px);
  transform: translate3d(0px, 0, 0px);
}
.no-touch #portfolio.style-one .item:hover img {
  -webkit-transform: translate3d(0px, 100%, 0px);
  -ms-transform: translate3d(0px, 100%, 0px);
  transform: translate3d(0px, 100%, 0px);
}
.no-touch #portfolio.style-one .item .caption,
.no-touch #portfolio.style-one .item img {
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

.ie #portfolio.style-one .item .caption {
  top: -100%;
}
.ie #portfolio.style-one .item:hover .caption {
  top: 0;
}
.ie #portfolio.style-one .item:hover img {
  top: 100%;
}

/* Style two animation - css + js */

#portfolio.style-two .item .caption {
  display: none;
}
#portfolio.style-two .item .caption > div {
  position: relative;
}

/* Style three animation (and restyle) - just css */

#portfolio.style-three .caption {
  opacity: 0;
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}
#portfolio.style-three.light .item .caption {
  background: #f7f7f7;
  background: rgba(255, 255, 255, 0.9);
}
#portfolio.style-three.dark .item .caption {
  background: #222;
  background: rgba(0, 0, 0, 0.7);
}
#portfolio.style-three .item h3 {
  position: relative;
  top: 50px;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
#portfolio.style-three .item span {
  position: relative;
  top: 60px;
  -webkit-transition: all 220ms linear;
  transition: all 220ms linear;
}
#portfolio.style-three .item img {
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

.no-touch #portfolio.style-three .item:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.no-touch #portfolio.style-three .item:hover .caption {
  opacity: 1;
}
.no-touch #portfolio.style-three .item:hover .caption h3,
.no-touch #portfolio.style-three .item:hover .caption span {
  top: 0;
}

/* Style four animation (and restyle) - just css */

#portfolio.style-four .caption {
  opacity: 0;
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}
#portfolio.style-four.light .item .caption {
  background: #f7f7f7;
  background: rgba(255, 255, 255, 0.9);
}
#portfolio.style-four.dark .item .caption {
  background: #222;
  background: rgba(0, 0, 0, 0.7);
}
.no-touch #portfolio.style-four .item:hover .caption {
  opacity: 1;
}

/* Grid fixes */

.folio-grid.cols-four .item {
  width: calc(91% / 4);
}
.folio-grid.cols-three .item {
  width: calc(91% / 3);
}
.folio-grid.cols-two .item {
  width: calc(91% / 2);
}

/* ------------------------
-----   Pagination   -----
------------------------------*/

.pagination,
.woocommerce-pagination {
  margin: 90px 0 -50px;
  text-align: center;
}
.pagination a,
.woocommerce-pagination .page-numbers {
  padding: 0 10px 18px;
  margin: 0 12px;
  color: #1d1d1d;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  border-bottom: 3px solid transparent;
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}
.pagination .active,
.woocommerce-pagination .current {
  border-color: #1d1d1d;
  padding-bottom: 14px;
}
.pagination .none,
.pagination .active,
.woocommerce-pagination .current {
  cursor: default;
  pointer-events: none;
}
.pagination a:hover,
.woocommerce-pagination a:hover {
  color: #9e8348;
  border-color: #9e8348;
  padding-bottom: 14px;
}

.woocommerce-pagination li {
  list-style-type: none;
  display: inline;
}
.woocommerce-pagination .next,
.woocommerce-pagination .prev {
  font-family: "Lato", sans-serif;
  font-size: 15px;
  border-bottom: 0 !important;
}

/* ------------------------
-----   Filters   -----
------------------------------*/

#filter .responsive-filter {
  display: none;
}
#filter {
  border-top: 1px solid #eaeaea;
  height: 100px;
  width: 100%;
  text-align: center;
  padding-top: 34px;
  display: none;
}
#filter li {
  list-style: none;
  font-size: 13px;
  line-height: 13px;
  padding: 8px 13px;
  margin-left: 50px;
  text-transform: uppercase;
  display: inline-block;
}
#filter li:first-child {
  margin-left: 0;
}
#filter li a {
  color: #1d1d1d;
  font-weight: 400;
}
#filter li a:hover {
  color: #a0a0a0;
}
#filter li a.selected {
  color: #9e8348;
  cursor: default;
  pointer-events: none;
}

#filter-opener {
  display: block;
  right: 26px;
  height: 24px;
  position: absolute;
  width: 31px;
  margin: 3px 26px 0 0;
}
#filter-opener .krown-svg {
  left: -15px;
  position: relative;
  top: -18px;
}
#filter-opener:hover .krown-svg,
#filter-opener.opened {
  fill: #b99d61;
}