html {
  font-family: "Source Sans Pro", Tahoma, sans-serif;
  font-size: 17px;
  top: 0;
  background-color: #eeeeee;
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: #383b47;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.25em;
}

i {
  font-style: italic;
}

.blue {
  color: #2b53ad;
}

.green {
  color: #a3e35e;
}

.red {
  color: #ff6165;
}

.gray {
  color: #aaa;
}

hr {
  border: 1px dashed #ddd;
  width: 100%;
}

.small-caps {
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bold;
  opacity: 0.5;
}

/* Flexbox & page structure ------------------------------------------------- */

.block {
  display: block;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-ju-bw {
  justify-content: space-between;
  width: 100%;
}

.flex-al-cen {
  align-items: center;
}

.flex-al-start {
  align-items: flex-start;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Header ------------------------------------------------------------------- */

header {
  background-color: #2b53ad;
  background-image: linear-gradient(180deg, #2b53ad 20%, #23187c 100%);
  border-top: 5px solid rgba(0, 0, 0, 0.4);
  padding-top: 10px;
  padding-bottom: 80px;
}

#hours {
  margin-bottom: 10px;
}

#hours p, #full-nav a {
  line-height: 1.4em;
}

#hours p {
  font-size: 0.8em;
}

#logo-nav {
  margin-top: 20px;
}

#logo, #logo-n1 {
  max-height: 45px;
  margin-right: 50px;
  padding: 10px;
}

#logo-m, #logo-m-n1 {
  display: none;
}

#logo:hover, #logo-n1:hover {
  cursor: pointer;
  background-color: rgba(255,255,255,0.15);
  border-radius: 3px;
}

#main-nav {
  font-weight: 700;
  flex-basis: 1;
}

#main-nav a:hover {
  background-color: #23187c;
  border-radius: 3px;
}

#full-nav, #search-box {
  max-width: 1200px;
  margin: 30px auto 0 auto;
}

#search-box {
  width: 100%;
  justify-content: stretch;
  border-radius: 3px;
}

#input-search {
  border-radius: 3px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1em;
  padding: 10px;
  flex-grow: 1;
}

#btn-search-website {
  margin-right: 20px;
}

#btn-search-catalog, #btn-search-website {
  margin-top: 20px;
  margin-bottom: 20px;
}

#full-nav {
  border-radius: 3px;
}

#full-nav .flex-col {
  width: 25%;
}

#full-nav h4, footer h4 {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 10px;
  margin-bottom: 5px;
  padding-left: 5px;
}

#full-nav a {
  padding: 5px;
}

#full-nav a:hover {
  background-color: #10084b;
  opacity: 1!important;
  border-radius: 3px;
}

#full-nav a:active, .active {
  color: #a3e35e;
}

#mobile-extras {
  display: none;
}

a img {
  color: white;
}

/* Main content ------------------------------------------------------------- */

main {
  max-width: 1200px;
  min-height: 220px;
  margin: -50px auto 50px auto;
  background-color: white;
  border-radius: 3px;
  z-index: 5;
  padding-bottom: 50px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.03),
              10px 0px 15px rgba(0, 0, 0, 0.03),
              -10px 0px 15px rgba(0, 0, 0, 0.03);
}

main section, main aside {
  margin: 0 50px;
}

main aside {
  width: 35%;
}

main section {
  width: 65%;
}

.full-img {
  height: auto;
  width: 100%;
  margin-bottom: 40px;
}

.mar-btm {
  margin-bottom: 50px;
}

main h1 {
  margin: 50px 50px 20px 50px;
}

main h1 + img, main .meta + img {
  margin: 50px 0;
}

article h1 {
  display: none;
}

main p + h2, .callout + h2, div.flex-ju-bw + h2 {
  margin: 40px 0 20px 0;
}

main p {
  line-height: 1.6em;
  margin: 10px 0;
}

main ul {
  line-height: 1.6em;
  margin: 10px 0px 10px 40px;
}

dl {
  line-height: 1.6em;
  margin: 15px 0;
}

dl dt {
  font-size: 1.125em;
  font-weight: 700;
  background-color: rgba(43, 83, 173, 0.2);
  color: #2b53ad;
  padding: 10px;
  border-radius: 3px 3px 0 0;
}

dl dd {
  background-color: #eee;
  padding: 10px;
  border-radius: 0 0 3px 3px;
  margin-bottom: 10px;
}

dl dd:last-child {
  margin-bottom: 0;
}

main form label, main form fieldset legend {
  display: block;
  font-weight: 700;
  padding: 10px 0 5px 0;
  opacity: 0.6;
}

 main input[type="text"],
 main textarea, 
 main input[type="email"] {
  width: 85%;
  font-size: 1em;
}

