/* TM CMS Page */
div.the-avenue-logo {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

div.the-avenue-logo img {
      width: 75%;
}

section#the-avenue {
  background-color: var(--color-coat);
  z-index: -5;
}

section#the-avenue div.content .title-description {
  display: flex;
  margin-bottom: 50px;
  
}

div.the-avenue-homes

  {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 60px 30px;
}

@media (max-width: 1080px) {
  div.the-avenue-homes

  {
    
    grid-template-columns: repeat(1, 1fr);
    
    gap: 60px 30px;
  }
}

div.quick-possession-homes
  {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  gap: 60px 30px;
}

div.the-avenue-homes .home,
div.quick-possession-homes .home {
  padding: 20px 0px;
}

div.the-avenue-homes .home img,
div.quick-possession-homes .home img {
  width: 100%;
  opacity: .8
}

div.the-avenue-homes .home:hover img,
div.quick-possession-homes .home:hover img {
  opacity: 1;
}

div.the-avenue-homes .home .description,
div.quick-possession-homes .home .description {
  padding: 20px 0px;
  border-top: 1px dotted var(--color-stone);
  margin: 20px 0px;
  width: 100%;
}

section#quick-posession {
  background-color: var(--color-stone);
  z-index: -6;
}

section#quick-posession .content {
  color: var(--color-sienna);
  text-align: left;
}

section#about {
  z-index: -9;
}
section#about .shape {
  background-color: var(--color-sienna);
  color: #ffffff;
}

@media (max-width: 1080px) {
  
  section#the-avenue div.content .title-description {
    display: block;
    margin-bottom: 50px;
  }

  .title-description .description {
    padding: 60px 0px 0px 1vw;
    width: 100%;
  }

}






header nav ul > li > ul           { background: var(--color-coat); }
header nav ul > li > ul > li > a  { color: var(--color-stone); }

header nav ul li a:hover, 
header nav ul li a.active        { 
    color: var(--color-stone); 
    border-bottom: 1px dotted var(--color-stone);
}


section.new_hero div.image_cont  img {
    right: -14%;
}
@media (max-width: 1080px){
  section.new_hero div.image_cont  img { right: unset; }
}

/* Overwrite hero styles. */
.hero__img {
  object-position: -200%;
}

.hero__shape {
  color: var(--color-stone);
}

div.title-offset {
    margin-top: -6vw;
}

@media (max-width: 1080px) {

  /* .hero__img {
    object-position: 75%;
    content: url('https://couleeridge.s3-us-west-2.amazonaws.com/cms-2022/live-here/girl-bubbles.png');
  } */

  section#builders .content .title h1 { display: none;}


}

/* Overwrite header styles. */
.nav__shape {
    background: var(--color-coat);
}

svg#nav-hamburger g line {
    stroke: var(--color-coat);
}



.nav__shape {
      background: var(--color-coat);
  }

  svg#nav-hamburger g line {
      stroke: var(--color-coat);
  }

  section { color: var(--color-stone); }

  section.new_hero div.shape_cont {
      background-color: var(--color-ochre);
      color: var(--color-stone);

  }

    section#movie { 
      z-index: -1;
    }

      section#movie > img { 
        position: absolute;
        right: 0px;
        top: 0px;
        object-fit: cover;
        width: 100%;
      }

    
    section#lot-styles {
      z-index: -2;
      /* height: 80vw; */
      background-color: var(--color-coat);
      /* padding: 5vw 0 2vw; */
    }

      section#lot-styles div.content {
        /* padding: 20vw 0px; */
      }

    section#lot-styles .three__top .description {
      width: 55%;
    }

    
    .three__top {
      display: flex;
      align-items: center;
      margin-bottom: 60px;
    }

      .three__top button {
        height: 100%;
        margin-top: 20px;
      }

      .three__top .title {
        color: var(--color-stone);
        margin: 0;
        margin-right: 100px;
        width: 45%;
      }

    .three__articles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: auto;
      gap: 60px 30px;
    }

    /* .three__articles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 31px;
    } */

    .three__articles .article {
      /* height: 100%; */
      display: block;
      position: relative;
    }

    .three__articles .article .image {
      padding: 0px 0px 20px 0px;
      overflow: hidden;
      height: 12vw;
    }

    .three__articles .article details.lot-details {
      border-top: 1px dotted var(--color-stone);
      padding: 20px 0px 20px 0px;
    }

    .three__articles .article details.lot-details p {
      padding: 0px 0px 0px;
    }
    
    .article .image > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* .three__articles .article img {
      width: 100%;
      height: 40%;
      border-bottom: 1px dotted var(--color-stone);
      padding-bottom: 30px;
      object-fit: cover;
      display: block;
    } */

    .three__articles .article h2 {
      color: var(--color-stone);
      margin-top: 0;
      margin-right: 30px;
    }

    .three__articles .article details summary {
      font-size: 1.375rem;
      font-weight: var(--font-weight-semi-bold);

      /* Make summary unclickable when viewing on desktop. */
      pointer-events: none;
    }
