div.callout div.grid {max-width: 100%; margin-top: -5px; padding: 0; display: inline-block;}

h1, h2, p {font-family: "Arimo", arial, verdana, sans-serif;}
h1, h2 {text-align: center;}
h1 {color: #005395; font-size: calc(16px + 3.8vw);font-weight: 700;}
h2 {color: #5A5A5A; font-size: calc(12px + 1vw);text-transform: none;}

.flex {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.container {
  position: relative;
  width: 30%;
  width: 200px;
  margin: 3%;
  border: 1px solid #005395;
  border-radius: 10px; /* Rounded corners */
  background-color: #005395; 
  color: white;
  height: 259px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18); /* Shadow effect */
  overflow: hidden; /* Hide overflow to maintain rounded corners */
}
.container p.rangeHeading {
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1em;
    padding: 10px 23px;
}
img.image {
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 33%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #005395;;
  overflow: hidden;
  width: 100%;
  height: 26%;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}
div.overlay div.text p {line-height: 1.3em;}
 .callout p {line-height: 1.3em;}
.text {
  font-size: 0.95em;
  color: white;
  text-align: center;
  width: 100%;
  margin-top: -2%;
  line-height: 1.3em;
}
.click {text-transform: uppercase; font-weight: 700;}
.productName {font-size: 0.9em; font-weight: 700;}
.productID {font-size: 0.85em;font-weight: 700; color: orange;}
.previewText {padding-left: 4%; padding-right: 4%; text-transform: none;font-size: 0.95em;}

.container:hover .text {
margin-top: 5%;
}

div.col_4 {
max-width: 576px;
border-radius: 10px;
background-image: linear-gradient(to right #075B9C, #042E4E);
}
.subheading {
max-width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
section.seo_text {display: block; background-color: #EBEBEB; padding: 2% 2% 2% 8%; margin-bottom: -30px; box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.18);}
.info_heading {width: 25%;}
.info_heading h2 {text-align: right; padding-right: 0; font-weight: 700; line-height: normal;}
.info_text {width: 75%}
.info_text p {width: 90%; padding: 4px 0 5px 20px; text-align: left;color: black; font-size: 0.9em;}
div#news {width: 100%; margin: 3vh 0 3vh 0;}
#news div {margin: 3% 3% 3% 0; position: relative; }
#news img {width: 25vw; max-width: 500px; min-width: 320px; }
#news a {text-transform: none;}
#news img:hover { transform: scale(1.05) translateY(-5px);
  transition-timing-function: ease-in-out; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

border: 5px; border-color: orange;}
#news img:hover + div.news_text {transform: scale(1.03) translateY(-3px); transition-timing-function: ease;}
#news div.news_text {position: absolute; top: 6%; left: 37%; margin-top: 0;}
#news div.news_text p {margin-bottom: 8%;}
#news div.news_text h3 {color: white; text-align: left; font-size: clamp(0.7em, 0.85vw, 0.9em);}
#news div.news_text h3 {font-weight: 700; color: orange;}
#news div.news_text p {color: white; text-align: left; font-size: clamp(0.7em, 0.85vw, 0.9em);}
button.news_button {background: orange; border-color: white; color: white; font-size: clamp(0.7em, 0.85vw, 0.9em); position: absolute; top: 80%; left: 65%; padding-top: 2px;}
@media screen and (max-width: 860px) {
  .info_heading {
  padding-top: 4px;
  }
  }
  
  @media screen and (max-width: 460px) {
  .info_heading {width: 100%;}
  .info_heading h2 {
  text-align: left;
  }
  .info_heading h2 span::after {content: ' ';}
  .info_heading h2 br {
  display: none;
  }
  .info_text {width: 100%;}
  }
   @media screen and (max-width: 1300px) {
  #news div.news_text p {margin-bottom: 0;}
  }
  @media screen and (max-width: 1025px) {
  button.news_button {float: none;}
  }