main form input[type="checkbox"], main form input[type="radio"] {
  display: inline;
  margin: 7px 0;
}

fieldset {
  display: flex;
}

fieldset input[type="checkbox"] {
  display: inline;
}

main form fieldset label {
  display: inline;
  font-weight: 400;
}

main ol {
  list-style-type: decimal;
  list-style-position: outside;
  line-height: 1.6em;
  margin: 10px 0 10px 50px;
}

main ol li::marker {
  color: #a3e35e;
  font-weight: 700;
}

main ul {
  list-style-type: circle;
  list-style-position: outside;
}

main img.img-body {
  height: auto;
  width: 100%;
  border-radius: 3px;
}

.callout {
  padding: 20px;
  background-color: rgba(162, 210, 94, 0.3);
  border: 2px solid #a3e35e;
  border-radius: 10px;
}

.callout h4 {
  color: #1f2f0e;
}

.callout a, .event-m a {
  color: #3a660a;
  background-color: rgba(162, 210, 94, 0.5);
}

.callout a:hover {
  color: white;
  background-color: #3a660a;
}

aside h4 {
  margin-bottom: 10px;
}

section .btn {
  display: inline;
}

.db-img, .db-img img {
  max-width: 200px;
  background-color: white;
}

.db-img {
  margin: 15px 15px 0 0;
  padding: 10px;
}

.db-img:hover {
  background-color: rgba(43, 83, 173, 0.2);
}

.db-img img:hover {
  background-color: rgba(43, 83, 173, 0);
}

.highlight {
  background-color: rgba(163, 227, 94, 0.3);
  padding: 0 5px;
  border-radius: 3px;
}

aside .btn {
  padding: 20px;
  margin: 10px 0;
  border: 2px solid #aaa;
  background-color: rgba(170, 170, 170, 0.2);
  color: #777;
  text-align: left;
}

aside .btn:hover {
  color: white;
  background-color: #aaa;
  transition: linear 150ms;
  border: 2px solid #aaa;
}

aside .btn-green {
  padding: 20px;
  margin: 10px 0;
  color: #70ac30;
  background-color: rgba(163,227,94, 0.3);
  border: 2px solid #a3e35e;
}

aside .btn-green:hover {
  background-color: #a3e35e;
  color: white;
}

aside .btn:active, aside .btn-green:active {
  background-color: #2b53ad;
  color: white;
  border: 2px solid #2b53ad;
}

.staff-photo {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  margin: 10px 10px 10px 0;
}

.staff-person {
  min-width: 250px;
}

ul.board-list li {
  margin-bottom: 15px;
}

ul.fa-ul li {
  margin-left: -15px;
  margin-bottom: 15px;
}

.blog-list-item .meta {
  margin: 15px 0 0 0;
  padding: 10px 0;
}

.meta div {
  margin-right: 30px;
}

.meta a {
  background-color: transparent;
}

.meta a:hover {
  cursor: pointer;
}

.blog-list-item {
  margin-bottom: 70px;
}

.blog-list-item img {
  border-radius: 3px;
}

.blog-list-item img + a {
  color: black;
  background-color: transparent;
}

.blog-list-item img + a:hover {
  cursor: pointer;
}

main h1 + .meta {
  margin-left: 50px;
}

article {
  padding: 0 200px 50px 200px;
}

article li strong {
  font-size: 1.2em;
  color: #2b53ad;
}

article .post-nav {
  margin-top: 50px;
}

article .post-nav a {
  padding: 20px;
}


/* Footer ------------------------------------------------------------------- */

footer {
  margin-bottom: 40px;
}

footer div.flex-col {
  width: 25%;
}

footer h4 {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 10px;
}

footer p,
footer address,
footer strong,
footer input[type="text"],
footer label {
  font-size: 0.9em;
  line-height: 1.3em;
  padding-left: 5px;
}

footer input {
  margin-left: 5px;
}

footer a {
  font-size: 0.9em;
}

footer label {
  padding-top: 10px;
}

footer h3 {
  text-align: center;
  padding: 10px 0 30px 0;
  font-size: 2em;
  font-style: italic;
  font-weight: 400;
  opacity: 0.2;
}

#mission {
  justify-content: center;
}

/* Misc styles -------------------------------------------------------------- */

strong {
  font-weight: 700;
}

.white {
  color: white;
}

.weak {
  opacity: 0.7;
}

.pad10 {
  padding: 10px;
}

.pad20 {
  padding: 20px;
}

.pad50 {
  padding: 0 50px 50px 50px;
  flex-wrap: wrap;
}

.no-img {
  margin-bottom: 30px;
}

button, .btn, input.btn {
  display: inline;
  align-items: center;
  border-radius: 3px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  color: #2b53ad;
  font-size: 1em;
  border: 2px solid #2b53ad;
  background-color: rgba(43, 83, 173, 0.2);
  padding: 10px 20px;
  margin: 5px;
  text-align: center;
}

