@charset "utf-8";
/* CSS Document */
* {box-sizing: border-box; margin: 0; padding: 0;}
body {background-color: #ddd; color: #333; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; overflow-x: hidden; font-size: larger; background-image: linear-gradient(123deg, #eee, #ccc); background-size: cover; background-repeat: no-repeat; height: 100%;}
html {scroll-behavior: smooth;}
.font-narrow {
  font-family: 'Archivo Narrow', sans-serif;
}
.font-normal {
  font-family: 'Archivo', sans-serif;
}
img {
  max-width: 100%;
  display: block;
}
main {
  padding: 1rem 5vw;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  height: 100%;
  min-height: 100%;
}
main h1 {
  flex: 1 1 100%;
  line-height: 1;
  font-family: 'Archivo', sans-serif;
  padding: 1.5rem 0 1rem;
  color: #235;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  font-size: 120%;
}
main h1 a {
  color: #679;
  text-decoration: none;
}
main h1 span {padding-left: 1rem;}
main p {padding: 1.5rem 0 1rem;}
.pics {
  flex: 1;
  min-width: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.cornerpic {
  /*min-width: 280px;*/
  height: 300px;
  background-color: #223355;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(100,150,255,.05) 10px, rgba(100,150,255,.05) 15px);
  position: relative;
  overflow: hidden;
}
.cornerpic img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.cornerpic figcaption {
  background-color: rgba(0,0,0,.9);
  padding: .5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.cornerpic figcaption {
  color: #ccc;
  font-size: .8rem;
  font-weight: bold;
  overflow: hidden;
}
.votd {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  overflow: hidden;
  /*font-family: 'Archivo', sans-serif;*/
  font-family: 'Archivo Narrow', sans-serif;
  color: #eee;
  background-color: darkolivegreen;
}
.votd p {
  padding: 2.5rem 5vw 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}
.votd p em {
  color: cornsilk;
  white-space: nowrap;
}
.wotd {
  flex: 1;
  font-family: 'Archivo', sans-serif;
  color: #ddd;
  background-color: #235;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(100,150,255,.05) 10px, rgba(100,150,255,.05) 15px);
  padding: 1.8rem 5vw 1rem;
}
.wotd p {
  flex: 1;
  line-height: 1.2;
  text-shadow: 1px 2px 3px rgba(0,0,0,.75);
}
.wotd h4 {
  color: cornsilk;
  display: inline-block;
  text-shadow: 1px 2px 3px rgba(0,0,0,.75);
  text-transform: capitalize;
  font-size: 1.6rem;
  line-height: 1;
}

.readtoday {
  flex: 1;
  width: 100%;
  background-color: darkseagreen;
  padding: .75rem 5vw;
  color: #333;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.readtoday h4 {
  flex: 1 1 100%;
  white-space: nowrap;
}
.readtoday a {
  color: darkgreen;
  font-size: 1.5rem;
  font-weight: 800;
  padding: 0 .5rem;
}
.quicklinks {
  flex: 1 1 100%;
  padding: 1rem 0;
  font-family: 'Archivo Narrow', sans-serif;
}
.quicklinks h2 {
  padding-bottom: .5rem;
}
.quicklinks nav {
  display: flex;
  flex-flow: row wrap;
  gap: .5rem;
}
/*.quicklinks nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), auto));
  grid-auto-columns: max-content;
  gap: .5rem;
}*/
.quicklinks nav a {
  flex: 1;
  white-space: nowrap;
  color: #333;
  padding: .75rem 1rem .5rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid;
  text-decoration: none;
  line-height: 1.4;
  font-size: 1.1rem;
}
.quicklinks nav a i {
  font-size: 1.6rem;
  padding-bottom: .5rem;
}
.quicklinks nav a:hover {
  background-color: #fff;
}

.content {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    padding: 1rem 0;
  }
  .content article {
    flex: 1 1 calc(100% / 4);
    min-width: 280px;
    padding: 2rem 5vw;
    background-color: rgba(0,0,0,.05);
  }
  .content ul {
    margin-left: 2rem;
  }
  .content a {
    text-decoration: none;
    color: #222;
  }
  .content h2 {
    border-bottom: 3px solid;
    padding-bottom: .75rem;
    margin-bottom: .5rem;
    font-size: 2.5rem;
    font-family: 'Archivo Narrow', sans-serif;
    line-height: 1.1;
  }
  .content h3 {
    border-bottom: 2px dashed;
    padding-bottom: .75rem;
    margin-bottom: .5rem;
    font-family: 'Archivo', sans-serif;
  }
  .no-border {
    padding: 0 !important; margin: 0 !important; border: 0 !important;
  }
  .content article button {
    border: 0;
    background-color: #ddd;
    padding: .5rem 2rem;
    margin: 1rem 0 0 0;
    border-radius: 5rem;
    font-weight: bold;
    font-size: large;
    color: #555;
    cursor: pointer;
  }
  .content article button:hover {
    background-color: #fff;
  }
  .three-col {
    flex: 60vw !important;
  }
  .halfwidth {
    flex: 40vw !important;
  }
  .fullwidth {
    flex: 100% !important;
  }


.TAP {
  background-color: olivedrab;
  background-image: linear-gradient(45deg, darkolivegreen, transparent);
  padding: 2rem 5vw;
  font-family: 'Archivo Narrow', sans-serif;
  text-align: center;
}
.TAP a {
  color: #fc0;
  line-height: 1;
  font-size: 1.75rem;
  font-weight: 900;
  text-shadow: 1px 2px 3px rgba(0,0,0,.5);
  text-decoration: none;
}
.TAP a:hover {
  color: #ffc;
}

footer {
  background-color: #222;
  color: #aaa;
}
.billpay {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 2vw 5vw;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: larger;
  }
  .billpay a {
    color: #ddd;
    text-align: center;
  }
  .billpay a:hover {
    color: #fff;
  }
  .footlinks {
    padding: 1rem 3vw;
    text-align: center;
  }
  .footlinks nav {}
  .footlinks nav a {color: #aaa; text-decoration: none;}
  .footlinks nav a:hover {color: #eee;}
  .footlinks nav a::after {
    content: " | "
  }
.advert {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
}
.advert a {}
.advert img {
  height: 100px;
  width: 100%;
  max-width: 500px;
}

.spacerblock {
  background-color: #223355;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(100,150,255,.05) 10px, rgba(100,150,255,.05) 15px);
  flex: 1;
  text-align: center;
  height: 20px;
}
.weeklystory {
  flex: 1 1 100%;
  background-color: #223355;
  text-align: center;
}
.weeklystory a {
  height: 100%;
  width: 100%;
  color: #fff;
  padding: 1rem;
}
.weeklystory h2 {font-size: 1.7rem;}
.weeklystory h4 {text-transform: uppercase; font-size: 1.1rem;}

.weeklystory a:hover {
  color: #fc0;
}


  .light-blue {background-color: lightblue !important;}
  .light-green {background-color: #A7C39A !important;}
  .light-grey {background-color: #ccc !important;}
  .dark-yellow {background-color: darkgoldenrod !important;}
  .dark-khaki {background-color: darkkhaki !important;}
  .chocolate {background-color: chocolate !important;}
  .indianred {background-color: indianred !important;}
  .mediumaqua {background-color: mediumaquamarine !important;}
  .maroon {background-color: #711 !important;}
  .maroon > * {color: #ddd !important;}
  .dark-blue {background-color: #235 !important;}
  .dark-blue > * {color: #eee !important;}