.interactive_demo{
  width: 100%;
  max-width: 325px;
  height: auto;
  max-height: 600px;
  aspect-ratio: 195/422;
  border-radius: 20px;
  border: none;
  box-shadow: 0 25.6px 57.6px 0 rgb(0 0 0 / 22%), 0 4.8px 14.4px 0 rgb(0 0 0 / 18%);
}

.feature_and_benefits_content{
  transition: scale .5s;
}

.complimentary_image{
  max-width: 300px;
}

/*#region Range Input Styling*/
.pricing_range_input {
  height: 26px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background: none;
}

.pricing_range_input:focus {
  outline: none;
}

.pricing_range_input::-webkit-slider-runnable-track {
  width: 100%;
  height: 14px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #50555C;
  background: #F8F1F1;
  border-radius: 14px;
  border: 0px solid #000000;
}

.pricing_range_input::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 20px;
  width: 40px;
  border-radius: 12px;
  background: #E57C23;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
}

.pricing_range_input:focus::-webkit-slider-runnable-track {
  background: #F8F1F1;
}

.pricing_range_input::-moz-range-track {
  width: 100%;
  height: 14px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #50555C;
  background: #F8F1F1;
  border-radius: 14px;
  border: 0px solid #000000;
}

.pricing_range_input::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 20px;
  width: 40px;
  border-radius: 12px;
  background: #E57C23;
  cursor: pointer;
}

.pricing_range_input::-ms-track {
  width: 100%;
  height: 14px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.pricing_range_input::-ms-fill-lower {
  background: #E57C23;
  border: 0px solid #000000;
  border-radius: 28px;
  box-shadow: 0px 0px 0px #50555C;
}

.pricing_range_input::-ms-fill-upper {
  background: #E57C23;
  border: 0px solid #000000;
  border-radius: 28px;
  box-shadow: 0px 0px 0px #50555C;
}

.pricing_range_input::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 20px;
  width: 40px;
  border-radius: 12px;
  background: #E57C23;
  cursor: pointer;
}

.pricing_range_input:focus::-ms-fill-lower {
  background: #E57C23;
}

.pricing_range_input:focus::-ms-fill-upper {
  background: #E57C23;
}


/*#endregion*/

/*On use cases landing pages*/
.welcome_home_gif{
  width: 100%;
  max-width: 400px;
  height: auto;
}

/*#region Responsiveness*/

/*Smaller screens (screen widths less than 1024 - mobile and tablet devices)*/
@media screen and (max-width: 1023px) {

/*Site Version*/
#DesktopSite{display: none;}
#MobileSite{display: block;}

body{
  padding: 1rem;
  text-align: center;
}

.hero_img{
  width: 75%;
  max-width: 300px;
  height: auto;
}

.hero_title{
  height: 100%;
  text-align: left;
}

.standard_button{
  margin: auto;
}

#DemoGreeting{
  scale: 87%;
}

.admin_showcase{
  max-height: 500px;
  width: 100%;
  border-radius: 15px;
  margin: auto;
  aspect-ratio: 16/9;
}

.picture_w_caption_parent{
  width: 100%;
  text-align: center;
}

.caption_img{
  display: block;
  width: auto;
  margin: auto;
  height: 100%;
  min-height: 75px;
  max-height: 100px;
}

.blog_parent{
  display: flex;
  gap: 1rem;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.blog_item{
  width: 100%;
  height: 15rem;
  border-radius: 15px;
  text-align: left;
  display: none;
  flex-direction: column;
  padding: 1rem;
}

}

/*Smaller Desktop Screens (screen widths between 1024px and 1366px)*/
@media screen and (min-width: 1024px) and (max-width: 1365px) {

/*Site Version*/
#DesktopSite{display: block;}  
#MobileSite{display: none;}

body{
  padding-bottom: 2rem;
  padding-right: 4rem;
  padding-left: 4rem;
} 

.hero_img{
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 350px;  
  margin: auto;
}

#DemoGreeting{
  scale: 85%;
}

.blog_parent{
  display: flex;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.blog_item{
  width: 15rem;
  height: 20rem;
  border-radius: 15px;
  text-align: left;
  display: none;
  flex-direction: column;
  padding: 1rem;
}

}

/*Standard Desktop Screens (screen widths 1366 or more)*/
@media screen and (min-width: 1366px) and (max-width: 2399px) {

/*Site Version*/
#DesktopSite{display: block;}
#MobileSite{display: none;}

body{
  padding-bottom: 2rem;
  padding-right: 6rem;
  padding-left: 6rem;
}

#DemoGreeting{
  scale: 100%;
}

.hero_img{
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 400px;  
  margin: auto;
}

.blog_parent{
  display: flex;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.blog_item{
  width: 15rem;
  height: 20rem;
  border-radius: 15px;
  text-align: left;
  display: none;
  flex-direction: column;
  padding: 1rem;
}

}

/*Larger Desktop Screens (screen widths 2500 or more)*/
@media screen and (min-width: 2400px) and (max-width: 2999px) {

/*Site Version*/
#DesktopSite{display: block;}
#MobileSite{display: none;}

body{
  padding-bottom: 2rem;
  padding-right: 6rem;
  padding-left: 6rem;
}

#DemoGreeting{
  scale: 100%;
}

/*This is just for testing until we get an actual gif in there*/
#FAKEVIDEO{
  max-height: 1000px !important;
}

#DemoGreetingParent_Desktop{
  scale: 110%;
}

.hero_img{
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 900px;  
  margin: auto;
}

.blog_parent{
  display: flex;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.blog_item{
  width: 35rem;
  height: 30rem;
  border-radius: 15px;
  text-align: left;
  display: none;
  flex-direction: column;
  padding: 1rem;
}

.complimentary_image{
  max-width: 400px;
}

}

/*Larger Desktop Screens (screen widths 2500 or more)*/
@media screen and (min-width: 3000px) {

/*Site Version*/
#DesktopSite{display: block;}
#MobileSite{display: none;}

body{
  padding-bottom: 2rem;
  padding-right: 6rem;
  padding-left: 6rem;
}

#DemoGreeting{
  scale: 110%;
}

/*This is just for testing until we get an actual gif in there*/
#FAKEVIDEO{
  max-height: 1000px !important;
}

#DemoGreetingParent_Desktop{
  scale: 130%;
}

.hero_img{
  text-align: center;
  width: 100%;
  height: auto;
  max-width: 900px;  
  margin: auto;
}

.blog_parent{
  display: flex;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.blog_item{
  width: 35rem;
  height: 30rem;
  border-radius: 15px;
  text-align: left;
  display: none;
  flex-direction: column;
  padding: 1rem;
}
  
.complimentary_image{
  max-width: 600px;
}

}

/*#endregion*/