/* used to be 005596*/
/*lighten(@black, 20%);*/
#searchWarnings {
  /* move it down far enough to see the image */
  padding-top: 0.3em;
  /* the top attribute of the banner bar is 1em and you need to pad the top of the content area to accommodate for any warnings that are right below the banner*/
}
@media screen and (min-width: 992px) {
  #searchWarnings {
    padding-top: 1em;
  }
}
#searchWarnings #topWarnings {
  /*margin-top: -3em;*/
}
#searchWarnings #wb-srch {
  margin-top: 0;
  margin-top: 7em;
  /* was 10, turned down to make the icons come up a bit higher 08/27/2019 */
}
#searchWarnings #wb-srch-q.wb-srch-q {
  /*line-height: 1.4375em;*/
  height: 100%;
  position: absolute;
}
@media screen and (max-width: 991px) {
  /*up to medium*/
  #wb-srch {
    padding: 0 1em;
  }
  #wb-srch form {
    margin-left: 15px;
    padding: 0;
    width: 100%;
  }
  #mb-pnl form {
    padding: 0;
  }
}
@media screen and (min-width: 992px) {
  /*medium and large*/
  .col-8 {
    width: 12.5%;
  }
  #wb-srch form {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 1200px) {
  /*large*/
  /*#wb-srch-q.wb-srch-q {
        width: 94%;
    }*/
  /*#searchWarnings {
        margin-top: 12em;
    }*/
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  /*medium-ish*/
  /*#searchWarnings {
        margin-top: 8em;
    }*/
  #searchWarnings #wb-srch {
    margin-top: 0;
    /* 08/27/2019 Teresa suggested turning off the Jumbotron for mobile phones so the search bar should now move up*/
  }
}
@media screen and (max-width: 767px) {
  /*xs*/
  #searchWarnings #wb-srch {
    margin-top: 0;
    /* 08/27/2019 Teresa suggested turning off the Jumbotron for mobile phones so the search bar should now move up*/
  }
  /*#searchWarnings {
        margin-top: 13.5em;

        #topWarnings {
            .warning {
                margin-bottom: 0.5em;
                margin-left: 0.5em;
                margin-right: 0.5em;
            }
        }
    }*/
}
@media screen and (max-width: 480px) {
  /*xxs*/
  #wb-srch form {
    margin-left: 8px;
  }
  /*#wb-srch-q.wb-srch-q {
        width: 84%;
    }*/
}
/* used for the events calendar icon on the main page */
#topStories {
  background-color: #FFF;
}
#topStories #topStoryRow {
  padding-top: 2em;
}
#topStories > .row {
  margin-left: 0;
  margin-right: 0;
}
@media screen and (max-width: 779px) {
  #topStories > .row div {
    margin-bottom: 1em;
  }
}
@media screen and (min-width: 780px) {
  #topStories > .row div {
    margin-bottom: 2.5em;
  }
}
#topStories h3 {
  color: #007ead;
}
#topStories .story a,
#topStories .story a:visited {
  color: #000;
  font-weight: 600;
}
#topStories .story h3 {
  margin-top: 0.5em;
}
#topStories .story h3 a,
#topStories .story h3 a:visited {
  color: #007ead;
  text-decoration: none;
}
#topStories .story h3 a:hover {
  text-decoration: underline;
}
#topStories .topStoryLink,
#topStories .topStoryLink:visited,
#topStories .topStoryLink:active {
  text-decoration: none;
  text-transform: uppercase;
  color: #212c32;
  padding-left: 0.5em;
  font-weight: 600;
}
#topStories .topStoryLink:hover,
#topStories .topStoryLink:focus {
  text-decoration: underline;
}
#topStories .events {
  margin-bottom: 1em;
}
#topStories .events h3 {
  margin-top: 0;
  color: #FFF;
  background-color: #212c32;
  font-size: 1.75em;
  line-height: 1.5em;
  padding-left: 0.5em;
}
@media screen and (max-width: 767px) {
  #topStories .events h3 {
    font-size: 1.5em;
    line-height: 1.25em;
  }
}
#topStories .events dt {
  clear: both;
}
#topStories .events dt span.eventIcon {
  float: left;
  background-image: url(https://res.cloudinary.com/niagarafalls/image/fetch/w_auto:100:400,f_auto,q_auto,c_limit,fl_progressive/https://img.niagarafalls.ca/site/calendar-background.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.5em;
  /* this is also the margin-left for the dd */
  font-size: 2em;
  text-align: center;
  line-height: 1.7em;
  margin-right: 0.25em;
}
#topStories .events dt a {
  color: #212c32;
  text-decoration: none;
}
#topStories .events dt a:visited,
#topStories .events dt a:hover,
#topStories .events dt a:active,
#topStories .events dt a:focus {
  color: #212c32;
}
#topStories .events dt a:hover,
#topStories .events dt a:focus {
  text-decoration: underline;
}
#topStories .events dd {
  margin-left: 3.25em;
  /* this is also the width for the dd span.eventIcon*/
}
#topStories .events hr {
  color: #FFF;
  background-color: #FFF;
  border-top: 0.15em dotted #212c32;
  margin-bottom: 0;
}
#topStories .events .viewAll {
  text-transform: uppercase;
  text-decoration: none;
  color: #212c32;
  font-weight: 600;
  font-size: 1.2em;
}
#topStories .events .viewAll:active,
#topStories .events .viewAll:visited,
#topStories .events .viewAll:hover,
#topStories .events .viewAll:focus {
  color: #212c32;
}
#topStories .events .viewAll:hover,
#topStories .events .viewAll:focus {
  text-decoration: underline;
}
#popular {
  margin-top: 3em;
  text-align: center;
  /*margin-left: -0.5em;
    margin-right: -0.5em;*/
  font-size: 0.9em;
  position: relative;
  line-height: 1.5em;
  background-color: #FFF;
}
#popular a,
#popular a:visited {
  color: #007ead;
  font-weight: 600;
  text-decoration: none;
}
#popular a:hover,
#popular a:focus {
  text-decoration: underline;
}
#popular > .row {
  margin-left: 0;
  margin-right: 0;
}
#popular div img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
}
#popular div.item {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-top: 0.5em;
}
@media screen and (min-width: 1600px) {
  /*very wide screens*/
  #popular {
    margin-top: 10em;
  }
}
@media screen and (min-width: 1450px) and (max-width: 1599px) {
  #popular {
    margin-top: 8em;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1449px) {
  #popular {
    margin-top: 7em;
  }
}
@media screen and (min-width: 780px) and (max-width: 1199px) {
  /*  medium screens */
  #popular {
    margin-top: 5em;
  }
}