@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed&display=swap');

body { background-color: #ffffff; color: #1d2347; font-family: 'Roboto Condensed', sans-serif; font-size: 16px; line-height: 150%; }

/* Heading */ 
h1, h2, h3, h4, h5, h6 { color: #1d2347; font-weight: 700; line-height: 120%; padding: 0; margin: 20px 0 10px 0; font-family: 'Roboto', sans-serif; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #7089AF; }

#block-business-main-menu { height: 30px; padding: 0; margin: 0; }

.field--name-field-tags .field__item a:hover {
  color: #1d2347;
}
.flex-direction-nav a {
  color: #1d2347;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus,
.navbar-nav>li>a.is-active,
.navbar-nav>li>a:hover,
.dropdown-menu>li>a:hover {
  background: #1d2347;
  color: #4d4d4d;
}
.form-submit {
  background: none repeat scroll 0 0 #1d2347;
  border: 1px solid #0583ff;
}
.form-submit:hover {
  background: none repeat scroll 0 0 #0583ff;
}
.links li a:hover {
  color: #1d2347;
}
#main-menu .menu ul a:focus,
#main-menu .menu ul a:hover,
#main-menu .menu ul a:active {
  background: #1d2347;
}
#main-menu .menu a.active {
  background: #1d2347;
}
#main-menu .menu a:focus,
#main-menu .menu a:hover,
#main-menu .menu a:active {
  background: #1d2347;
}
#sitename h2 a:hover,
#sitename h1 a:hover { color: #1d2347 }
#page-wrapper {
  border-top: 3px solid #1d2347;
}
a:hover {
  color: #1d2347;
}

.nav li a { padding: 6px; }
#sidebar-second { width: 350px; }

/* Slick Carousel CSS */
.view-main-carousel, #slick-views-main-carousel-block-1-1 { text-align: center; -webkit-align-content: center; align-content: center; padding-left: 14px; }
.field--type-image { padding-left: 13%; border: solid 1px #eeeeee; }

/* Removing extra lines and white space */
.node, #footer-saran, #copyright, #footer-wrap { padding-top: 0px; padding-bottom: 0px; margin: 10px; }
.node, #copyright { border: 0px; }
.sidebar .region > .block { border-bottom: 0px; padding-bottom: 0px; }
.credits { display:none; }
.region-footer { margin-bottom: 0px; }
h1.page-title  { margin-top: 0px; }

/* Editor Menu Styling */
div#sidebar-first { padding: 4px; margin-right: 6px; border: solid #cccccc 1px; width: 200px; }
div#sidebar-first > div > div > h2 { margin-top: 0px; }

/* Adding background to Mobile Navigation menu */
ul.nav { background-color: #ffffff; opacity: 0.9; }

/* Styling Department Head Name and Title */
div#sidebar-second > div > div > div > div > div > div > h2 { color: #1d2347; font-size: 0.9em; margin-top: 4px; }
div#sidebar-second > div > div > div > div > div > div > h2:first-line { color: #1d2347; font-size: 1.3em; }

/* Styling External Links */
a[rel=external]:after { font-family: 'FontAwesome'; content: " \f08e"; font-size: 0.5em; position: relative; top: -0.5em; }

/* Styling to add space below lists */
ol, ul { margin-bottom: 10px; }

/* ADA Contrast Fixes */
.navbar-nav > li > a, .navbar-nav > li > ul > li > a {
  color: #1c4263;
  font-weight: 800;
  text-decoration: none;
}
a:-webkit-any-link {
  color: #1c4263;
  text-decoration: underline;
}
a:hover:-webkit-any-link {
  color: #1c4263;
  font-weight: 800;
  text-decoration: underline;
}

/* Styling for Featured Responsive blocks */
.FProw {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  margin-bottom: 6px;
}

/* Create four equal columns that sits next to each other */
.FPcolumn4 {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
  margin-bottom: 0;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .FPcolumn4 {
    flex: 50%;
    max-width: 50%;
  }
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .FPcolumn4 {
    flex: 100%;
    max-width: 100%;
  }
}

/* Create five equal columns that sits next to each other */
.FPcolumn {
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}
.FPcolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
/* Responsive layout - makes a two column-layout instead of five columns */
@media screen and (max-width: 800px) {
  .FPcolumn {
    flex: 50%;
    max-width: 50%;
  }
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .FPcolumn {
    flex: 100%;
    max-width: 100%;
  }
}