@media screen and (min-width: 1400px) {
              #productDiv img {
  max-height: calc(var(--height_constant) - 22vh);
}
}






/*MAX HEIGHT 1000================================================*/


@media screen and (min-width: 1400px) and (max-height: 1000px) {

.intro_splash img {
  width: 86%;
margin-left: 7%;
}

}



@media screen and (min-width: 1200px) and (max-width: 1399px) and (max-height: 1000px) {

.intro_splash img {
  width: 90%;
margin-left: 5%;
}

}






/*MAX HEIGHT 900================================================*/


@media screen and (min-width: 1200px) and (max-height: 900px) {

.intro_splash img {
  width: 85%;
margin-left: 7.5%;
}

}


@media screen and (min-width: 876px) and (min-height: 900px) and (max-height: 900px) {

.inner3col.benefit_col {
 min-height: calc(var(--height_constant) - 13.61vh);
/*Close continuity from garden at 875px x 876px - not exact*/

}

}


@media screen and (min-width: 876px) and (max-height: 940px) {



}



@media screen and (min-width: 876px) and (max-height: 940px) {

@media screen and (max-width: 1199px) {
      body {
    /*  --new_height_constant: 75vh;*/
    --new_height_constant: var(--height_constant);
    }
    /*Above this width creates scrolling artifacts.*/
}



          .intro_content {
                min-height: var(--new_height_constant);
                max-height: var(--new_height_constant);
                /*680px creates scroll area on intro_content at ~800pg height*/
                /*600px creates jarring benefits transition at ~850 pg width*/
            }

.inner2col.story_servers, .inner2col {

max-height: calc(var(--new_height_constant) - 6vh);
          
}

.product_featre {
    min-height: calc(var(--new_height_constant) - 6vh);
  max-height: calc(var(--new_height_constant) - 6vh);
}

.story_feature {
/*    min-height: calc(var(--new_height_constant) - 7vh);
  max-height: calc(var(--new_height_constant) - 7vh);*/
  min-height: calc(var(--new_height_constant) - 8vh);
  max-height: calc(var(--new_height_constant) - 8vh);

}

}


@media screen and (min-width: 876px) and (max-height: 800px) {
body {
/*  --new_height_constant: 75vh;*/
--new_height_constant: var(--height_constant);
}


.inner2col.story_servers, .inner2col {

max-height: calc(var(--new_height_constant) - 8vh);
          
}

}


/*MAX HEIGHT 875================================================*/


@media screen and (min-width: 1200px) and (max-width: 1399px) and (max-height: 875px) {

    body {
    --content_width: 900px;
    /*950px creates horiz scroll condition below 875px height*/ 

  }

.intro_splash img {
  width: 95%;
margin-left: 2.5%;
}

}

@media screen and (min-width: 1100px) and (max-height: 875px) {

.intro_splash img {
  width: 90%;
margin-left: 5%;
}

}

@media screen and (min-width: 1000px) and (max-height: 875px) {

.intro_splash img {
  width: 95%;
margin-left: 2.5%;
}

@media screen and (min-width: 1200px) {
.intro_splash img {
  width: 85%;
margin-left: 7.5%;
}

  
}


}

/*MAX HEIGHT 860================================================*/
/*Iphone 12 Pro */

@media screen and (max-width: 400px) and (max-height: 860px) {


  @media screen and (min-height: 820px) {
    .intro_content {
    min-height:660px; 
  }

  body {
 --body_type_size: 11pt;
}
    
  }

  
}


/*MAX HEIGHT 820================================================*/
/*Iphone 12 mini */

