/* INCLUDE THE VARIABLES AT THE TOP OF THE FILE, AS IT'S USED IN ALL STYLES BELOW */


.featured-projects-section>.row-fluid {
  max-width: 100%;
}

.projects-outer-wrapper {
  padding: 3em 0;
}

.projects-listing-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.projects-filter-links a {
  background: #1c0066;
  color: #ffffff;
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  padding: 1em;
  text-align: center;
  white-space: unset;
  word-wrap: unset;
}

.projects-filter-links a:hover,
.projects-filter-links a:active,
.projects-filter-links a.active {
  background: #36ffe0;
  color: #1c0066;
}

.clear-filters {
  cursor: pointer;
  display: none;
  background: #0000ff;
  color: #ffffff;
  padding: 1em;
}

.clear-filters i {
  margin-right: 8px;
}

.projects-wrapper {
  left: -40px;
  width: 100vw;
}

.projects-section-title {
  margin-bottom: 60px;
}

.projects-wrapper .slick-list {
  overflow: visible;
}

.project-slide,
.project-slide.slick-slide {
  margin-left: 140px;
  min-height: 375px;
  min-width: 450px;
  padding: 3px;
  width: 450px !important;
}

.projects-listing-wrapper .project-slide {
  margin: 30px 0 30px 87.5px;
  min-width: unset;
  width: auto !important;
}

.project-item {
  width: 40%;
}

.project-item:nth-of-type(odd) {
  margin-right: 5%;
}

.project-item:nth-of-type(6n+3) {
  margin-left: 7.5%;
}

.project-item:nth-of-type(6n+5) {
  margin-left: 15%;
}

.projects-listing-wrapper.filtered .project-item {
  margin-left: 0;
  margin-right: 5%;
}

.project-slide__inner {
  align-items: center;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  min-height: 375px;
  position: relative;
  width: 100%;
}

.project-image {
  left: -90px;
  position: relative;
  width: 30%;
}

.project-image img {
  width: 180px;
}

.project-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  min-height: 375px;
  padding: 40px 40px 40px 0;
  text-align: left;
  width: 70%;
}

.project-meta h6 {
  font-size: 12px;
}

.project-meta a {
  color: #1c0066;
}

.project-meta a:hover {
  color: #36ffe0;
}

.project-title h4 {
  font-size: 1.25em;
}

.project-content .button {
  max-width: 175px;
}

.projects-section-button {
  margin-top: 3em;
  text-align: center;
}

@media (max-width: 1279px) {
  .project-item {
    width: 47.5%;
  }

  .project-item:nth-of-type(6n+3),
  .project-item: nth-of-type(6n+5) {
    margin-left: unset;
  }

  .projects-listing-wrapper.filtered .project-item {
    margin-right: 2.5%;
  }
}

@media (max-width: 1279px) and (orientation: portrait) {
  .project-item {
    width: 100%;
  }

  .project-item,
  .project-item:nth-of-type(odd),
  .projects-listing-wrapper.filtered .project-item {
    margin-right: 0;
  }
}

@media (max-width: 896px) and (max-height: 766px) and (orientation: landscape) {
  .projects-listing-wrapper {
    justify-content: stretch;
  }

  .projects-listing-wrapper .project-slide {
    height: 100%;
    min-height: unset;
  }

  .project-item {
    margin-bottom: 30px;
  }

  .projects-listing-wrapper .project-image {
    left: -65px;
  }

  .projects-listing-wrapper .project-image img {
    width: 130px;
  }

  .project-meta h6 {
    font-size: 10px;
  }

  .project-title h4 {
    font-size: 1.1em;
  }
}

@media (max-width: 766px) and (max-height: 896px) and (orientation: portrait) {
  .projects-wrapper {
    left: 0;
    width: auto;
  }

  .projects-wrapper .slick-list {
    margin: 0 !important;
  }

  .projects-wrapper .slick-track {
    justify-content: space-between;
  }

  .projects-wrapper .project-slide.slick-slide,
  .projects-listing-wrapper .project-slide {
    margin: 0 25px;
    min-width: unset !important;
    max-width: 400px;
    width: 400px !important;
  }

  .projects-listing-wrapper .project-slide {
    margin: 0 0 30px 0;
    max-width: 100%;
    width: 100% !important;
  }

  .projects-wrapper .project-image,
  .projects-listing-wrapper .project-image {
    display: none;
    width: 0;
  }

  .projects-wrapper .project-content,
  .projects-listing-wrapper .project-content {
    padding: 40px;
    width: 100%;
  }
}

@media (max-width: 896px) {
  .project-item,
  .project-item:nth-of-type(odd),
  .projects-listing-wrapper.filtered .project-item {
    margin-right: 0;
  }
}