button:hover, .btn:hover {
  cursor: pointer;
  color: white;
  background-color: rgba(43, 83, 173, 1);
  transition: linear 150ms;
}

.btn-white {
  border: 2px solid rgba(255,255,255,0.6);
  background-color: rgba(255,255,255,0.25);
  color: white;
}

.btn-white:hover {
  background-color: rgba(255,255,255,1);
  color: #2b53ad;
  transition: linear 150ms;
}

.btn-red {
  color: #ff6165;
  background-color: rgba(255, 97, 101, 0.2);
  border: 2px solid #ff6165;
  padding: 10px 20px;
}

.btn-red:hover {
  color: white;
  background-color: #ff6165;
}

.mar20 {
  margin: 20px;
}

.txt-sm {
  font-size: 0.9em;
}

.purple {
  background-color: #23187c;
}

.hidden {
  display: none;
}

.bg-blue {
  background-color: #2b53ad;
}

main a, footer a:not(.no-under) {
  color: #2b53ad;
  font-weight: 700;
  background-color: rgba(43, 83, 173, 0.2);
  padding: 0 4px;
  border-radius: 3px;
}

.no-under {
  color: #2b53ad;
  margin-right: 5px;
  padding: 5px;
  border-radius: 3px;
}

main a:hover, footer a:hover {
  color: white;
  background-color: #2b53ad;
  transition: linear 150ms;
}

input[type="text"], textarea, input[type="email"] {
  border-radius: 3px;
  padding: 10px 20px;
  font-family: "Source Sans Pro", sans-serif;
  border-style: none;
  border: 2px solid #e9e9e9;
}

aside.blog a {
  background-color: transparent;
  color: #2b53ad;
  font-size: 1.1em;
}

aside.blog a:hover {
  background-color: #2b53ad;
  color: white;
}

aside.blog {
  border-left: 2px dotted #eee;
  padding: 20px 0 0 20px;
}

aside p+h3 {
  margin-top: 30px;
}

aside h3+.event-h {
  margin-top: 20px;
}

.date {
  margin: 10px 0;
  font-size: 1.2em;
  text-transform: uppercase;
  background-color: #eee;
  padding: 10px;
}

.event-m+h2,
.event-h+h2,
.event-o+h2 {
  margin-top: 30px;
}

.event-h,
.event-m,
.event-o {
  padding: 5px 0 0 15px;
  margin: 5px 0;
}

.event-m p, 
.event-h p,
.event-o p {
  margin: 5px 0 0 0;
}

.event-h {
  border-left: 10px solid #2b53ad;
}

.event-m {
  /*background-color: rgba(163, 227, 94, 0.2);*/
  border-left: 10px solid #a3e35e;
}

.event-o {
  border-left: 10px solid #999;
}

#month2,
#month3,
#month4 {
  margin-top: 50px;
}

/* -------------------------------------------------------------------------- */
/* Media Queries ------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 786px) and (max-width: 1220px) {

  .container, main {
    margin-left: 15px;
    margin-right: 15px;
    max-width: 100%;
  }

  #logo-nav, #hours, #search-box, #full-nav {
    margin-left: 15px;
    margin-right: 15px;
    max-width: 95%;
  }



}

@media only screen and (min-width: 200px) and (max-width: 785px) {

  main, #logo-nav, #mission, #full-nav, #search-box, footer {
    margin-left: 15px;
    margin-right: 15px;
    max-width: 95%;
  }

  main .flex-ju-bw {
    flex-direction: column;
    justify-content: flex-start;
  }

  main section {
    width: 85%;
    margin: 0 auto;
  }

  main aside {
    width: 85%;
    margin: 50px auto 0 auto;
  }

  h1 {
    margin: 20px 0;
  }

  #search-box, #full-nav {
    flex-direction: column;
  }

  #search-box div {
    justify-content: flex-end;
    margin-top: 0;
  }

  #search-box input {
    margin-bottom: 0;
  }

  #hours {
    flex-direction: column;
  }

  #logo-nav {
    width: 95%;
  }

  #logo, #logo-n1 {
    display: none;
  }

  #logo-m {
    display: flex;
    height: 45px;
  }

  #main-nav {
    justify-content: flex-end;
  }

  #full-nav p {
    padding-left: 10px;
    line-height: 1.3em;
    margin-bottom: 20px;
  }

  #mobile-extras {
    display: flex;
  }

  .hide-mobile {
    display: none;
  }

  footer div.flex-ju-bw {
    flex-direction: column;
    max-width: 90%;
  }

  footer div.flex-col.pad20, #full-nav .pad20 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  #full-nav a {
    padding: 10px;
    font-size: 0.9em;
  }

}