:root {
  --lpa-dark-grey: #58595b;
  --lpa-med-grey: #818284;
  --lpa-light-grey: #d1d3d4;
  --lpa-dark-blue: #002B4E;
  --lpa-light-blue: #52A4D5;
}

main > div.elementor {
  margin-bottom: 3rem;
}

.lpa-description {
  line-height: 1.4;
}

.lpa-properties {
  width:100%;
  max-width:90rem;
  margin: 0 auto 3rem;
  padding: 0 20px;
}

.lpa-properties h2,
.lpa-properties h3 {
  margin-bottom: 2rem;
}

.lpa-filters {
  display:flex;
  grid-gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.lpa-filters button {
  font-size: 0.75rem;
  border: solid 1px var(--lpa-dark-blue);
  border-radius: 3rem;
  padding: 0.5rem 1rem;
  background: none;
  background-color: #fff;
  color:var(--lpa-dark-blue);
  font-weight:500;
}

.lpa-filters button.active {
  background-color: var(--lpa-dark-blue);
  color:#fff;
}

.lpa-feature-article {
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lpa-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.lpa-product-grid article {
  background-color: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
  padding: 1rem;
  border-radius: 0.25rem;
}

.lpa-product-grid article .image:not(.lpa-product-image) {
  height:0;
  padding-bottom: 100%;
}

.lpa-product-grid article h4,
.lpa-product-grid article h5 {
  margin-bottom: 0.5rem;
  color:#000;
}

.lpa-product-grid article h4 a,
.lpa-product-grid article h5 a {
  color:#000;
}

.lpa-product-grid article dl {
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-bottom: 0.25rem;
  line-height: 1.4;
  font-size: 0.75rem;
  grid-gap: 0.5rem;
}

.lpa-product-grid article .button {
  width:100%;
  margin-top:1rem;
}


.lpa-product .lpa-product-brand {
  font-size: 0.875rem;
  color:#818284;
  font-weight: 500;
  margin-top:0.25rem;
}


.lpa-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.lpa-spec-grid article h6 {
  color:var(--lpa-dark-blue);
  margin-bottom: 0.25rem;
}

.lpa-product-grid img,
.lpa-spec-grid img {
  max-width: 100%;
}

.lpa-project-grid.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.lpa-project-grid.col-3 {
  grid-template-columns: repeat(2, 1fr); /* 2 column for mobile */
}

.lpa-feature,
.lpa-feature-project {
  position: relative;
  line-height: 0;
}

.lpa-feature .background,
.lpa-feature-project .background {
  background-size: cover;
}

.lpa-feature .title,
.lpa-feature-project .title,
.lpa-brand .products article .title {
  position: absolute;
  width:100%;
  height: 100%;
  z-index: 20;
  top:0;
  padding: 1rem;
  display: grid;
  align-content: end;
  background: rgb(0,0,0,0.5);
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 50%); 
  color:#fff;
}

.lpa-feature .title a,
.lpa-feature-project .title a,
.lpa-brand .products article .title a{
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}



.lpa-grid-project {
  position:relative;
}

.lpa-grid-project.hide {
  display: none;
}

.lpa-grid-project .background {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #000;
  line-height: 0;
}

.lpa-grid-project .background .initial,
.lpa-grid-project .background .hover {
  transition: all 0.4s ease-in-out;
}

.lpa-grid-project .background .initial {
  position: relative;
  z-index: 2;
  transform: translateY(0%);
}

.lpa-grid-project .background .hover{
  position: absolute;
  top:0;
  z-index: 1;
  transform: translateY(100%);
}

.lpa-grid-project .title {
  position:absolute;
  top:0;
  padding: 1rem;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: end;
  background: rgb(0,0,0,0.5);
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 50%); 
}

.lpa-grid-project .title a,
.lpa-grid-project .title h4 {
  color:#fff;
}

.lpa-content-image {
  margin-bottom:1rem;
}

.lpa-content-title,
.lpa-content-title a {
  color:#000;
}

.lpa-slide-sidebar {
  position: fixed;
  top:0;
  right:0;
  height:100vh;
  width: 100vw;
  z-index: 1000000;
  background-color: #fff;
  transform: translateX(100%);
  transition: all 0.25s ease-in-out;
}

.lpa-slide-sidebar.active {
  transform: translateX(0%);
  overflow-y: scroll;
}

.lpa-slide-sidebar .lpa-slide-sidebar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.lpa-slide-sidebar .lpa-slide-sidebar-close {
  background: none;
  border: 0;;
}