@media screen and (max-width: 400px) and (max-height: 820px) {


  .productItem, .productItem img {
    --product_thumb_width: calc(var(--product_base_width) - 24px);
  }


    @media screen and (min-height: 671px) {
  .intro_content {
    min-height:630px; /*Works at iPhone 12 mini screen size*/
  }

            .rightCol.settings {
grid-template-columns: 1fr 1fr 1fr;
  padding-top: calc(var(--intro_content_padding) + 30px);
}


  }


  @media screen and (max-height: 670px) {
    /*iPhone SE*/

    .intro_content {
    min-height:520px; /*Works at iPhone 12 mini screen size*/
  }

    .container {
  margin-left: max(10px, 4%);
  margin-right: max(10px, 4%);
}

    .rightCol.settings {
grid-template-columns: 1fr 1fr 1fr;
  padding-top: calc(var(--intro_content_padding) + 30px);
}


        #productDiv.product_showing.tallPreview img {
    max-height: calc(var(--height_constant) - 56vh - var(--wide_height_constant) - var(--vertical_height_constant));
   }

    .img_lower_area {
    margin-bottom: -34px;
  }

    #product_category_info{
    margin-bottom: 4px;
  }

  .productItem, .productItem img {
    --product_thumb_width: calc(var(--product_base_width) - 28px);
    /*max-width: calc(var(--product_thumb_width) - 20px);*/
  }


.productItem img {
      max-width: calc(var(--product_thumb_width) - 20px);
}
    .productPreviewText {
      max-width: calc(var(--product_thumb_width) + 15px);
    }

      .productItem img {
    min-width: 9vw;
  }


  #room_copy p {
        margin-bottom: 0px;
  }

      .intro_content {
padding-bottom: calc(var(--padding_std) - 4px);
}

  .intro_content h2 {
  font-size: 1.45em;
}

    #kitchen_category {
      margin-bottom: -20px;
    }

        .endNav {
      margin-top: 4px;
    }

    .product_feature.store {
    grid-template-rows: auto;
}


  }

}


/*MAX HEIGHT 800================================================*/

@media screen and (min-width: 1100px) and (max-height: 800px) {

.intro_splash img {
  width: 80%;
margin-left: 10%;
}

}


@media screen and (min-width: 900px) and (max-height: 800px) {

.intro_splash img {
  width: 85%;
margin-left: 7.5%;
}

}


/*MAX HEIGHT 760================================================*/

@media screen and (min-width: 1300px) and (max-height: 760px) {

.intro_splash img {
  width: 75%;
margin-left: 12.5%;
}

}

@media screen and (min-width: 1100px) and (max-height: 760px) {

.intro_splash img {
  width: 80%;
margin-left: 10%;
}

}

@media screen and (min-width: 1000px) and (max-height: 760px) {

.intro_splash img {
  width: 80%;
margin-left: 10%;
}

}


@media screen and (min-width: 900px) and (max-height: 760px) {

.intro_splash img {
  width: 85%;
margin-left: 7.5%;
}

}


@media screen and (min-width: 800px) and (max-height: 760px) {

.intro_splash img {
  width: 90%;
margin-left: 5%;
}

}


@media screen and (min-width: 720px) and (max-width: 760px) and (max-height: 760px) {

.intro_splash img {
  width: 95%;
  margin-left: 2.5%;
}

}


/*MAX HEIGHT 720================================================*/


@media screen (max-height: 720px) {

.intro_splash img {
  width: 80%;
margin-left: 10%;
}

}

@media screen and (min-width: 641px) and (max-height: 720px) {

.intro_splash img {
  width: 85%;
margin-left: 7.5%;
}

}

/*MAX HEIGHT 640================================================*/

@media screen and (min-width: 641px) and (max-height: 640px) {

.intro_splash img {
  width: 80%;
margin-left: 10%;
}


}


@media screen and (max-height: 640px) {

.intro_splash img {
  width: 75%;
margin-left: 12.5%;
}


}

/*MOBILE: MAX WIDTH 640================================================*/



@media screen and (min-height: 940px) and (max-height: 999px) and (max-width: 440px) {

.inner3col {
 min-height: calc(var(--height_constant) - 13.3vh);
}

.inner1col {
  min-height: calc(var(--height_constant) + 1vh);
}

            .intro_content {
              min-height: 720px;
              /*700px creates garden-> benefits transition issue at width ~790px.*/
            }

}



@media screen and (max-height:960px) and (max-width:640px) {

    @media screen and (max-height: 940px) {
      #compress {
        display: initial;
      }

      .lgCompress {
        display: none;
      }
          

                  .rightCol.settings {
      grid-template-columns: 1fr 1fr 1fr;
      }

    }


      @media screen and (min-height: 600px) {

          .inner1col p {
            max-width: 600px;
          }

          ol {
            padding-left: 30px;
          }



          .product_box {
          /*  min-height: 290px;*/
          min-height: 31vh;
          }

          .product_feature.store {
          min-height: 33vh;
          /*  min-height: 320px;*/
          }

      }

}

