/*
 * Skeleton V2.0.4
 * Copyright 2014, Dave Gamache
 * New grid setup from ResponsiveGridSystem - 5/2016
 * www.getskeleton.com
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
 1.  CSS Variables
 2.  Base & Reset
 3.  Typography
 4.  Grid & Layout
 5.  Colors & Backgrounds
 6.  Links
 7.  Buttons & Interactive
 8.  Forms
 9.  Lists
10.  Tables
11.  Navigation
    a. Top Bar & Search
    b.  Nav
    c. Breadcrumbs
    d. SlickNav (Mobile)
12.  Header & Footer
13.  Page Layout Components
    a. Page IDs & Containers
    b. Well / Boxes
    c. Cards & Storyboard
    d. Block Headings
    e. Contact Boxes
    f. Hover Boxes
14.  Slider / Hero
15.  Icons & Social
16.  Department Pages
17.  Utilities & Helpers
18.  Print Styles
19.  Accessibility (Skip Link, ADA)
20.  Media Queries Summary
*/


/* ==========================================================================
   1. CSS Variables
   ========================================================================== */

:root {
  /* Brand Colors */
  --brand-blue:        #2E5A93;
  --brand-maroon:      #582b2c;
  --brand-orange:      #ff6e00;
  --brand-dark-orange: #AF3802;
  --brand-green:       #3E6314;
  --brand-dark-gray:   #2a2b32;

  /* Sub-brand */
  --sub-brand-green: #8dc63f;

  /* Neutrals */
  --neutral-white:      #ffffff;
  --neutral-gray-light: #F1F1F2;
  --neutral-gray-medium: #B2B2B2;
  --neutral-gray-dark:  #4D515F;

  /* Semantic */
  --semantic-error:     #c4262e;
  --semantic-success:   #536315;
  --semantic-highlight: #F7E380;

  /* Typography */
  --font-family-base: "Lato", Arial, sans-serif;

  /* Layout */
  --max-width: 1400px;
}


/* ==========================================================================
   2. Base & Reset
   ========================================================================== */

html {
  font-size: 70%;
  overflow-x: hidden; /* Prevent horizontal scrolling from overflowing content */
}

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--font-family-base);
  color: #4D515F;
  background-color: #ffffff;
  overflow-x: hidden; /* Prevent horizontal scrolling from overflowing content */
}

.body-bg {
  background-color: #000000;
}

img {
  max-width: 100%;
}

img.scale-with-grid {
  max-width: 100%;
  height: auto;
}

iframe {
  width: 100%;
}

hr {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 3px solid #814142;
}

.dotted-line {
  margin-top: 1rem;
  margin-bottom: 2rem;
  border-top: 1px dotted #525463;
}

.blue-line {
  border-color: var(--brand-blue);
}

.clear {
  clear: both;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300;
}

h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem; }
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3; }
h4 { font-size: 2.4rem; line-height: 1.35; }
h5 { font-size: 1.8rem; line-height: 1.5; }
h6 { font-size: 1.5rem; line-height: 1.6; }

