/* scroll-behavior: smooth eases the transition on id links, scroll-margin: 40px leaves 40px above the id link (outside the element)  */
html {scroll-behavior: smooth; scroll-margin-inline-start: 40px; scroll-margin-block-start: 40px;}

/* Body */
body {background-color:#fff; background-image:none;}

.no-link a {text-decoration: none; border:0;}

/* Centers site in window */
.page-wrapper {margin:0 auto;}

/* Container limit was 84.375rem */
.container {max-width:100%; padding-left:0; padding-right:0;}

/*.grid-full {display: grid; grid-template-columns: auto}*/
/*.grid-full {display:inline-grid;}*/
.layout--content-medium, .layout--pass--content-medium > * {/*grid-template-columns: 100%;*/ grid-column: 1 / 15; }
.layout--content-medium .grid-full {display:inline-grid;}
.layout--pass--content-medium > * .layout--content-narrow {/*grid-template-columns: 100%;*/ grid-column: 1 / 15; }
/*.layout--twocol-section--50-50 .layout__region--first {flex-basis: calc(49% - 1.125rem);}*/

/* Makes the Social bar less wide */
.social-bar {width:1.5rem;}
.site-footer {border-left: solid 1.5rem transparent !important;}

/* General Padding and Margin fixes */
.main-content__container {padding-top:.25rem;}
.region, .region--content {margin-bottom:0;}
.layout {padding-bottom:0; margin-bottom:0;}
.node__content {padding-bottom:0; margin-bottom:0;}

/* Menu Background on mobile */
.header-nav.is-active .primary-nav__menu-item--link {background-color:#14487e; border:1px solid #115992; border-radius:12px;}
.header-nav.is-active .primary-nav__menu-item--link a {margin-left:1.5rem;}

/* Menu Padding and Margin fixes */
.primary-nav__menu-link-inner, .primary-nav__menu-item, .primary-nav__menu-item--level-1, .primary-nav__menu-item--level-2 , 
.primary-nav__menu-item--level-3, .primary-nav__menu-item--level-4, .body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {padding-top:2px!important; padding-bottom:5px!important;}
/* primary-nav__menu-item primary-nav__menu-item--link  */

/* Menu Font size */
/*.primary-nav__menu-link-inner {font-size:100%;}*/
.primary-nav__menu-li, .primary-nav__menu-link, .primary-nav__menu-link--link, .primary-nav__menu-link--level-3 {font-size:90%; font-weight:bold;}

/* Menu Color */
.mobile-nav-button__label {color:#fff;}

.colo-container {display: table; /* Make the container element behave like a table */ width: 100%; /* Set full-width to expand the whole page */}
.col75 {display: table-cell; /* Make elements inside the container behave like table cells */ width:75%; padding:20px 20px 40px 20px; color:#fff;}
.col2 {display: table-cell; /* Make elements inside the container behave like table cells */ width:50%; padding:20px 20px 40px 20px; color:#fff;}
.col3 {display: table-cell; /* Make elements inside the container behave like table cells */ width:33%; padding:20px 20px 40px 20px; color:#fff;}
.col4 {display: table-cell; /* Make elements inside the container behave like table cells */ width:25%; padding:20px 20px 40px 20px; color:#fff;}
.col4 h4 {color:#fff;}

/* ELocal Tour */
.tourbookwrap {margin-top:10px;}

/* Search Form */
.search-form {float:right;}

.header-image {width:100%; max-width:100%;}

/* Calendar Day Number */
.calendar-view-day {text-align:right;}

/* Event Calendar prev/next items are list items, so they default to stacking. This floats them so they are on a single line */
.js-pager__items li {float:left; margin-left:2em;}
.pager__item {width:auto;}

/* Event */
.p60 {max-width:60%; margin:0 auto; min-width:500px;}

/* Info-Bars */
.info-bar {display:block; background:#fff;}
.info-bar img {width:1.4em; margin:0 auto;}
.em2 {width:2em !important;}
.info-bar p {text-align:center; font-size: 80%;}
.info-bar-5 div {width: 20%; padding: 1em; float:left;}
.info-bar-6 div {width: 16%; padding: 1em; float:left;}
.info-bar-clear {clear:both; display:block; width:100%; height:10px;}

/* iframe slideshow */
[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

.slideshow-home {margin-bottom:10px;}

.home-notice-block {border:3px solid blue; border-radius: 10px; background:#eee; padding:20px; margin:10px; max-width:100%; margin:auto;}
.iframe-home {max-width:960px;}

/* Header and Footer */
.site-branding {background-image:none;} /*Overrides a lighter blue background behind the logo that is called by the theme*/
#header, .site-footer {background: #19599B;
background: -webkit-radial-gradient(center, #19599B, #14497E);
background: -moz-radial-gradient(center, #19599B, #14497E);
background: radial-gradient(ellipse at center, #19599B, #14497E);}
.site-header__initial {background-color:#19599B;}
.site-header__inner, .site-branding, .header-nav {/*background-color:#19599B;*/ background-color:transparent; background-image:none;}
/*.site-header, .site-footer {background: #19599B;}*/
.site-header, .site-branding {max-height:6.75rem;}
.site-branding__logo {margin-left:10px;}

.sticky-header-toggle {border:none; background-color: #19599B; background: radial-gradient(circle, rgba(0,144,255,1) 0%, rgba(15,64,122,1) 100%);}

.site-header, .site-branding {max-height:6.75rem;}
@media (min-width: 75rem) {
  .site-header {
    /* Necessary to keep the content from jumping up when header transitions to fixed. */
    max-height: 6.75rem; /*11.25rem;*/
    border-bottom: solid 1px transparent /* Will show in Windows high contrast mode. */}
  .site-header__inner {background: #19599B;}
  .sticky-header-toggle {border:2px solid white;}
  }

.region--secondary-menu, .menu--main a:link {color:#fff;}e
.region--secondary-menu, .menu--main a:visited {color:#fff;}
.header-nav {border-top: solid #14487e 54px;}

/* Menu Color Fixes */
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {background-color:#14487e;}
.block-search-wide__button {color:#fff;}

/* Removes the underlines in the Events */
.events-no-underline a:link {text-decoration:none;}

/* Header Image Adjustments */
.page-header-image {margin-bottom:15px; box-shadow: 1px 1px 2px #25577a;}

/* Adds border pops to the bluebars. Must add class bluebar to code */
.blue-bar, .blue-bar-text-left  {background: #19599B; background: -webkit-radial-gradient(center, #19599B, #14497E); background: -moz-radial-gradient(center, #19599B, #14497E); background: radial-gradient(ellipse at center, #19599B, #14497E); border-top: 1px outset #2161a6; border-bottom: 2px solid #0c2b4d; padding-top:1.5em; padding-right:2em; padding-bottom:2em; padding-left:2em; margin-top:-22px;}
.blue-bar-no-padding, .blue-bar-text-left-no-padding {background: #19599B; background: -webkit-radial-gradient(center, #19599B, #14497E); background: -moz-radial-gradient(center, #19599B, #14497E); background: radial-gradient(ellipse at center, #19599B, #14497E); border-top: 1px outset #2161a6; border-bottom: 2px solid #0c2b4d; clear:left; padding-top:0; padding-right:2em; padding-bottom:0; padding-left:2em;}
.blue-bar h1, .blue-bar h2, .blue-bar h3, .blue-bar h4, .blue-bar h5, .blue-bar h6, .blue-bar p {font-family: "Brawler", "metropolis", sans-serif; color:white; text-shadow:1px 1px #25577a; text-align:center;}
.blue-bar-no-padding h1, .blue-bar-no-padding h2, .blue-bar-no-padding h3, .blue-bar-no-padding h4, .blue-bar-no-padding h5, .blue-bar-no-padding h6, .blue-bar-no-padding p {font-family: "Brawler", "metropolis", sans-serif; color:white; text-shadow:1px 1px #25577a; text-align:center;}
.blue-bar-text-left h1, .blue-bar-text-left h2, .blue-bar-text-left h3, .blue-bar-text-left h4, .blue-bar-text-left h5, .blue-bar-text-left h6, .blue-bar-text-left p {font-family: "Brawler", "metropolis", sans-serif; color:white; text-shadow:1px 1px #25577a; text-align:left;}
.blue-bar-text-left-no-padding h1, .blue-bar-text-left-no-padding h2, .blue-bar-text-left-no-padding h3, .blue-bar-text-left-no-padding h4, .blue-bar-text-left-no-padding h5, .blue-bar-text-left-no-padding h6, .blue-bar-text-left-no-padding p {font-family: "Brawler", "metropolis", sans-serif; color:white; text-shadow:1px 1px #25577a; text-align:left;}

.text-content, .cke_editable {font-family: "Poppins", "metropolis", sans-serif !important; font-size: 1rem; line-height: 1.6rem;}

/* Removes the standard link css behavior */
.text-content .no-link a:not(.button) {
	  color: #fff;
    -webkit-text-decoration-color: #fff;
    text-decoration-color: #fff;
    transition: box-shadow 1s transparent;
    text-decoration: none;
    box-shadow: 0 0 0 0 transparent;
    border:none;}
    
.text-content p a:link {margin-top:0;}


/* Stops the blue bar and header image from splitting */
.text-content p .p-header-image {margin-bottom:0;}

/* Social Bar */
.social-bar {background-color:#fff;}

/* Calendar */
.current-month {border:1px solid #d3d3d3; font-size:80%;}

/* Home Image */
.home-image {max-width:100%;}
.home-image img	{max-width:100%; margin-left:auto; margin-right:auto; border-radius:15px;}

/* Image Gallery */
.w800 {width:100%; max-width:800px;}
.image-gallery-w800 {width:30%; max-width:265px; float:left;}
.image-gallery-w800-with-margin {width:30%; max-width:265px; float:left; margin-right:2px;}
.gallery-250th-img-margin {max-width:32%; margin-right:1%; float:left;}
.gallery-250th-img {max-width:33%;}

/* Widths */
.w100p {width:100%; max-width:100%;}
.w50p {width:50%;margin-left:25%;min-width:500px;}
.half {width:48%; float:left; margin-left:1%;}
.w40p {width:40%;min-width:480px;}

/* Header letting spacing */
h1, h2, h3, h4, h5, h6 {letter-spacing: 1px;}

/* Section or ID links */
/*.text-content h1 a:not(.button), .text-content h2 a:not(.button), .text-content h3 a:not(.button), .text-content h4 a:not(.button), .text-content h5 a:not(.button), .text-content h6 a:not(.button), .section a:not(.button) {
  color: #000;
    -webkit-text-decoration-color: #000;
    text-decoration-color: #000;
    transition: box-shadow 1s transparent;
    text-decoration: none;
    box-shadow: 0 0 0 0 transparent;
    border:none;
}*/

/* Content Divs */
.narrow-display {max-width:1040px; margin-left:auto; margin-right:auto;}
.narrow-display p {padding-left:20px; padding-right:20px;}
.container-narrow, .civil-service-exam-container, .job-posting-container {/*max-width:80%; margin:0 auto;*/max-width:100ch; margin-left:auto; margin-right:auto; padding-right:20px; padding-left:20px;}
.personnel-civil-service-BOS-seal {width:39%; max-width:610px; float:left; margin-left:5%;}
.personal-civil-service-BOS-seal img {width:100%;}
.personnel-civil-info {width:49%; float:right;}
.JobPostings .view-content {gap: 3px;}
.CivilService .view-content {gap: 3px;}
.EEO {width:220px; margin-left:auto; margin-right:auto;}
.last-filing-date {width:49%; float:left; text-align:center;}
.examination-date {width:49%; float:left; text-align:center;}
.fancy-button {width:32%; float:left; margin-top: 10px; margin-right:1%;} /* Modifies the fancy button so it works for the Civil Service tests */
.transfer {width:50px; float:left; margin-right:20px;} /* For the car in the blue Bar on Individual Transfer Station pages. The class 'deco' is set to display none in media queries */
.transfer-table {width:100%; margin-top: 1rem !important; margin-bottom: 2.25rem; border-spacing: 0; color: #313637; border: 0; border-right-color: #313637; border-right-style: solid;  border-right-width: 1px;  border-bottom-color: #313637;  border-bottom-style: solid;  border-bottom-width: 1px;  border-left-color: #313637;  border-left-style: solid;  border-left-width: 1px; border-collapse: collapse; font-family: "metropolis", sans-serif; font-size: 1rem; line-height: 1.6875rem;}
.transfer-table th, .transfer-table td {border:1px solid #313637; padding:10px !important;}
/* .da-staff {width:22%; padding:20px; background-color:#fff; border-radius:15px; float:left; margin-left:2%;} */
.da-staff-grid {display: grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:1rem;}
.da-staff {padding:20px; background-color:#fff; border-radius:15px;}
.da-staff img {border-radius:15px;}
.da-staff p {color:#fff; text-align:center;}
.paper {border:1px solid grey; width:90%; margin-left:5%; margin-bottom:2rem; background-color:#fff; padding:20px;}
.paper-full {border:1px solid grey; width:98%; margin-left:1%;  margin-bottom:2rem; background-color:#fff; padding:20px;}
.letter {
        background: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        margin: 26px auto 0;
        max-width: 550px;
        min-height: 300px;
        padding: 24px;
        position: relative;
        width: 80%;
      }
.letter:before,
.letter:after {
        content: "";
        height: 98%;
        position: absolute;
        width: 100%;
        z-index: -1;
      }
.letter:before {
        background: #fafafa;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        left: -5px;
        top: 4px;
        transform: rotate(-2.7deg);
        -webkit-transform: rotate(-2.7deg);
        -moz-transform: rotate(-2.7deg);
      }
.letter:after {
        background: #f6f6f6;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        right: -3px;
        top: 1px;
        transform: rotate(1.4deg);
        -webkit-transform: rotate(1.4deg);
        -moz-transform: rotate(1.4deg);
      }
      
.table-striped, .election-results {width:100%;}
.table-striped tr:nth-child(odd) {background-color: #EEE;}
.table-pad10LR tr, .table-pad10LR td {padding-right:10px !important; padding-left:10px !important;}
.table-padding-limited td {padding-top:.75rem !important; padding-bottom:.75rem !important;}
.table-center td {text-align:center;}
/*.max100 {box-sizing: border-box; width:calc(100% - 60px);}*/

.ph-news {background:#fff; border:1px solid #ccc; padding:20px; height:600px; overflow-y: scroll; padding:20px; /* This next part prevents the whole thing from breaking when there are long links - https://css-tricks.com/better-line-breaks-for-long-urls/*/
overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ hyphens: auto;}
.ph-news img {width:100%; height:auto; min-height:315px; max-width:1600px; margin:0 auto;}
/*.ph-news iframe {width:100%; height:315px; max-width:560px;}*/
.ph-news iframe {aspect-ratio: 16 / 9; width:100%; height:200%; min-height:315px; max-width:1600px;}
.vid {width:100%; height:auto; min-height:315px; max-width:1600px; margin:0 auto;}

a:target {border:1px solid red} /* Just for id links when clicked on */

/*.cybertipsdiv {width:60%; margin:0 auto;}*/
.cybertipsdiv p {text-align:center;}
.cybertipsdiv p span {font-size:150%;}

/* Menu Bottom */
.menu-bottom {margin-top: 1em; padding:20px; overflow-wrap: break-word; hyphens: manual; text-align:center;}
.menu-bottom img {display:inline;}
.menu-bottom p a:link, .menu-bottom p a:visited, .menu-bottom p a:active, .menu-bottom p a:hover {margin-left:2px; color:#c0d9fc; text-decoration:none;}

/*.site-footer {background: radial-gradient(ellipse at center, #19599B, #14497E); padding:2em 3em;}*/

/* Footer padding */
.site-footer__inner, .site-footer__inner .region, .site-footer__inner .text-content p, #block-fccopyright {padding-top:0; padding-bottom:0; margin-bottom:0;}

/* Footer Text Color */
.site-footer {color:#fff;}

/* Copyright */
.copyright {font-size:.7em; color:#fff; text-align:center; margin-top: 2em; margin-bottom:0; font-style: italic;}

/* For the Gallery Page */
.g-thirds-gallery {
  width:96%;
  margin-top:2.5rem;
  margin-left:auto; margin-right:auto;
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 33% 33% 33%;
}
.g-thirds-gallery-item {
  text-align:center; font-weight:bold; /* border: 1px solid rgba(0, 0, 0, 0.8); */ 
}
.g-thirds-gallery-item img {height:350px; border-radius:10px; }

@media (prefers-reduced-motion: reduce) {
  /* adjust motion of 'transition' or 'animation' properties as some viewers
may have issues with animation. They will have to have set their preference
in their browser. */
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* override styles when printing */
@media print {
	.info-bar img {display:none;}
a::after {
  content: " (" attr(href) ")";
}
}