.grid {
  overflow: hidden;
}

.grid-item {
  overflow: hidden;
  position: relative;
  transition: none;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* -------- grid ---------- */
.grid-item.width-20 {
  width: 20%;
}

.grid-item.width-25 {
  width: 25%;
}

.grid-item.width-30 {
  width: 30%;
}

.grid-item.width-35 {
  width: 35%;
}

.grid-item.width-40 {
  width: 40%;
}

.grid-item.width-50 {
  width: 50%;
}

.grid-item.width-60 {
  width: 60%;
}

.grid-item.width-66 {
  width: 66.66%;
}

.grid-item.width-70 {
  width: 70%;
}

.grid-item.width-75 {
  width: 75%;
}

.grid-item.width-80 {
  width: 78%;
}

.grid-item.width-100 {
  width: 100%;
}

/* -------- grid ---------- */
.grid-1 .grid-item, .grid-1 .grid-sizer {
  width: 100%;
}

.grid-2 .grid-item, .grid-2 .grid-sizer {
  width: 50%;
}

.grid-3 .grid-item, .grid-3 .grid-sizer {
  width: 33.33%;
}

.grid-4 .grid-item, .grid-4 .grid-sizer {
  width: 25%;
}

.grid-5 .grid-item, .grid-5 .grid-sizer {
  width: 20%;
}

.grid-2 .grid-sizer.small {
  width: 1%;
}

.grid-3 .grid-sizer.small {
  width: 1%;
}

.grid-4 .grid-sizer.small {
  width: 1%;
}

@media screen and (max-width: 991px) {
  .grid-4 .grid-item, .grid-4 .grid-sizer,
  .grid-5 .grid-item, .grid-5 .grid-sizer {
    width: 33.33%;
  }
  .grid-item.width-20,
  .grid-item.width-25,
  .grid-item.width-30,
  .grid-item.width-35,
  .grid-item.width-40,
  .grid-item.width-50,
  .grid-item.width-60,
  .grid-item.width-66,
  .grid-item.width-70,
  .grid-item.width-75,
  .grid-item.width-80 {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .grid-3 .grid-item, .grid-3 .grid-sizer,
  .grid-4 .grid-item, .grid-4 .grid-sizer,
  .grid-5 .grid-item, .grid-5 .grid-sizer {
    width: 50%;
  }
  .grid-item.width-20,
  .grid-item.width-25,
  .grid-item.width-30,
  .grid-item.width-35,
  .grid-item.width-40,
  .grid-item.width-50,
  .grid-item.width-60,
  .grid-item.width-66,
  .grid-item.width-70,
  .grid-item.width-75,
  .grid-item.width-80 {
    width: 50%;
  }
}

@media screen and (max-width: 500px) {
  .grid-2 .grid-item, .grid-2 .grid-sizer,
  .grid-3 .grid-item, .grid-3 .grid-sizer,
  .grid-4 .grid-item, .grid-4 .grid-sizer,
  .grid-5 .grid-item, .grid-5 .grid-sizer {
    width: 100%;
  }
  .grid-item.width-20,
  .grid-item.width-25,
  .grid-item.width-30,
  .grid-item.width-35,
  .grid-item.width-40,
  .grid-item.width-50,
  .grid-item.width-60,
  .grid-item.width-66,
  .grid-item.width-70,
  .grid-item.width-75,
  .grid-item.width-80 {
    width: 100%;
  }
}

.gutter-0 {
  margin: 0 0;
}

.gutter-0 .grid-item {
  padding: 0;
}

.gutter-5 {
  margin: 0 -0.3125rem;
}

.gutter-5 .grid-item {
  padding: 0.3125rem;
}

.gutter-10 {
  margin: 0 -0.625rem;
}

.gutter-10 .grid-item {
  padding: 0.625rem;
}

.gutter-15 {
  margin: 0 -0.9375rem;
}

.gutter-15 .grid-item {
  padding: 0.9375rem;
}

.gutter-20 {
  margin: 0 -1.25rem;
}

.gutter-20 .grid-item {
  padding: 1.25rem;
}

.gutter-25 {
  margin: 0 calc(-4.375rem - 0.32143vw);
}

@media (min-width: 1400px) {
  .gutter-25 {
    margin: 0 -1.5625rem;
  }
}

.gutter-25 .grid-item {
  padding: calc(1.28125rem + 0.32143vw);
}

@media (min-width: 1400px) {
  .gutter-25 .grid-item {
    padding: 1.5625rem;
  }
}

.gutter-30 {
  margin: 0 calc(-4.375rem - 0.64286vw);
}

@media (min-width: 1400px) {
  .gutter-30 {
    margin: 0 -1.875rem;
  }
}

.gutter-30 .grid-item {
  padding: calc(1.3125rem + 0.64286vw);
}

@media (min-width: 1400px) {
  .gutter-30 .grid-item {
    padding: 1.875rem;
  }
}

.gutter-35 {
  margin: 0 calc(-4.375rem - 0.96429vw);
}

@media (min-width: 1400px) {
  .gutter-35 {
    margin: 0 -2.1875rem;
  }
}

.gutter-35 .grid-item {
  padding: calc(1.34375rem + 0.96429vw);
}

@media (min-width: 1400px) {
  .gutter-35 .grid-item {
    padding: 2.1875rem;
  }
}

.gutter-40 {
  margin: 0 calc(-4.375rem - 1.28571vw);
}

@media (min-width: 1400px) {
  .gutter-40 {
    margin: 0 -2.5rem;
  }
}

.gutter-40 .grid-item {
  padding: calc(1.375rem + 1.28571vw);
}

@media (min-width: 1400px) {
  .gutter-40 .grid-item {
    padding: 2.5rem;
  }
}

.gutter-45 {
  margin: 0 calc(-4.375rem - 1.60714vw);
}

@media (min-width: 1400px) {
  .gutter-45 {
    margin: 0 -2.8125rem;
  }
}

.gutter-45 .grid-item {
  padding: calc(1.40625rem + 1.60714vw);
}

@media (min-width: 1400px) {
  .gutter-45 .grid-item {
    padding: 2.8125rem;
  }
}

.gutter-50 {
  margin: 0 calc(-4.375rem - 1.92857vw);
}

@media (min-width: 1400px) {
  .gutter-50 {
    margin: 0 -3.125rem;
  }
}

.gutter-50 .grid-item {
  padding: calc(1.4375rem + 1.92857vw);
}

@media (min-width: 1400px) {
  .gutter-50 .grid-item {
    padding: 3.125rem;
  }
}

.gutter-55 {
  margin: 0 calc(-4.375rem - 2.25vw);
}

@media (min-width: 1400px) {
  .gutter-55 {
    margin: 0 -3.4375rem;
  }
}

.gutter-55 .grid-item {
  padding: calc(1.46875rem + 2.25vw);
}

@media (min-width: 1400px) {
  .gutter-55 .grid-item {
    padding: 3.4375rem;
  }
}

.gutter-60 {
  margin: 0 calc(-4.375rem - 2.57143vw);
}

@media (min-width: 1400px) {
  .gutter-60 {
    margin: 0 -3.75rem;
  }
}

.gutter-60 .grid-item {
  padding: calc(1.5rem + 2.57143vw);
}

@media (min-width: 1400px) {
  .gutter-60 .grid-item {
    padding: 3.75rem;
  }
}

.gutter-70 {
  margin: 0 calc(-4.375rem - 3.21429vw);
}

@media (min-width: 1400px) {
  .gutter-70 {
    margin: 0 -4.375rem;
  }
}

.gutter-70 .grid-item {
  padding: calc(1.5625rem + 3.21429vw);
}

@media (min-width: 1400px) {
  .gutter-70 .grid-item {
    padding: 4.375rem;
  }
}

.gutter-80 {
  margin: 0 calc(-4.375rem - 3.85714vw);
}

@media (min-width: 1400px) {
  .gutter-80 {
    margin: 0 -5rem;
  }
}

.gutter-80 .grid-item {
  padding: calc(1.625rem + 3.85714vw);
}

@media (min-width: 1400px) {
  .gutter-80 .grid-item {
    padding: 5rem;
  }
}

.gutter-90 {
  margin: 0 calc(-4.375rem - 4.5vw);
}

@media (min-width: 1400px) {
  .gutter-90 {
    margin: 0 -5.625rem;
  }
}

.gutter-90 .grid-item {
  padding: calc(1.6875rem + 4.5vw);
}

@media (min-width: 1400px) {
  .gutter-90 .grid-item {
    padding: 5.625rem;
  }
}

.gutter-100 {
  margin: 0 calc(-4.375rem - 5.14286vw);
}

@media (min-width: 1400px) {
  .gutter-100 {
    margin: 0 -6.25rem;
  }
}

.gutter-100 .grid-item {
  padding: calc(1.75rem + 5.14286vw);
}

@media (min-width: 1400px) {
  .gutter-100 .grid-item {
    padding: 6.25rem;
  }
}



.grid-item.hidden {
  visibility: hidden;
  width: 0px;
  height: 0px;
  margin: 0px;
  padding: 0px;
}

/*-------- Filter Button ---------*/
.portfolio-filters-content {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  z-index: 1;
}

.portfolio-filters-content .filters-button-group {
  text-align: center;
  margin: 0 auto;
  display: inline-block;
  border-bottom: 0.0625rem solid var(--color-light);
}

.portfolio-filters-content .filters-button-group .button {
  position: relative;
  background: transparent;
  border: 0px;
  font-size: 0.75rem;
  line-height: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-three);
  border-bottom: 0.1875rem solid transparent;
  padding: 0rem 1.25rem 1.25rem 1.25rem;
  margin-bottom: -2px;
  cursor: pointer;
  outline: none;
  transition: all .5s ease-in-out;
}

.portfolio-filters-content .filters-button-group .button.is-checked,
.portfolio-filters-content .filters-button-group .button:hover {
  color: var(--color-one);
  outline: none;
  border-color: var(--color-one);
}

.portfolio-filters-content .filters-button-group .button .filter-count {
  position: absolute;
  top: 0rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-white);
  transition: all .5s ease-in-out;
}

.portfolio-filters-content .filters-button-group .button .filter-count {
  opacity: 0;
  visibility: hidden;
}

.portfolio-filters-content .filters-button-group .button:first-child.is-checked .filter-count {
  opacity: 0;
  visibility: hidden;
}

.portfolio-filters-content .filters-button-group .button.is-checked .filter-count {
  opacity: 1;
  visibility: visible;
}


/*-------- Grid Gallery ---------*/
.grid-item img.item_image{
    width: 100%;
    transition: all 0.5s ease;
}
.grid-item .wptb-item--inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.grid-item .wptb-item--holder{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-one-rgb), 0.8);
}

.grid-item .wptb-item--meta{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 30px 30px;
    text-align: center;
}

.grid-item .wptb-item--meta h3 {
    position: relative;
    padding-top: 10px;
    letter-spacing: 0px;
    color: var(--color-one);
    margin-bottom: 5px;
}

.grid-item .wptb-item--meta h3 a {
    color: var(--color-white);
}

.grid-item .wptb-item--meta p {
    color: var(--color-white); 
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.grid-item .wptb-item--holder .wptb-item--divider {
    display: flex;
    width: 120px;
    height: 1px;
    background-color: var(--color-white);
    margin: 10px auto 15px;
}