/* Home Articles */
#home-articles .articles-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1000px) {
  #home-articles .articles-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .backcolor a {
    font-size: 16px;
  }
}

@media (max-width: 770px) {
  /* Stack Grid Items */

  #home-articles .articles-container {
    grid-template-columns: 1fr;
  }
}
.backcolor {
  background-color: #ea7125;

  margin-top: 2rem;
  padding: 1rem 1rem 1rem 1rem;
  width: 100%;
}
/* This is to display the breadcrumb inline */
.breadcrumb .breadcrumb-item {
  display: inline;
}
/* Heading Style- Search in collections */
#topheading {
  background-color: #ea7125;
  padding: 10px 8px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0px;
  font-weight: 400;
  text-align: center;
  font-size: 20px;
  border-radius: 5px;
  font-family: "alternate-gothic-no-3-d", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}
/* radio button text css */
#allfields {
  padding-right: 0.5rem;
}
/* The outer grey rectangle box */
.ebsco-bootstrap #mainpanel .content-panel {
  height: 140px !important;
}
/* Below code is to make the border of  the textbox grey*/
#uquery {
  border: solid 1px #d3d3d3 !important;
}

/* Below code is to style the search button */
#btnsearch {
  margin: 0 0 0 -4px !important;
  padding: 7px 12px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  color: #3e3e3e !important;
  background-color: lightgrey !important;
}
/* Code below is to reduce the font size of search button fa fa-search */
#iconstyle {
  font-size: 0.9rem !important;
}

/* Below code is to change the color of the radio button to #ea7125 commented out by Shaz*/
/*input[type="radio"]:after {
  width: 13px;
  height: 13px;
  border-radius: 10px;
  position: relative !important;
  background-color: #d1d3d1 !important;
  content: "";
  display: inline-block !important;
  visibility: visible !important;
}*/

/* Below code is to change the color of the radio button to #ea7125 commented out by Shaz*/
/*input[type="radio"]:checked:after {
  width: 13px;
  height: 13px;
  border-radius: 10px;
  position: relative !important;
  background-color: #ea7125 !important;
  content: "";
  display: inline-block !important;
  visibility: visible !important;
}*/
/* The below code is to adjust the width of input text box */
@media (max-width: 1200px) {
  .inputwidth {
    width: 900px !important;
    margin: 0 auto !important;
  }
}
@media (max-width: 960px) {
  .inputwidth {
    width: 700px !important;
    margin: auto !important;
  }
}

/* The below code is to adjust the width of input text box */
@media (max-width: 770px) {
  .inputwidth {
    width: 420px !important;
  }
}
/* Below code is to fix the footer to the bottom of the page */
#g-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/* Breadcrumbs font size on all pages */
@media (max-width: 700px) {
  .breadcrumb-item a {
    font-size: 0.9rem;
  }
  .breadcrumb-item {
    font-size: 0.9rem;
  }
}
/* Below code is to reduce the main heading fontsize to 2.5 rem on small screen */

@media (max-width: 700px) {
  h1.heading {
    font-size: 2rem !important;
  }
}