@charset "UTF-8";
/********************************
 scss file for c325-jdfclts
 last: 3/31/2018
********************************/
/********** constants *******************/
/********** Atomic *******************/
.b-1 {
  border: 1px solid #80B3C4;
  border-radius: 3px;
}

.b-2 {
  border: 2px solid #80B3C4;
  border-radius: 3px;
}

.b-3 {
  border: 3px solid #80B3C4;
  border-radius: 3px;
}

.b-radius {
  border-radius: 3px;
}

.b-grey {
  border-color: grey;
}

.b-1-lightgrey {
  border: 1px solid lightgrey;
}

.b-1-red {
  border: 1px solid red;
}

.bb-3-white {
  border-bottom: 3px solid white;
}

.bk-admirals {
  background-color: #80B3C4;
}

.bold {
  font-weight: bold;
}

.center {
  text-align: center;
}

.clear-both {
  clear: both;
}

.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.clr-adm {
  color: #80B3C4;
}

.clr-white {
  color: white;
}

.clr-yellow {
  color: yellow;
}

.clr-grey {
  color: grey;
}

.clr-orange {
  color: orange;
}

.clr-blue {
  color: blue;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.td_float-right {
  float: none;
  display: block;
}

@media all and (min-width: 768px) {
  .td_float-right {
    float: right;
  }
}

.td_float-left {
  float: none;
  display: block;
}

@media all and (min-width: 768px) {
  .td_float-left {
    float: left;
  }
}

.font-monospace {
  font-family: monospace;
}

.font-large {
  font-size: large;
}

.font-larger {
  font-size: larger;
}

.font-x-large {
  font-size: x-large;
}

.td_font-x-large {
  font-size: initial;
}

@media all and (min-width: 768px) {
  .td_font-x-large {
    font-size: x-large;
  }
}

.h-1em {
  height: 1em;
}

.larger {
  font-size: larger;
}

.ls-1 {
  letter-spacing: 1px;
}

.ls-2 {
  letter-spacing: 2px;
}

.ls-3 {
  letter-spacing: 3px;
}

.ls-4 {
  letter-spacing: 4px;
}

.middle > * {
  vertical-align: middle;
}

.mv-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mh-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-1em {
  margin-left: 1em;
}

.ml-2em {
  margin-left: 2em;
}

.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.overflow {
  overflow: hidden;
}

.p-5 {
  padding: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pb-1em {
  padding-bottom: 1em;
}

.pb-2em {
  padding-bottom: 2em;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.ph-5 {
  padding-left: 5px;
  padding-right: 5px;
}

.ph-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.pv-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pv-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pv-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.pv-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.p-10 {
  padding: 10px;
}

.small-caps {
  font-variant: small-caps;
}

.smaller {
  font-size: smaller;
}

.x-large {
  font-size: x-large;
}

.xx-large {
  font-size: xx-large;
}

.z-200 {
  z-axis: 200;
}

/*************************************************/
/********** flexbox home page layout *************/
/*************************************************/
.content-container {
  display: flex;
  flex-flow: column;
  align-content: center;
  align-items: center;
  min-height: 100vh;
}

.the-content {
  text-align: center;
}

.content-container > * {
  flex: 1 auto;
}

@media all and (min-width: 601px) {
  .content-container > * {
    flex: 1 auto;
  }
}

/**************************************************/
/********** flexbox page layout *******************/
/**************************************************/
.flex-photo-container {
  display: flex;
  flex-flow: column;
  min-height: 80vh;
}

.flex-photo-container > * {
  flex: 1 100%;
}

.before-photo, .after-photo {
  flex: 1 auto;
}

.flex-photo {
  flex: 1 auto;
  margin-right: 0;
}

@media all and (min-width: 768px) {
  .flex-photo {
    margin-right: 1em;
  }
}

/**************************************************/
.flex-content-container {
  display: flex;
  flex-flow: column;
  min-height: 80vh;
}

.flex-content-container > * {
  flex: 1 100%;
}

.before-content, .after-content {
  flex: 1 auto;
}

.flex-content {
  flex: 1 auto;
  margin-right: 1em;
}

/**************************************************/
.flex-container {
  display: flex;
  /* direct children are flex items */
  /*  display: flex;
  This one line of code does all the following:
  Treats .flex-container as a flex container.
  Treats all direct children of .flex-container as flex items.
  Flex items will be laid out in a horizontal line.
  Flex items will be laid out in source order.
  Flex items will be laid out starting from the left side of the flex container.
  Flex items will be sized based on their regular width properties.
  If there’s not enough space for all the flex items, they will be allowed to shrink horizontally until they all fit.
  If they need to shrink, each item will shrink equally.
  Flex items will all stretch vertically to match the height of the tallest flex item.
  */
  flex-basis: auto;
  flex-flow: row wrap;
  justify-content: space-around;
  background-color: white;
}

.aside-1 {
  border-radius: 3px;
  display: none;
}

.main {
  border-radius: 3px;
  padding-left: 20px;
  padding-right: 20px;
  min-height: 75vh;
}

.aside-2 {
  border-radius: 3px;
}

.footer {
  border-radius: 3px;
  background-color: #80B3C4;
  color: white;
  padding: 15px 15px;
  z-index: 200;
  margin: 0;
  font-size: smaller;
  text-align: left;
}

@media all and (min-width: 768px) {
  .footer {
    font-size: inherit;
  }
}

.flex-container > * {
  flex: 1 100%;
}

@media all and (min-width: 601px) {
  .aside {
    flex: 1 auto;
  }
  /* We tell both sidebars to share a row */
  .aside-1 {
    display: none;
  }
  /* Hmm, override that */
}

@media all and (min-width: 768px) {
  .aside-1 {
    display: none;
    order: 1;
    flex: 0 0 0%;
  }
  .main {
    order: 2;
    flex: 0 0 56%;
  }
  .aside-2 {
    order: 3;
    flex: 0 0 44%;
  }
  .footer {
    order: 4;
  }
}

/*******************************************/
/********** A...Z classes and ids  *********/
/*******************************************/
a {
  color: #80B3C4;
}

a:hover {
  background-color: #80B3C4;
  color: white;
}

p a {
  border-bottom: 1px solid #80B3C4;
}

article, header, .header, .article {
  border: none;
}

.article-date {
  font-weight: bold;
  font-size: smaller;
  padding: 0px 0 5px 0;
}

.boardmember-wrapper {
  clear: both;
  margin-top: 2em;
  overflow: hidden;
}

.boardmember-name {
  font-weight: bold;
  font-size: larger;
  padding-bottom: 5px;
}

.boardmember-position {
  padding-bottom: 15px;
}

body {
  background-color: #80B3C4;
}

.box4news {
  padding: 10px 5px;
  text-align: center;
  margin: 10px 0 0 0;
  border: none;
  border-radius: 3px;
}

@media all and (min-width: 768px) {
  .box4news {
    border: 2px solid #80B3C4;
    border-radius: 3px;
    margin: 2em 10% 0 10%;
  }
}

@media all and (min-width: 1100px) {
  .box4news {
    margin: 1em 15% 0 15%;
    border: 2px solid #80B3C4;
  }
}

@media all and (min-width: 1250px) {
  .box4news {
    margin: 1em 20% 0 20%;
    border: 2px solid #80B3C4;
  }
}

.breakpoint-desktop {
  display: none;
}

@media all and (min-width: 1100px) {
  .breakpoint-desktop {
    display: inline;
  }
}

content {
  clear: both;
}

.tablet-desktop-navbar {
  display: none;
}

@media all and (min-width: 768px) {
  .tablet-desktop-navbar {
    display: block;
  }
}

@media all and (min-width: 1100px) {
  .tablet-desktop-navbar {
    display: block;
  }
}

.mobile-navbar {
  display: block;
  text-align: center;
}

@media all and (min-width: 768px) {
  .mobile-navbar {
    display: none;
  }
}

@media all and (min-width: 1100px) {
  .mobile-navbar {
    display: none;
  }
}

.flexcontainer {
  display: flex;
}

.footer-email a {
  color: white;
}

h2 {
  margin-bottom: 0;
}

header {
  height: auto;
  border: none;
}

h1 {
  color: #80B3C4;
  font-variant: small-caps;
  letter-spacing: 3px;
  padding: 0.5em 0 1em 0;
  font-size: xx-large;
  text-align: center;
}

@media all and (min-width: 768px) {
  h1 {
    font-size: xx-large;
    letter-spacing: 4px;
  }
}

.h1-jdfclts {
  font-variant: none;
  letter-spacing: 0;
  font-weight: bold;
  font-size: x-large;
  padding-bottom: 0;
}

@media all and (min-width: 768px) {
  .h1-jdfclts {
    display: none;
  }
}

.home_content {
  padding: 1em;
  margin: 1em;
}

@media all and (min-width: 768px) {
  .home_content {
    float: left;
    width: 55%;
    border: none;
    background-color: inherit;
  }
}

.image-small {
  clear: right;
  width: 100%;
}

@media all and (min-width: 768px) {
  .image-small {
    width: 250px;
    float: right;
    margin: 0 1em;
    clear: right;
  }
}

@media all and (min-width: 1100px) {
  .image-small {
    width: 350px;
  }
}

.image-small img {
  width: 100%;
}

@media all and (min-width: 768px) {
  .image-small img {
    width: 250px;
    border-radius: 3px;
  }
}

@media all and (min-width: 1100px) {
  .image-small img {
    width: 350px;
  }
}

.image-caption {
  width: 100%;
  text-align: center;
  font-size: smaller;
}

.mobile_hidden, .tablet_plus {
  display: none;
}

@media all and (min-width: 768px) {
  .mobile_hidden, .tablet_plus {
    display: inline;
  }
}

.mobile-tablet,
.mobile_tablet {
  display: inline;
}

@media all and (min-width: 1100px) {
  .mobile-tablet,
  .mobile_tablet {
    display: none;
  }
}

.mobile-only, .mobile_only {
  display: inline;
}

@media all and (min-width: 768px) {
  .mobile-only, .mobile_only {
    display: none;
  }
}

.tablet-only, .tablet_only {
  display: none;
}

@media all and (min-width: 768px) {
  .tablet-only, .tablet_only {
    display: inline;
  }
}

@media all and (min-width: 1100px) {
  .tablet-only, .tablet_only {
    display: none;
  }
}

.desktop-only, .desktop_only {
  display: none;
}

@media all and (min-width: 1100px) {
  .desktop-only, .desktop_only {
    display: inline;
  }
}

.navbar-container {
  font-size: large;
  background-color: #80B3C4;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .navbar-container {
    padding-left: 15px;
  }
}

@media all and (min-width: 1100px) {
  .navbar-container {
    padding-left: 25px;
    padding-right: 15px;
    font-size: x-large;
  }
}

.navbar-item-to-left {
  float: left;
  margin-right: 10px;
}

@media all and (min-width: 768px) {
  .navbar-item-to-left {
    margin-right: 15px;
  }
}

@media all and (min-width: 1100px) {
  .navbar-item-to-left {
    margin-right: 20px;
  }
}

.navbar-item-to-right {
  float: right;
  margin-right: 10px;
}

@media all and (min-width: 768px) {
  .navbar-item-to-right {
    margin-left: 15px;
  }
}

@media all and (min-width: 1100px) {
  .navbar-item-to-right {
    margin-left: 20px;
  }
}

.navbar-item-to-center {
  width: auto;
  margin-right: 10px;
}

@media all and (min-width: 768px) {
  .navbar-item-to-center {
    margin-right: 15px;
  }
}

@media all and (min-width: 1100px) {
  .navbar-item-to-center {
    margin-right: 20px;
  }
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  background-color: white;
  color: #80B3C4;
  text-decoration: none;
}

.navbar-deadlink {
  border-bottom: 2px solid white;
}

.bigger-on-desktop {
  font-size: inherit;
}

@media all and (min-width: 1100px) {
  .bigger-on-desktop {
    font-size: xx-large;
  }
}

.newsTitle {
  font-weight: bold;
  padding-bottom: 10px;
  padding-top: 15px;
}

.page-home {
  margin: 20px;
}

@media all and (min-width: 768px) {
  .page-home {
    margin: 0;
  }
}

#pagecontent {
  clear: both;
  display: block;
  margin: 0;
  padding: 0 20px;
  width: 100%;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  #pagecontent {
    margin-top: 2em;
  }
}

@media all and (min-width: 1100px) {
  #pagecontent {
    clear: none;
    float: right;
    margin: 0;
    padding: 0 20px 0 0;
    width: 78%;
  }
}

.page-title {
  text-align: center;
  font-weight: bold;
}

.page-title-fancy {
  font-family: 'Clicker Script', cursive;
}

#loadOverlay {
  display: none;
}