.three__articles .article details summary::after {
    content: unset;
  }
  .three__articles .article details[open] summary::after {
    content: unset;
  }







    section#lot-map             { 
      z-index: -3;
    }

      section#lot-map div.shape {
        background-color: var(--color-ochre);
        color: var(--color-stone);
      }

  section#featured-builders {
    background-color: var(--color-coat);
    z-index: -5;
    /* min-height: 75vw;  */
  }  

    .title-description { 
      display: flex;
      margin-bottom: 50px;
    }

      

    .builder_content {
      display: flex;
    }
    
    .builder_content .description {
      margin-right: 30px;
      width: 22%;
    }

    

    .builder_content .gallery {
      width: 78%;
      display: grid;
      grid-template-columns: repeat(3, 32%);
      gap: 30px;
    }

      .builder_content .gallery .builder {
        display: block;
        position: relative;
        flex: 1;
      }

      .builder_content .gallery .builder .image-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 16vw;
      }

      .builder_content .gallery .builder .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        opacity: 0.8;
      }
      .builder_content .gallery .builder:hover .image-container img {
        opacity: 1;
      }

      

      .builder_content .gallery .builder .name {
        margin: 20px 0px 0px 0px;
        padding: 20px 0px;
        border-top: 1px dotted var(--color-stone);
        font-size: 1.375rem;
        font-weight: var(--font-weight-semi-bold);
      }

      .builder_content .gallery .builder:hover .name {
        text-decoration: underline;
      }




  section#builders {
    background-color: var(--color-stone);
    z-index: -6;
    /* min-height: 50vw; */
  }
  
    section#builders .content {
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: var(--color-sienna);
      text-align: left;
    }

    section#builders .content div.title {
      width: 100%;
      text-align: left;
    }
    
    section#builders .content .logos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: auto;
      row-gap: 100px;
      /* column-gap: 10vw; */
      width: 86%;
    }

    section#builders .content .logos .logo {
      
      margin: 0px auto;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
    }

    section#builders .content .logos .logo > img {
      width: 80%;
    }

    @media (max-width: 1024px) {
      .six {
        padding: 100px 0;
        clip-path: var(--clip-from-bottom-right-98);
        margin-top: -15%;
      }
      section#builders .content .logos {
        grid-template-columns: 1fr;
        row-gap: 0;
      }
    }



  @media (max-width: 1640px){

    /* section#lot-styles { height: 70vw; } */

  }

  @media (max-width: 1480px){

    .three__top {
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      flex-direction: column;
    }
    .three__top .title {
      color: var(--color-stone);
      margin: 0;
      width: 100%;
    }

    section#lot-styles .three__top .description {
      width: 100%;
    }

    section#lot-styles .three__top .description a.cta {
      margin: 30px 0px 0px 0px;
    }

    .three__articles {
      display: flex;
      grid-template-columns: unset;
      gap: 30px;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;

    }

    .three__articles .article {
      height: 100%;
      width: calc(50% - 30px);
    }

    .three__articles .article .image {
      overflow: hidden;
      height: 24vw;
    }

  }

  @media (max-width: 1280px){

    .three__articles .article .image {
      padding: 0px 0px 20px 0px;
      overflow: hidden;
      height: 24vw;
    }

    .builder_content .gallery .builder .image-container {
      height: 24vw;
    }

    section#featured-builders .title-description { 
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 0px;
      padding: 0px 0px 40px 0px;
    }

    section#featured-builders .title-description .description { 
      padding: 0px 0px 0px 0px;
      width: 100%;
    }
    
    section#featured-builders .builder_content {
      display: flex;
      flex-direction: column;
    }

    section#featured-builders .builder_content .description {
      margin-right: 0px;
      width: 100%;
      padding: 0px 0px 40px 0px;
    }

    section#featured-builders .builder_content .gallery {
      margin-right: 0px;
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: 60px;
      flex-wrap: wrap;
      padding: 0px 0px 40px 0px;
    }
    .builder_content .gallery .builder {
      display: block;
      position: relative;
      flex: unset;
      width: calc(50% - 60px);
    }

  }

  @media (max-width: 1080px) {
    section#lot-styles {
      height: initial;
    }

    section#lot-styles .content .three__top .title,
    section#lot-styles .content .three__top .description {
      width: 100%;
    }

    section#lot-styles .content .three__articles .article {
        height: 100%;
        width: 100%;
    }

    section#lot-styles .content .three__top .description span.desktop-description {
      display: none;
    }


.builder_content .gallery .builder .image-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 30vh;
}


    section#lot-map {
      display: flex;
      flex-direction: column;
    }

    section#lot-map .image_cont {
      order: 0;
    }

    section#lot-map div.shape {
      order: 1;
      z-index: -3;
    }

    section#lot-map .shape-content {
    }

    section#featured-builders {
      /* margin-top: -5vh; */
    }

    .builder_content .gallery .builder {
      display: block;
      position: relative;
      flex: unset;
      width: 100%;
    }

    section#featured-builders .title-description .description {
     padding: 0; 
    }

    section#builders {
    }

    section#builders .content div.title br {
      display: none;
    }

    section#builders .content .logos .logo > img {
      width: 100%;
    }

    section#builders .content div.title {
      text-align: center;
    }
    .three__articles .article .image {
      padding: 0px 0px 20px 0px;
      overflow: hidden;
      height: 30vh;
    }
  }




@media (max-width: 640px){
   section#builders .content .logos .logo {
      width: 60%;
    }
  section#lot-map .image_cont {
      height: 50%;
    }

    section#lot-map div.shape {
      height: 50%;
    }
    section#lot-map {
      /* margin-top: -8.5vh; */
      height: 200vw;
      display: flex;
      flex-direction: column;
    }
    .three__articles .article .image {
      padding: 0px 0px 20px 0px;
      overflow: hidden;
      height: calc(100% * .55);
    }
    .builder_content .gallery .builder .image-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      height: auto;
    }
}