.lpa-search .empty {
  text-align: center;
  font-size: 1.5rem;
  color: #818284;
  padding: 2rem;
  margin-bottom: 2rem;
}

.lpa-slider {
  position: relative;
}

.lpa-slider .lpa-slides {
  position: relative;
  z-index: 3;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

.lpa-slider  .lpa-slide-image {
  width:100%;
  height:100%;
  background-size: cover;
  background-position: center;
}

.lpa-slider .lpa-slider-overlay {
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  z-index: 4;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

.lpa-slider .lpa-pagination {
  position: absolute;
  z-index: 5;
  left: 1rem;
  bottom: 1rem;
  background-color: rgba(0,0,0,0.55);
  padding: 0.5rem;
  border-radius: 3rem;
  line-height: 0;
}

.lpa-slider .lpa-pagination .bullet {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2rem;
  background-color: rgba(255,255,255,0.25);
  border: 0;
  
}

.lpa-slider .lpa-pagination .bullet.glide__bullet--active {
  background-color: rgba(255,255,255,0.75);
}

.lpa-slider-header .lpa-slide-image {
  min-height: 80vh;
}

@media screen and (max-width: 39.9375rem) {
  .lpa-project-grid.sm-col-1 {
    grid-template-columns: 1fr;
  }

  .lpa-project-grid.sm-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 40rem) {

  main > div.elementor {
    margin-bottom: 5rem;
  }

  .lpa-properties {
    padding: 0 2rem;
    margin-bottom: 5rem;
  }

  .lpa-properties h2,
  .lpa-properties h3 {
    margin-bottom: 3rem;
  }

  .lpa-filters {
    margin-bottom: 2rem;
  }

  .lpa-filters button {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }

  .lpa-filters button:hover {
    cursor: pointer;
  }

  .lpa-filters button:not(.active):hover {
    background-color: var(--lpa-light-blue);
    color: var(--lpa-dark-blue);
  }

  .lpa-product-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.5rem;
  }

  .lpa-spec-grid {
    grid-gap: 1.5rem;
  }

  .lpa-spec-grid:not(.attributes) {
    grid-template-columns: repeat(6, 1fr);
  }

  .lpa-content-title a:hover {
    color:#58595B;
  }

  .lpa-slide-sidebar { 
    max-width: 50vw;
  }

  .lpa-product-grid article h4 {
    margin-bottom: 1rem;
  }

  .lpa-product-grid article dl {
    grid-gap: 0.875rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }

  .lpa-feature .title,
  .lpa-feature-project .title,
  .lpa-brand .products article .title {
    padding: 2rem;
  }

  .lpa-project-grid.col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lpa-grid-project:hover .background .initial{
    transform: translateY(-100%);
  }

  .lpa-grid-project:hover .background .hover{
    transform: translateY(0%);
  }

  .lpa-grid-project .title {
    padding: 2rem;
  }


  .lpa-project-grid.md-col-1 {
    grid-template-columns: 1fr;
  }

  .lpa-project-grid.md-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lpa-project-grid.md-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lpa-project-grid.md-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .lpa-project-grid.md-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
}

@media screen and (min-width: 75rem) {
  .lpa-slide-sidebar .grid.lg-col-1,
  .lpa-project-grid.lg-col-1 {
    grid-template-columns: 1fr;
  }

  .lpa-slide-sidebar .grid.lg-col-2,
  .lpa-project-grid.lg-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lpa-slide-sidebar .grid.lg-col-3,
  .lpa-project-grid.lg-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lpa-slide-sidebar .grid.lg-col-4,
  .lpa-project-grid.lg-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .lpa-slide-sidebar .grid.lg-col-5,
  .lpa-project-grid.lg-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .lpa-slide-sidebar .grid.lg-col-6,
  .lpa-project-grid.lg-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (min-width: 120rem) {
  .lpa-slide-sidebar .grid.xl-col-1,
  .lpa-project-grid.xl-col-1 {
    grid-template-columns: 1fr;
  }

  .lpa-slide-sidebar .grid.xl-col-2,
  .lpa-project-grid.xl-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lpa-slide-sidebar .grid.xl-col-3,
  .lpa-project-grid.xl-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lpa-slide-sidebar .grid.xl-col-4,
  .lpa-project-grid.xl-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .lpa-slide-sidebar .grid.xl-col-5,
  .lpa-project-grid.xl-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .lpa-slide-sidebar .grid.xl-col-6,
  .lpa-project-grid.xl-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}