@media screen and (min-height: 900px) and (max-height: 940px) and (max-width: 440px) {
/* iPhone 14 Pro Max: 932px */

body {
  --height_min: 621px;
  /*585px*/
}
  
.rightCol.survey {
min-height: var(--height_min);
  
}



.settings {
/*   min-height: calc(var(--height_min) + 100px);*/
    min-height: calc(var(--height_min) + 72px);
 }




 .innerProductCol {
/*   min-height: calc(var(--height_min) + 100px);*/
/*  min-height: calc(var(--height_constant) + 3.92vh);*/
  min-height: calc(var(--height_constant) + 0vh);
   
 }
  
.inner3col {
 min-height: calc(var(--height_constant) - 13.3vh);
}

  .inner1col, .inner2col {
  min-height: calc(var(--height_constant) + 0.4vh);
  max-height: calc(var(--height_constant) + 0.4vh);
}

  #productDiv.product_showing.tallPreview img {
    max-height: calc(var(--height_constant) - 44vh - var(--wide_height_constant) - var(--vertical_height_constant));
   }

            .intro_content {
              min-height: calc(var(--height_constant) + 0vh);
              /*700px creates garden-> benefits transition issue at width ~790px.*/
            }

}



/*GARDEN PAGE================================================*/


@media screen and (min-height: 800px) and (max-height:899px) and (min-width: 1000px) {

    #productDiv.tallFeature img {
            max-width: 40vw;
    }

    @media screen and (min-width: 1260px) {

        #productDiv.tallFeature img {
                max-width: 35vw;
        }

        }

    @media screen and (min-width: 1440px) {

        #productDiv.tallFeature img {
                max-width: 33vw;
        }

        }
      
}


/*INTRO PAGE================================================*/


/*W: 1200px -----------------*/

/*@media screen (min-width: 1200px) {

    #intro_img {
    max-width: 70vw;
    }

    @media screen and (max-height: 1000px)

    #intro_img {
    max-width: 65vw;
    }

}*/

/*H: 900px -----------------*/

@media screen and (min-height: 800px) and (max-height:899px) and (min-width: 1000px) {

    #intro_img {
    max-width: min(65vw, 875px);
    }

}

/*H: 800px -----------------*/

@media screen and (min-height: 760px) and (max-height:799px) and (min-width: 1200px) {

    #intro_img {
    max-width: 58vw;
    }

}

@media screen and (min-height: 720px) and (max-height:799px) and (min-width: 1000px) and (max-width: 1199px) {

    #intro_img {
    max-width: 62vw;
    }

}


/*H: 760px -----------------*/

@media screen and (min-height: 660px) and (max-height:760px) and (min-width: 1000px) and (max-width: 1199px) {

    #intro_img {
    max-width: 56vw;
    }

}

@media screen and (min-width: 720px) and (max-height: 760px) {

@media screen and (max-width: 860px) {
  .intro_splash img {
  width: 95%;
  margin-left: 2.5%;
}
}
  
@media screen and (max-width: 960px) {
  .intro_splash img {
  width: 80%;
  margin-left: 10%;
}
}

  @media screen and (max-width: 960px) and (max-height: 720px) {
  .intro_splash img {
  width: 75%;
  margin-left: 12.5%;
}
}


}


/*PRODUCT SHOWING================================================*/

@media screen and (min-height: 760px) and (max-height:799px) and (min-width: 900px) {

#productDiv.taller_product img {
  max-height: calc(var(--height_constant) - 26vh);
}

  #productDiv.tallPreview img {
  max-height: calc(var(--height_constant) - 24vh);
}

}

@media screen and (min-height: 700px) and (max-height:759px) and (min-width: 900px) {

#productDiv.taller_product img {
  max-height: calc(var(--height_constant) - 30vh);
}

  #productDiv.tallPreview img {
  max-height: calc(var(--height_constant) - 24vh);
}

}