/* Scale down headings on phablet+ */
@media (min-width: 550px) {
  h1 { font-size: 3.75rem; }
  h2 { font-size: 3rem; }
  h3 { font-size: 2.6rem; }
  h4 { font-size: 2.0rem; }
  h5 { font-size: 1.8rem; line-height: 1.5; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0;
}

bold        { font-weight: 900; }
.semi-bold  { font-weight: 700; }

.smallish   { font-size: 90%;  line-height: 150%; }
.small      { font-size: 80%; }
.small-txt  { font-size: 80%;  line-height: 150%; }
.largish    { font-size: 130%; }
.larger     { font-size: 170%; }
.large      { font-size: 200%; }

.huge {
  font-size: 6.75rem;
  margin: 0;
  padding: 0;
  line-height: 1;
}

@media (max-width: 750px) {
  .huge { font-size: 4.25rem; }
}

.text-uppercase  { text-transform: uppercase; }
.line-ht-normal  { line-height: normal; }
.fontawesome     { font-family: FontAwesome; }
.phone           { white-space: nowrap; }

.icon-image {
  font-size: 7em;
  text-align: center;
  line-height: 0;
}

.icon-image-sm {
  font-size: 5em;
  text-align: center;
  line-height: 0;
}

.nav-title {
  font-size: 2.4rem;
  line-height: 1.35;
  margin-bottom: 0;
  margin-left: 10px;
}

.exec-title {
  font-size: 120%;
  line-height: 90%;
}

.dept-title {
  color: #fff;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: normal;
}

.img-cover img {
  width: 100%;
  display: block;
}

.sidenav-title {
  font-size: 200%;
  color: var(--brand-blue);
  margin-left: 10px;
  margin-bottom: 0;
}


/* ==========================================================================
   4. Grid & Layout
   ========================================================================== */

.container {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 5px;
  box-sizing: border-box;
}

/* Self-clearing */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

.container-noborder {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  height: 248px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-image: url(../Movin/img/footer.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

  .column,
  .columns { margin-left: 1.6%; }

  .column:first-child,
  .columns:first-child { margin-left: 0; }

  .one.column,
  .one.columns    { width: 6.866%; }
  .two.columns    { width: 15.33%; }
  .three.columns  { width: 23.8%; }
  .four.columns   { width: 32.68%; }
  .five.columns   { width: 40.73%; }
  .six.columns    { width: 49.2%; }
  .seven.columns  { width: 57.66%; }
  .eight.columns  { width: 66.31%; }
  .nine.columns   { width: 74.68%; }
  .ten.columns    { width: 83.06%; }
  .eleven.columns { width: 91.53%; }
  .twelve.columns { width: 100%; margin-left: 0; }

  .one-third.column  { width: 32.26%; }
  .two-thirds.column { width: 66.13%; }
  .one-half.column   { width: 48.4%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns       { margin-left: 4.46%; }
  .offset-by-two.column,
  .offset-by-two.columns       { margin-left: 16.93%; }
  .offset-by-three.column,
  .offset-by-three.columns     { margin-left: 27.6%; }
  .offset-by-four.column,
  .offset-by-four.columns      { margin-left: 36.26%; }
  .offset-by-five.column,
  .offset-by-five.columns      { margin-left: 44.93%; }
  .offset-by-six.column,
  .offset-by-six.columns       { margin-left: 53.6%; }
  .offset-by-seven.column,
  .offset-by-seven.columns     { margin-left: 59.26%; }
  .offset-by-eight.column,
  .offset-by-eight.columns     { margin-left: 67.91%; }
  .offset-by-nine.column,
  .offset-by-nine.columns      { margin-left: 76.28%; }
  .offset-by-ten.column,
  .offset-by-ten.columns       { margin-left: 84.66%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns    { margin-left: 93.13%; }
  .offset-by-one-third.column,
  .offset-by-one-third.columns { margin-left: 33.86%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns{ margin-left: 67.73%; }
  .offset-by-one-half.column,
  .offset-by-one-half.columns  { margin-left: 52%; }

.alpha { margin-left: 0;  padding-left: 0; }
.omega { margin-right: 0; padding-right: 0; }

/* Mobile: Stack all Skeleton columns to full width below 550px
   Use .no-stack class on a row to opt out of automatic stacking */
@media (max-width: 549px) {
  .row:not(.no-stack) > .column,
  .row:not(.no-stack) > .columns {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  /* Also reset offsets on mobile */
  .row:not(.no-stack) > [class*="offset-by-"] {
    margin-left: 0 !important;
  }
}

/* Page background images */
.page-background {
  background-image: url(../img/big-background/city-hall.jpg);
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  min-height: 100vh;
}

.background-image {
  background-image: url("../img/section-page-top/parks-rec.jpg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
}

.photo-div {
  background-image: url(../img/box-backgrounds/box-pins.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 220px;
}

@media (min-width: 670px) {
  .photo-div { padding-top: 120px; }
}

.transparant-gray {
  background-color: rgba(83, 86, 100, .80);
  padding: 5px 0 5px 10px;
}

.transparant-dark {
  background-color: rgba(0, 0, 0, .60);
  padding: 5px 0 5px 10px;
}

.in-section {
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: .25em 10px;
}

.know-MV-bknd {
  background-image: url(../know/img/mo-val-bknd2.png);
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 550px) {
  .know-MV-bknd { background-image: none; }
}


/* ==========================================================================
   6. Links
   ========================================================================== */

a           { color: #1513C3; text-decoration: none; }
a:hover     { color: #C95100; text-decoration: none; }
a:visited   { color: #033E8E; }
a:focus     { text-decoration: underline; background-color: #1B5E9D; color: #fff; }

p a:focus   { background-color: #58326B; }


/* ==========================================================================
   7. Buttons & Interactive
   ========================================================================== */

button,
.button { margin-bottom: 1rem; }

.home-topic {
  background-color: #535664;
  color: #fff;
}
.home-topic a:hover { color: #CA9798; text-decoration: underline; }
.home-topic:hover   { background-color: var(--brand-maroon); color: #ffffff; }

@media (max-width: 780px) { .home-topic { font-size: 1.25em; } }
@media (max-width: 550px) { .home-topic { font-size: 1.5em; } }

/* Mobile clerk publication nav buttons */
@media (max-width: 768px) {
  .clerk-pub-nav .btn.mobile-margin {
    display: block;
    width: fit-content;
    margin: 0 auto 10px auto !important;
  }
  .clerk-pub-nav .btn.mobile-margin:last-child { margin-bottom: 0 !important; }
}


/* ==========================================================================
   8. Forms
   ========================================================================== */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 16px;
  margin-top: 0;
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

/* Remove awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  min-height: 45px;
  padding-top: 3px;
  padding-bottom: 3px;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}

label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0;
}

fieldset,
input,
textarea,
select { margin-bottom: .15rem; }

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

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal;
}

/* Blossom search */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Search bar in top menu */
.search-div {
  float: right;
	height: 37px;
}

.search-form {
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
  background: #ffffff;
  border: 1px solid #c7ccd4;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
	margin-top: 5px;
}

.search-form:focus-within {
  border-color: #2E5A93;
  box-shadow: 0 0 0 3px rgba(46, 90, 147, 0.18);
}

.search-txt {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #2a2b32;
  font-size: 0.95em;
  padding: 10px 14px;
  margin: 0;
}

.search-txt::placeholder {
  color: #6b7280;
}

.search-txt:focus {
  outline: none;
  box-shadow: none;
}

.search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 25px;
  border: 0;
  border-left: 1px solid #e2e6eb;
  background: linear-gradient(180deg, #2E5A93 0%, #244872 100%);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  margin: 0;
  left: auto;
  position: static;
  font-family: inherit;
}

.search-button:hover,
.search-button:focus {
  background: linear-gradient(180deg, #3a6dab 0%, #2E5A93 100%);
  color: #ffffff;
}

.search-button:focus {
  outline: none;
}

@media screen and (max-width: 932px) {
  .search-div {
    width: 100%;
    float: none;
    text-align: center;
  }

  .search-form {
    max-width: 100%;
  }
}


/* ==========================================================================
   9. Lists
   ========================================================================== */

ul, ol { margin-bottom: 10px; }

ul { list-style: none outside; }
ol { list-style: decimal; }

ol,
ul.square,
ul.circle,
ul.disc { margin-left: 30px; }

ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc   { list-style: disc outside; }

ul ul, ul ol,
ol ol, ol ul {
  margin: 0 0 5px 30px;
  font-size: 100%;
}

li {
  line-height: 1.5em;
  margin-bottom: 5px;
}

li:last-child      { margin-bottom: 0; }
ul.large li        { line-height: 21px; }
li p               { line-height: 21px; }
ul.spacer li       { margin-bottom: 1.5rem; }

/* Spacing for paragraphs/blocks */
pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2rem; }

/* Fancy list markers */
.no-indent             { margin-left: 8px;  padding-left: 8px; }
.list-acrobat          { list-style-image: url(../img/symbols/acrobat.gif);      margin-left: 12px; padding-left: 12px; }
.list-blue-pointer     { list-style-image: url(../img/symbols/blue-carret.png); }
.list-maroon-pointer   { list-style-image: url(../img/symbols/maroon-carret.png); }
.list-caret            { list-style-image: url(../img/symbols/carret.png); }
.list-caret-green      { list-style-image: url(../img/symbols/carret-on.png); }
.list-checklist        { list-style-image: url(../img/symbols/accept.png); }
.list-check            { list-style-image: url(../img/symbols/tick.png); }
.list-blue-dot         { list-style-image: url(../img/symbols/dot-blue.png); }
.list-maroon-dot       { list-style-image: url(../img/symbols/bullet-maroon.png); }
.list-gray-dot         { list-style-image: url(../img/symbols/bullet-gray.png); }
.list-gray-pointer     { list-style-image: url(../img/symbols/gray-carret.png); }
.list-gray-pointer-tips{ list-style-image: url(../img/symbols/gray-carret.png); }
.list-gray-pointer-tips li { margin-bottom: 20px; }
.list-white-arrow      { list-style-image: url(../img/symbols/arrow_white.png); color: #fff; }
.list-white-dot        { list-style-image: url(../img/symbols/white-dot.png); }
.list-white-box        { list-style-image: url(../img/symbols/white-bullet.gif); }
.list-computer         { list-style-image: url(../img/symbols/monitor.gif); }
.list-page             { list-style-image: url(../img/symbols/new_page.png); }
.list-white-pointer    { list-style-image: url(../img/symbols/white-carret.png); }
.list-white-pointer a          { color: #ffffff; text-decoration: underline; }
.list-white-pointer a:hover,
.list-white-pointer a:focus    { color: #F1FFC1; }

.list-number    { margin-left: 20px; padding-left: 20px; }
.list-number li { margin-bottom: 1em; }


/* ==========================================================================
   10. Tables
   ========================================================================== */

th, td {
  padding: 12px 15px;
  border-bottom: 1px solid #E1E1E1;
  vertical-align: text-top;
  text-align: left;
}

th:first-child, td:first-child { padding-left: 5px; }
th:last-child,  td:last-child  { padding-right: 5px; }

/* Border variants */
table.table-border-all,
table.table-border-outer { border: 1px solid #ededed; }

table.table-border-all th,
table.table-border-all td,
table.table-border-inner th,
table.table-border-inner td { border-right: 1px solid #ededed; }

#table-border-row td tr         { border-bottom: 2px solid #ededed; }
#table-border-row td:last-child tr:last-child { border: none; }

/* Hover / zebra */
table.table-hover-row tr:hover td,
table.table-hover-cell td:hover { background-color: #FFFCC3; }

table.table-fill-even tbody tr:nth-child(even),
table.table-fill-odd  tbody tr:nth-child(odd)  { background-color: #E9F0FB; }

/* Make tables horizontally scrollable on mobile instead of breaking layout */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}


/* ==========================================================================
   11a. Navigation — Top Bar & Search
   ========================================================================== */

.top-bar {
background-color: #0f1011;
}

.top-social-link {
	padding-top: 8px;
}

#search-menu {
  font-size: .7em;
  color: var(--neutral-white);
  text-align: right;	
  padding: 2px 10px 2px 10px;
}

#search-menu a       { color: #dddddd; text-decoration: none; margin-right: 8px; }
#search-menu a:hover,
#search-menu a:focus { color: #92DEFB; text-decoration: none; }

.menu-logo-bar {
  background-color: #354043;
  padding: 5px;
  margin: 0;
}

#menu-logo-bar {
  background-color: #354043;
  padding: 5px;
  margin: 0;
}

.logo     { width: 25%; float: left; }
.ht50     { height: 35px; overflow: hidden; }

.social-bar {
  width: 73%;
  float: left;
  text-align: right;
  padding-top: 4px;
}

@media screen and (max-width: 932px) {
  .logo {
    width: 70%;
    margin: auto;
    float: none;
    text-align: center;
  }
}

@media screen and (max-width: 770px) {
  #search-menu,
  #top-bar { display: none; visibility: hidden; }

  .page-background { background-image: none; }

  #page-content {
    padding-bottom: 40px;
    border-left: 0;
    border-right: 0;
  }

  .mobile-display { display: block; }
  .mobile-margin  { margin: 10px 0; }
}

@media (min-width: 550px) {
  #logo { width: auto; }
}

@media (min-width: 769px) {
  #logo { width: auto; text-align: left; }
}


/* ==========================================================================
   11b. Navigation — Side Nav
   ========================================================================== */

.list-side-nav {
  list-style-image: none;
  margin-left: 0;
  padding-left: 12px;
}

.list-side-nav ul { padding: 0; }

.list-side-nav li {
  margin-top: 0;
  margin-bottom: 0;
  color: #ffffff;
}

.list-side-nav a:link {
  padding: .5em .25em;
  display: block;
  text-decoration: none;
  color: var(--brand-blue);
  border-bottom: 1px solid var(--brand-blue);
}

.list-side-nav a:hover {
  display: block;
  background-color: var(--brand-maroon);
  color: #ffffff;
  text-decoration: none;
  border-bottom: 0;
}

.list-side-nav a:active { color: #ffffff; }

.list-side-nav .hilite a:link { color: #ffffff; }
.list-side-nav .hilite a:active { color: #ffffff; }

.hilite,
.hilite:hover,
.hilite a:visited {
  display: block;
  background-color: var(--brand-blue);
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid var(--brand-blue);
}

/* Footer list bullets */
.list-footer-bullet {
  list-style-image: url(../img/symbols/footer-carret.png);
  font-size: .9em;
  margin-left: 8px;
  padding-left: 8px;
}

a.list-footer-bullet           { color: #C9C9C9; text-decoration: none; }
a.list-footer-bullet:hover,
a.list-footer-bullet:active    { color: #F1FFC1; text-decoration: underline; }
a.list-footer-bullet:visited   { color: rgba(255, 255, 255, 0.80); text-decoration: underline; }


/* ==========================================================================
   11c. Navigation — Breadcrumbs
   ========================================================================== */

/* Dark breadcrumb */
.breadcrumb-dark       { color: rgba(83, 86, 100, 1); font-size: 85%; }
.breadcrumb-dark a:link,
.breadcrumb-dark a:visited { color: rgba(83, 86, 100, 1); text-decoration: none; }
.breadcrumb-dark a:hover   { color: #960609; text-decoration: underline; }

/* Light breadcrumb (for dark backgrounds) */
.breadcrumb-light       { color: #fff; font-size: 85%; }
.breadcrumb-light a:link,
.breadcrumb-light a:visited { color: #fff; text-decoration: none; }
.breadcrumb-light a:hover   { color: #CFF8FF; text-decoration: underline; }

/* #breadcrumb element */
#breadcrumb {
  margin: 5px 0 0 0;
  padding-left: 0;
  color: rgba(83, 86, 100, 1);
  font-size: 85%;
}

#breadcrumb li {
  display: inline-block;
  list-style-type: none;
}

#breadcrumb a:link,
#breadcrumb a:focus  { color: rgba(83, 86, 100, 1); text-decoration: none; }
#breadcrumb a:visited{ color: rgba(83, 86, 100, 1); text-decoration: none; }
#breadcrumb a:hover  { color: #960609; text-decoration: underline; }

#breadcrumb li:first-child::before {
  font-family: FontAwesome;
  content: '\f015';
  margin: 0 .6em;
}

#breadcrumb li::after {
  display: inline-block;
  list-style-type: none;
  font-family: FontAwesome;
  content: '\f105';
  margin: 0 .6em;
  color: #959fa5;
}

#breadcrumb li:last-child::after { content: ''; }

/* #breadcrumb-white (for dark backgrounds) */
#breadcrumb-white {
  margin: 0;
  padding: 0;
  color: #FDF7F7;
  font-size: 85%;
}

#breadcrumb-white li {
  display: inline-block;
  list-style-type: none;
}

#breadcrumb-white a:link,
#breadcrumb-white a:visited { color: #FDF7F7; text-decoration: none; }
#breadcrumb-white a:hover   { color: #CFF8FF; text-decoration: underline; }

#breadcrumb-white li:first-child::before {
  font-family: FontAwesome;
  content: '\f015';
  margin: 0 .6em;
}

#breadcrumb-white li::after {
  display: inline-block;
  list-style-type: none;
  font-family: FontAwesome;
  content: '\f105';
  margin: 0 .6em;
  color: #959fa5;
}

#breadcrumb-white li:last-child::after { content: ''; }


/* ==========================================================================
   11d. Navigation — SlickNav (Mobile)
   ========================================================================== */

.slicknav_menu { display: none; }
#menu          { display: none; }

@media screen and (max-width: 768px) {
  .js #big-menu      { display: none; }
  .js .slicknav_menu { display: block; }
  .hide-mobile       { display: none; visibility: hidden; }
}


/* ==========================================================================
   12. Header & Footer
   ========================================================================== */

.head-foot   { background-color: #24282d; color: #dddddd; }
.head-foot a { color: #dddddd; text-decoration: underline; }
.head-foot a:hover { color: #90C0E7; }

footer       { background-color: #303030; color: #dddddd; }
footer a:link    { color: #fff; text-decoration: none; }
footer a:hover   { color: #CFF8FF; text-decoration: underline; }
footer a:visited { color: #E9F4F9; }

.footer-contacts  { line-height: 2.5em; }

/* 5-column footer layout */
.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.footer-col {
  flex: 1;
  min-width: 160px;
  padding-right: 20px;
  margin-bottom: 15px;
}

.footer-col:last-child {
  padding-right: 0;
}

.footer-xlate-margin { margin-top: 40px !important; }

@media screen and (max-width: 767px) {
  .footer-xlate-margin { margin-top: 0 !important; }
}

.copyright {
  background-color: #000000;
  color: #dddddd;
  text-align: center;
  padding-top: 20px;
}

.copyright a         { color: #dddddd; text-decoration: underline; }
.copyright a:hover,
.copyright a:focus   { color: #90C0E7; }
.copyright a:visited { color: #dddddd; }
.copyright a:visited:hover { color: #90C0E7; }

.border-top { border-top: 1px solid #000; }


/* ==========================================================================
   13a. Page Layout — Page IDs & Containers
   ========================================================================== */
#big-menu {
	float: right;
}

#maincontent { outline: none; }

#page-content {
  background-color: #fff;
  padding-bottom: 20px;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
}

#page-content-noborder {
  background-color: #fff;
  padding-bottom: 0;
}

.interior-column-l {
  border-right: 1px solid rgba(83, 86, 100, 0.36);
  padding: 10px 30px 10px 20px;
}

.interior-column-r {
  padding: 10px 20px 10px 30px;
}


/* ==========================================================================
   13b. Page Layout — Well / Boxes
   ========================================================================== */

.well {
  background-color: #f9f9f9;
  border-color: #ededed;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 24px;
  padding: 0 10px;
}

.well h1, .well h2, .well h3,
.well h4, .well h5, .well h6,
.well .h1, .well .h2, .well .h3,
.well .h4, .well .h5, .well .h6,
.well .giga, .well .mega, .well .kilo { color: inherit; }

.well p { margin: 10px 0; }

.well header h1, .well header h2, .well header h3,
.well header h4, .well header h5, .well header h6,
.well header .h1, .well header .h2, .well header .h3,
.well header .h4, .well header .h5, .well header .h6 { margin: 20px 0 10px; }

.well header .label,
.well header .badge { margin-top: 10px; }

.well[class*='bg-'] { color: #fff; }

.well.bg-white { color: #666; border-color: var(--brand-blue); background-color: rgba(255,255,255,.70); }
.well.bg-black { border-color: #000; }

.well.bg-maroon,
.well.bg-green { border-color: #3d8b3d; background-color: #3d8b3d; color: #fff; }
.well.bg-green a:link,
.well.bg-green a:visited { color: #ffffff; text-decoration: underline; }
.well.bg-green a:hover   { color: aqua; }

.well.bg-light-green { border-color: #3d8b3d; color: #468847; }

.well.bg-blue { border-color: #28a1c5; background-color: #28a1c5; color: #fff; }
.well.bg-blue a:link,
.well.bg-blue a:visited { color: #ffffff; text-decoration: underline; }
.well.bg-blue a:hover   { color: aqua; }

.well.bg-light-blue   { border-color: #28a1c5; color: #3a87ad; }
.well.bg-yellow       { border-color: #b9730f; }
.well.bg-light-yellow { border-color: #b9730f; background-color: #F7E380; color: #321F0F; }
.well.bg-orange       { border-color: #E78004; background-color: #E78004; color: #fff; }
.well.bg-red          { border-color: #b52b27; color: #8C0507; background-color: rgba(227, 130, 132, .80); }
.well.bg-light-red    { border-color: #b52b27; color: #d2322d; }

@media (max-width: 750px) {
  .well { padding: 0; }
}

.gray-box {
  background-color: rgba(185, 186, 192, .20);
  border-top: 6px solid rgba(82, 85, 100, 1.00);
}

.gray-box p { line-height: normal; }

.news-box         { background-color: var(--brand-blue); color: #fff; }
.news-box a:link,
.news-box a:visited { color: #ffffff; text-decoration: underline; }
.news-box a:hover,
.news-box a:focus   { color: rgba(252, 252, 252, .70); }

.news-topic-border  { border-bottom: 3px solid rgba(255, 255, 255, .70); line-height: 1.5em; }
.news-section-border{ border-right: 1px dashed #fff; }
.news-top-border    { border-top: 1px #fff dashed; margin-top: 10px; }

@media screen and (max-width: 767px) {
  .news-section-border { border-right: 0; }
}

/* Drop shadow */
.drop-shadow {
  box-shadow: 0 0 8px 0 rgba(59, 59, 59, 0.93);
}
.drop-shadow:hover {
  box-shadow: 0 0 2px 0 rgba(59, 59, 59, 0.53);
}

/* Shape helpers */
.round-corners    { border-radius: 15px; padding: 10px; }
.round-corners-sm { border-radius: 5px;  padding: 10px; }
.round-div        { border-radius: 20px; }

.circle-div {
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  border: 3px solid #626161;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.square-div {
  width: 80%;
  height: 0;
  padding-bottom: 95%;
  border: 1px solid #626161;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  margin-bottom: 5px;
}

.square-div-lg {
  width: 96%;
  height: 0;
  padding-bottom: 110%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  margin-bottom: 5px;
}

.img-circle { border-radius: 50%; }


/* ==========================================================================
   13c. Page Layout — Cards & Storyboard
   ========================================================================== */

.card {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  border: 1px solid #D7D7D7;
  border-radius: 3px;
  margin-bottom: 1rem;
  position: relative;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.card:before { display: inline-block; padding-top: 0; }
.cardx img   { width: 100%; }

.card-title {
  line-height: normal;
  font-size: 120%;
  margin-bottom: 10px;
}

.storyboard {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

@media screen and (min-width: 541px) {
  .storyboard { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}

@media screen and (min-width: 760px) {
  .storyboard { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
}

/* Publication boxes */
.pub-box     { width: 100%; }
.pub-box img { max-width: 100%; height: auto; }


/* ==========================================================================
   13d. Page Layout — Block Headings
   ========================================================================== */

.block-heading {
  text-align: center;
  font-size: 1.25em;
  padding: 8px 0 4px 0;
  margin-bottom: 10px;
  color: #fff;
  display: block;
}


/* ==========================================================================
   13e. Page Layout — Contact Boxes
   ========================================================================== */

.contact-box {
  background-color: #f9f9f9;
  border-top: 6px solid #1F5293;
  color: #1F5293;
}
.contact-box a:link { color: #1F5293; text-decoration: underline; }
.contact-box a:hover{ color: #5c8727; }
.contact-box p      { line-height: 1.75em; }

.contact-box-maroon {
  background-color: #f9f9f9;
  border-top: 6px solid #6A2022;
  color: #6A2022;
}
.contact-box-maroon a:link { color: #6A2022; text-decoration: underline; }
.contact-box-maroon a:hover{ color: #5c8727; }
.contact-box-maroon p      { line-height: 1.75em; }

.contact-box-orange {
  background-color: #f9f9f9;
  border-top: 6px solid var(--brand-dark-orange);
  color: var(--brand-dark-orange);
}
.contact-box-orange a:link { color: var(--brand-dark-orange); text-decoration: underline; }
.contact-box-orange a:hover{ color: #5c8727; }
.contact-box-orange p      { line-height: 1.75em; }


/* ==========================================================================
   13f. Page Layout — Hover Boxes
   ========================================================================== */

.hoverbox-tomato { background-color: #AB1F22; color: #fff; }
.hoverbox-tomato:hover,
.hoverbox-tomato a:focus { background-color: var(--brand-orange); }


/* ==========================================================================
   14. Slider / Hero
   ========================================================================== */

.wide-container {
  max-width: var(--max-width);
  height: 400px;
  margin: 0 auto;
  padding: 0;
}

#slides .slides-container li {
  position: relative;
  margin: 0;
  text-align: center;
}

#slides .slides-container li > img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.message-bknd,
.message-bknd-dk {
	
	 display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  padding: 90px 20px 20px;
  box-sizing: border-box;
  color: #fff;
  z-index: 2;
  float: none;
  margin: 0;
  animation: none;
}

.message-bknd    { background-color: rgba(56, 103, 147, 0.70); }
.message-bknd-dk { background-color: rgba(38, 37, 37, 0.87); }

.message-title {
  color: #fff;
  font-size: 1.8em;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 10px;
  padding: 0;
}

.message-txt {
  color: #fff;
  font-size: 1.05em;
  line-height: 1.45;
  margin: 0;
}


.slides-pagination {
  position: absolute;
  z-index: 3;
  bottom: 10px;
  width: 100%;
  text-align: right;
  padding-right: 15px;
}


/* Slide-in animation */
@keyframes slideInRight {
  from { transform: translate3d(100%, 0, 0); visibility: visible; }
  to   { transform: translate3d(0, 0, 0); }
}
.slideInRight { animation-name: slideInRight; }

/* Slider responsive */
@media screen and (max-width: 1000px) {
  #slides .slides-container li > img { height: 360px; }

  .message-bknd,
  .message-bknd-dk { width: 40%; padding: 60px 16px 16px; }

  .message-title { font-size: 1.6em; }
}

@media screen and (max-width: 768px) {
  .wide-container { max-width: 100%; padding: 0; }

  #slides .slides-container li > img { height: 260px; }

  .message-bknd,
  .message-bknd-dk {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 14px;
  }

  .message-title { font-size: 1.35em; margin: 15px; }
  .message-txt   { font-size: 1em; text-align: center; }

  .slides-pagination { text-align: center; padding-right: 0; }
}

/* Magnific popup */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}


/* ==========================================================================
   15. Icons & Social
   ========================================================================== */

/* Social link icon pseudo-elements */
.social { padding-right: 10px; color: #dddddd; }
.social a:hover,
.social a:focus { color: #92DEFB; }

.social-icon { color: #dddddd; }

/* Focus rings on social icons */
.social-fb:focus,
.social-twitter:focus,
.social-youtube:focus,
.social-instagram:focus,
.social-nextdoor:focus,
.social-tiktok:focus,
.social-nixle:focus {
  outline: 3px solid #92DEFB;
  outline-offset: 2px;
}

/* Misc icon utilities */
.icon-phone::before { font-family: FontAwesome; content: '\f098'; font-size: 1.45em; margin: 0 .3em; display: inline-block; }
.icon-book::before  { font-family: FontAwesome; content: '\f02d'; font-size: 1.45em; margin: 0 .3em; display: inline-block; }
.icon-email::before { font-family: FontAwesome; content: '\f0e0'; font-size: 1.45em; margin: 0 .3em; display: inline-block; }

/* Before/After swap for social media icons */
a.beforeAfter {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

a.beforeAfter img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  z-index: 2;
  clip: rect(0, 20px, 20px, 0);
}

a.beforeAfter img:nth-of-type(2) { z-index: 1; }
a.beforeAfter:hover img:nth-of-type(1) { clip: rect(0, 0, 434px, 0); }

/* Up arrow navigator */
#top-navigator {
  position: fixed;
  right: 5%;
  bottom: 3%;
  text-align: center;
  border-radius: 20%;
  background: rgba(21, 30, 41, 1.00);
  width: 34px;
  height: 34px;
  padding: 6px;
  font-size: 1.5rem;
  color: #fff;
  opacity: .8;
  z-index: 99999;
  cursor: pointer;
  display: none;
}

#top-navigator:hover { opacity: .9; }


/* ==========================================================================
   16. Department Pages
   ========================================================================== */

.background-dept-head-image {
  height: 600px;
  background-image: url(../departments/images/CityHall_Banner.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bk-atty {
  height: 600px;
  background-image: url(../departments/images/CityAttorney_Banner.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bk-clerk {
  height: auto;
  background-image: url("../departments/images/CityClerk_Banner.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.bk-citymanager {
  height: 600px;
  background-image: url("../departments/images/CityManager_Banner.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-signature { color: #fff; padding-top: 150px; }

.signature-atty        { background-image: url("../departments/images/CityAttorney_signature.png");  background-position: center top; background-repeat: no-repeat; }
.signature-citymanager { background-image: url("../departments/images/CityManager_signature.png");   background-position: center top; background-repeat: no-repeat; }
.signature-cityclerk   { background-image: url("../departments/images/CityClerk_signature.png");     background-position: center top; background-repeat: no-repeat; }

.signature-title { padding-top: 100px; text-align: center; }

@media (max-width: 768px) {
  .contact-signature { padding-top: 10px; }

  .bk-atty,
  .bk-citymanager,
  .bk-clerk {
    height: 350px;
    background-image: url(../departments/images/CityHall_Banner.jpg);
  }

  .signature-atty,
  .signature-citymanager,
  .signature-cityclerk { background-image: none; }

  .signature-title { padding-top: 0; text-align: left; }
}

/* ==========================================================================
   5. Colors & Backgrounds
   ========================================================================== */

/* --- Text colors --- */
.color-maroon   { color: #582b2c; }
.color-red      { color: #a50b04; }
.color-white    { color: #ffffff; }
.color-green    { color: #3E6314; }
.color-blue     { color: var(--brand-blue); }
.color-dark-gray{ color: #464646; }
.color-gray     { color: #535664; }
.color-lt-gray  { color: #8B8989; }
.color-orange   { color: var(--brand-orange); }
.color-dk-orange{ color: var(--brand-dark-orange); }
.color-brown    { color: #3a2123; }

a.color-white         { color: #fff; text-decoration: underline; }
a.color-white:hover,
a.color-white:active  { color: #A2E5FD; text-decoration: underline; }
a.color-white:visited { color: #fff; text-decoration: underline; }

a.social-blue       { color: var(--brand-blue); }
a.social-blue:hover,
a.social-blue:focus { color: #739B09; }

a.no-underline         { text-decoration: none; }
a.no-underline:hover,
a.no-underline:active  { color: #A2E5FD; text-decoration: none; }
a.no-underline:visited { color: #fff; text-decoration: none; }

/* --- Background colors --- */
.bk-white      { background-color: #fff; }
.bk-cream      { background-color: #fff6ea; }
.bk-med-gray   { background-color: #B2B2B2; }
.bk-lt-gray    { background-color: #F1F1F2; }
.bk-vlt-gray   { background-color: rgba(185, 186, 192, .20); }
.bk-lt-blue    { background-color: #E2F4FE; }
.bk-brightblue { background-color: #8c9bb4; color: #fff; }
.bk-cdd-maroon { background-color: #814142; color: #fff; }
.bk-red        { background-color: #c4262e; color: #fff; }
.bk-dark       { background-color: rgba(0, 0, 0, .40); color: #ffffff; }

/* Colored backgrounds with link overrides — shared pattern */
.bk-blue,
.bk-blue2 {
  background-color: var(--brand-blue);
  color: #ffffff;
}

.bk-red a:link,
.bk-red a:visited     { color: #ffffff; text-decoration: underline; }
.bk-red a:hover,
.bk-red a:focus       { color: #A2E5FD; }
.bk-red a:visited:hover { color: #A2E5FD; }
.bk-red a:link,
.bk-red a:visited     { color: #ffffff; text-decoration: underline; }
.bk-red a:hover,
.bk-red a:focus       { color: #A2E5FD; }
.bk-red a:visited:hover { color: #A2E5FD; }

.bk-blue a:link,
.bk-blue a:visited     { color: #ffffff; text-decoration: underline; }
.bk-blue a:hover,
.bk-blue a:focus       { color: #A2E5FD; }
.bk-blue a:visited:hover { color: #A2E5FD; }
.bk-blue a:link,
.bk-blue a:visited     { color: #ffffff; text-decoration: underline; }
.bk-blue a:hover,
.bk-blue a:focus       { color: #A2E5FD; }
.bk-blue a:visited:hover { color: #A2E5FD; }

.bk-green { background-color: var(--brand-green); color: #ffffff; }
.bk-green a:link,
.bk-green a:visited     { color: #ffffff; text-decoration: underline; }
.bk-green a:hover,
.bk-green a:focus       { color: #A2E5FD; }
.bk-green a:visited:hover { color: #A2E5FD; }

.bk-med-green { background-color: #536315; color: #fff; }
.bk-med-green a:link,
.bk-med-green a:visited     { color: #ffffff; text-decoration: underline; }
.bk-med-green a:hover,
.bk-med-green a:focus       { color: #A2E5FD; }
.bk-med-green a:visited:hover { color: #A2E5FD; }

.bk-dark-gray { background-color: #535664; }
.bk-dark-gray a:link,
.bk-dark-gray a:visited     { color: #ffffff; text-decoration: underline; }
.bk-dark-gray a:hover,
.bk-dark-gray a:focus       { color: #A2E5FD; }
.bk-dark-gray a:visited:hover { color: #A2E5FD; }

.bk-orange { background-color: var(--brand-orange); color: #fff; }
.bk-orange a:link,
.bk-orange a:visited     { color: #ffffff; text-decoration: underline; }
.bk-orange a:hover,
.bk-orange a:focus       { color: #814142; }
.bk-orange a:visited:hover { color: #814142; }

.bk-dk-orange { background-color: var(--brand-dark-orange); color: #fff; }
.bk-dk-orange a:link,
.bk-dk-orange a:visited     { color: #ffffff; text-decoration: underline; }
.bk-dk-orange a:hover,
.bk-dk-orange a:focus       { color: #814142; }
.bk-dk-orange a:visited:hover { color: #814142; }

.bk-tomato { background-color: #AB1F22; color: #fff; }
.bk-tomato a:link,
.bk-tomato a:visited     { color: #ffffff; text-decoration: underline; }
.bk-tomato a:hover,
.bk-tomato a:focus       { color: #814142; }
.bk-tomato a:visited:hover { color: #814142; }

.bk-gray { background-color: #535664; color: #fff; }
.bk-gray a:link           { color: #fff; text-decoration: none; }
.bk-gray a:hover,
.bk-gray a:focus          { text-decoration: underline; color: #F8F3DA; }

.bk-darkblue { background-color: #004280; color: #fff; }
.bk-darkblue a:link       { color: #fff; text-decoration: none; }
.bk-darkblue a:hover,
.bk-darkblue a:focus      { text-decoration: underline; color: #F8F3DA; }

/* --- Button color variants --- */
.bk-gray-button    { background-color: #535664; color: #fff; }
.bk-gray-button:hover { background-color: #814142; }
.bk-gray-button a:link,
.bk-gray-button a:visited { color: #fff; text-decoration: none; }
.bk-gray-button a:visited:hover,
.bk-gray-button a:focus   { color: #fff; background-color: #814142; }

.bk-blue-button    { background-color: #535664; color: #fff; text-decoration: none; }
.bk-blue-button:hover { background-color: var(--brand-blue); text-decoration: none; }
.bk-blue-button a:link,
.bk-blue-button a:visited { color: #fff; text-decoration: none; }
.bk-blue-button a:visited:hover,
.bk-blue-button a:focus   { color: #fff; background-color: var(--brand-blue); text-decoration: none; }

.bk-green-button   { background-color: #535664; color: #fff; }
.bk-green-button:hover { background-color: #5c8727; }
.bk-green-button a:link,
.bk-green-button a:visited { color: #fff; text-decoration: none; }
.bk-green-button a:visited:hover,
.bk-green-button a:focus   { color: #fff; background-color: #5c8727; }

.bk-maroon-button  { background-color: #814142; color: #fff; }
.bk-maroon-button:hover { background-color: #680E08; }
.bk-maroon-button a:link,
.bk-maroon-button a:visited { color: #fff; text-decoration: none; }
.bk-maroon-button a:visited:hover,
.bk-maroon-button a:focus   { color: #fff; background-color: #680E08; }

.bk-dk-orange-button { background-color: #535664; color: #fff; }
.bk-dk-orange-button:hover { background-color: var(--brand-dark-orange); }
.bk-dk-orange-button a:link,
.bk-dk-orange-button a:visited { color: #fff; text-decoration: none; }
.bk-dk-orange-button a:visited:hover,
.bk-dk-orange-button a:focus   { color: #fff; background-color: #680E08; }

/* ==========================================================================
   17. Utilities & Helpers
   ========================================================================== */

/* Display */
.u-full-width     { width: 100%;    box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right     { float: right; }
.u-pull-left      { float: left; }

.center     { margin-left: auto; margin-right: auto; }
.txt-center { text-align: center; }
.txt-right  { text-align: right; }
.txt-left   { text-align: left; }

/* Borders */
.border-light { border: 1px solid #D9D7D7; }

/* Margins */
.margin-no-top      { margin-top: 0 !important; }
.margin-no-bottom   { margin-bottom: 0 !important; }
.margin-half-top    { margin-top: 10px !important; }
.margin-half-bottom { margin-bottom: 10px !important; }
.margin-add-top     { margin-top: 20px !important; }
.margin-add-bottom  { margin-bottom: 20px !important; }
.margin-add-top-lg  { margin-top: 40px !important; }
.margin-left        { margin-left: 20px !important; }
.margin-left-large  { margin-left: 60px !important; }
.margin-right       { margin-right: 20px !important; }

@media only screen and (max-width: 759px) {
  .margin-left-large { margin-left: 5px !important; }
}

@media only screen and (min-width: 480px) and (max-width: 759px) {
  .margin-left-large { margin-left: 3px !important; }
}

/* Padding */
.pad-top           { padding-top: 20px !important; }
.pad-bottom        { padding-bottom: 20px !important; }
.pad-top-bottom    { padding: 30px 0; }
.pad-half-bottom   { padding-bottom: 10px !important; }
.pad-remove-bottom { padding-bottom: 0 !important; }

.box-padding       { padding: 10px; }
.box-padding-sides { padding: 0 10px; }
.box-padding-side30{ padding: 0 30px; }
.box-padding-side60{ padding: 0 60px; }
.page-padding      { padding: 20px; }

@media (min-width: 300px)  { .box-padding { padding: 20px; } }
@media (min-width: 769px)  { .box-padding { padding: 10px; } }

/* Images */
.img-med   { width: 25%; }
.img-circle{ border-radius: 50%; }

@media (max-width: 768px) { .img-med { width: 60%; } }

/* Responsive show/hide */
@media (min-width: 300px) {
  .show-extra-small, .hide-Xlarge, .hide-large, .hide-small, .hide-medium { display: inline; visibility: visible; }
  .hide-extra-small, .show-Xlarge, .show-large, .show-small, .show-medium  { display: none;   visibility: hidden; }
}

@media (min-width: 769px) {
  .show-medium, .hide-Xlarge, .hide-large, .hide-extra-small, .hide-small  { display: inline; visibility: visible; }
  .hide-medium, .show-Xlarge, .show-large, .show-extra-small, .show-small  { display: none;   visibility: hidden; }
}

@media (min-width: 1000px) {
  .hide-Xlarge, .show-large, .hide-extra-small, .hide-small, .hide-medium  { display: inline; visibility: visible; }
  .show-Xlarge, .hide-large, .show-extra-small, .show-small, .show-medium  { display: none;   visibility: hidden; }
}

@media (min-width: 1200px) {
  .show-Xlarge, .hide-large, .hide-extra-small, .hide-small, .hide-medium  { display: inline; visibility: visible; }
  .hide-Xlarge, .show-large, .show-extra-small, .show-small, .show-medium  { display: none;   visibility: hidden; }
}

/* Visibility */
.visually-hidden { display: none; visibility: hidden; }
.prep-button     { padding: 5px; }


/* ==========================================================================
   18. Print Styles
   ========================================================================== */

#printhead { display: none; }

@media print {
  #printhead       { display: block; width: 100%; float: none; }
  header           { display: none; }
  .breadcrumb-dark { display: none; }
  .pg-title        { display: none; }
  .box-padding     { padding: 0; }
  .slider-wrapper  { display: none; }
  .head            { display: none; }
  .page-footer     { display: none; }
  .elastislide-list{ display: none; }
  #carousel        { display: none; }
  #big-menu        { display: none; }
  .section-links   { display: none; }
  a, a:visited     { text-decoration: underline; }
}


/* ==========================================================================
   19. Accessibility — Skip Link & ADA Focus
   ========================================================================== */

/* Skip link */
.skip {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
}

a.skip:active,
a.skip:focus,
a.skip:hover {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Audio-only skip link */
@media (min-width: 670px) {
  #audio-only {
    position: absolute;
    padding: 5px;
    left: 10%;
    top: 0;
    transform: translateX(-90%);
	  display: none;
  }
}

@media (max-width: 670px) {
  #audio-only { display: none; }
}

#audio-only p          { color: #1F1F1F; }
#audio-only a:link     { color: #1F1F1F; padding: 3px; }
#audio-only a:visited  { color: #1F1F1F; }
#audio-only a:hover    { background-color: #2C689F; color: #fff; }
#audio-only a:focus    { color: #ffffff; }

   .search-visible-label {
      display: inline-block;
      color: #dddddd;
      font-size: .8em;
      margin-right: 4px;
      vertical-align: middle;
    }
    @media (max-width: 770px) {
      .search-visible-label { display: none; }
    }

  #top-navigator:focus {
      outline: 3px solid #92DEFB;
      outline-offset: 3px;
    }

.box-shadow {
  background: #fff;
  padding: 20px;
  border-radius: 4px;

  /* Soft layered shadow for realism */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 6px rgba(0, 0, 0, 0.10),
    0 10px 20px rgba(0, 0, 0, 0.12);

}

ul.at-work {
	margin-left: 0;
	padding-left: 0;
}

.at-work li {
	padding: 5px 0px;
}

.emoji-bullet {
	font-size: 1.5em;
	padding-right: 10px;
}