body {
  margin: 0;
  padding: 0;
  font-family: "futura";
  background-color: var(--off-color);
  color: var(--darkblue);
}

* {
  scroll-behavior: smooth;
}

h1,h2,h3,h4,p {
  margin-top: 0;
}

h1,h2,h3,h4 {
  font-family: "filson-pro";
  font-weight: bold;
}

h1 {
  font-size: 28px;
  margin-bottom: 24px;
  hyphens: auto
}
h2 {
  font-size: 24px;
  margin-bottom: 24px;
  hyphens: auto
}
h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
h4 {
  font-size: 20px;
  margin-bottom: 18px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--darkblue);
  margin: 1em 0;
  padding: 0;
}

p {
  font-size: 18px;
  margin-bottom: 18px;
  font-family: "futura";
}
.truncate {
  margin-bottom: 18px;
}

small, p.small {
  font-size: var(--small-font);
  margin-bottom: var(--small-font);
}
p strong {
  font-family: "filson-pro";
  font-weight: normal;
}

a {
  color: inherit;
}

.max-width-wrapper {
  max-width: var(--max-width-inner);
  margin: 0 auto;
}

.content-line {
  margin: 0 var(--grid-gap-mobile);
  border-bottom: 1px solid var(--darkblue);
}

.hidden {
  display: none;
}

.align-right {
  text-align: right;
}
.align-center {
  text-align: center;
}

.full-height {
  height: 100%;
  box-sizing: border-box;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}

.bgimage-container {
  background-repeat: no-repeat;
}

.bg-cms {
  background-size: 100%;
  background-repeat:repeat-y;
}

.bgimage-cover {
  background-size: cover;
  background-position: center center;
}
.bgimage-scalable {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

.ar16x9 {
  /* aspect-ratio: 16/9; */
  max-height: 720px; /* use max height instead to not get too height */
}

.desktop-large-ar16x6 {
  max-height: 640px;
}

.overflow-hidden {
  overflow: hidden;
}

button, .button {
  display: block;
  height: 28px;
  line-height: 28px;
  border-radius: 14px;
  background-color: var(--darkblue);
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "futura";
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 0 14px;
  position: relative;
  clip-path: rect(auto auto auto auto round 14px);
  transition: transform .15s ease-in-out;
  will-change: transform;
  z-index: 1;
}
button:hover, .button:hover {
  color: var(--darkblue);
}
button::after, .button::after {
  background-color: var(--white);
  border-radius: 14px;
  content: '';
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  position: absolute;
  left: -1px;
  top: -1px;
  transform: translate(-105%, 0) rotate(10deg);
  will-change: transform;
  transform-origin: top left;
  transition: transform .15s ease-in-out;
  z-index: -1;
}
button:hover::after, .button:hover::after {
  transform: translate(0, 0);
}
button:focus, .button:focus {
  outline: none;
}
button.iblock, .button.iblock {
  display: inline-block;
}
.map-filters {
  margin-bottom: var(--grid-gap-mobile);
}
.map-filters .clear-filters, .map-filters .toggle-map-list {
  min-height: 39px;
  width: calc(100% - 2 * 20px);
  position: relative;
}
.map-filters .clear-filters div, .map-filters .toggle-map-list div {
  line-height: 30px;
  margin-top: 6px;
  padding-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.selectbox, .select2, .map-filters .clear-filters, .map-filters .toggle-map-list {
  float:none;
  display: inline-block;
  border-radius: 20px;
  border: none;
  background-color: var(--darkblue);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  font-family: "filson-pro";
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 0 20px;
}
.select2-container.select2-container--default {
  min-height: 39px;
}
.select2-container.select2-container--default .select2-selection--multiple, 
.select2-container.select2-container--default .select2-selection__choice,
.select2-container.select2-container--default .select2-selection--single{
  border: none;
  background-color: transparent;
  margin: 0;
}

.select2-container.select2-container--default:has(.select2-selection--multiple) {
  width: 100%;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow,
.filter-group .select2-container.select2-container--default .select2-selection--single .select2-selection__clear {
  display: none !important;
}
.select2-container.select2-container--default .select2-selection--single {
  margin-top: 6px;
  text-align: left;
}
.select2-container.select2-container--default .select2-search--inline .select2-search__field {
  font-family: "filson-pro";
  color: var(--white);
  font-weight: bold;
  padding: 5px 0 0 2px;
  margin: 0;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--white);
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 30px;
}

.filter-group .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container.select2-container--default .selection .select2-search--inline .select2-search__field::placeholder {
  color: var(--white);
  letter-spacing: 1px;
}
.select2-container.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove  {
  float: left;
  padding: 0 4px 0 0;
  margin-right: 0;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
  padding: 0;
  margin: 7px 0 0 0;
}
.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple {
   border: none;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered li.select2-selection__choice {
  padding: 2px 8px 0px;
  margin-top: 6px;
  color: var(--darkblue);
  background-color: var(--white);
  border-radius: var(--border-radius);
  border: 1px solid var(--darkblue);
  font-size: 14px;
}
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered li.select2-selection__choice .select2-selection__choice__remove {
  color: var(--darkblue);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--darkblue);
  line-height: 1.6;
}

.filter-group {
  flex: 0 0 100%;
  max-width: 100%;
}

.select2-container .select2-dropdown {
  border: none;
  box-shadow: 0 0 0 1px rgba(68,68,68,.11);
}
.select2-container .select2-dropdown .select2-results__option {
  color: var(--darkblue);
  padding: 10px 20px;
  font-family: "filson-pro";
  font-weight: bold;
  background-color: var(--white);
  font-size: 16px;
}
.select2-container.select2-container--default .select2-dropdown .select2-results__option--highlighted,
.select2-container .select2-dropdown .select2-results__option:hover,
.select2-container .select2-dropdown .select2-results__option--highlighted {
  background-color: var(--verylightgrey);
  color: var(--darkblue);
}
.select2-container .select2-dropdown.select2-dropdown--below {
  border-radius: 5px;
  background-color: var(--white);
  overflow: hidden;
}

.select2-container .select2-dropdown .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted):not(:hover) {
  background: #fff;
  color: var(--darkblue);
}
.select2-container .select2-search__field {
  caret-color: transparent;
}
.select2-selection--multiple, .select2-search__field {
  cursor: pointer !important;
}

#select2-instrument-select2-container::before, #select2-department-select2-container:before, #borough-select2 + .select2 .select2-selection .select2-selection__rendered::before, .map-filters .clear-filters::before, .map-filters .toggle-map-list::before  {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
}
#select2-instrument-select2-container, #select2-department-select2-container {
  padding-left: 20px;
  padding-right: 0;
}
#select2-instrument-select2-container::before {
  background: url('/site/templates/img/note_white.svg') no-repeat center center / contain;
}
#select2-department-select2-container::before {
  background: url('/site/templates/img/department_white.svg') no-repeat center center / contain;
}
#borough-select2 + .select2 .select2-selection .select2-selection__rendered {
  padding-left: 18px;
}
#borough-select2 + .select2 .select2-selection .select2-selection__rendered::before {
  background: url('/site/templates/img/marker_white.svg') no-repeat center center / contain;
}
.map-filters .clear-filters::before {
  background: url('/site/templates/img/reset_white.svg') no-repeat center center / contain;
}
.map-filters .toggle-map-list.map::before {
  background: url('/site/templates/img/map.svg') no-repeat center center / contain;
  filter: invert(1);
}
.map-filters .toggle-map-list.list::before {
  background: url('/site/templates/img/list.svg') no-repeat center center / contain;
  filter: invert(1);
}

.selectbox::after {
  display: none;
}
.selectbox .nice-select-dropdown {
  color: var(--darkblue);
}
.selectbox .list {
  margin: 0;
  max-height: none;
}
.selectbox .option {
  padding: 0 20px;
}
.selectbox .option.selected {
  font-weight: normal;
}
.selectbox .option:hover, .selectbox .option.focus, .selectbox .option.selected.focus {
  background-color: var(--lightgrey);
}
.btn-list-items {
  margin-top: var(--grid-gap-desktop);
}
.richtext img {
  max-width: 100%;
  height: auto;
}
.richtext h1 span {
  padding: 0 20px;
  color: var(--darkblue);
}
.richtext p strong {
  font-family: "filson-pro";
  font-weight: normal;
}
.richtext ul {
  margin: 32px 0;
  padding: 0 16px;
}
.richtext ul li {
  margin-bottom: 16px;
}
.richtext button, .richtext .button {
  display: inline-block;
}
.centered h1, 
.centered h2, 
.centered h3, 
.centered h4, 
.centered p,
.centered ol,
.centered ul {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.load-more {
  padding-bottom: var(--grid-gap-mobile);
}

.unveil-item {
  opacity: 0;
  transform: translateY(25%);
  transition: opacity .7s ease-in-out, transform .7s ease-in-out;
}
.unveil-item.seen {
  opacity: 1;
  transform: translateY(0) !important;
}
.unveil-item.unveil-mode-1 {
  transform: translateY(33.333%);
  transition: opacity .6s ease-in-out, transform .6s ease-in-out;
}
.unveil-item.unveil-mode-2 {
  transform: translateY(20%);
  transition: opacity .9s ease-in-out, transform .9s ease-in-out;
}
.unveil-item.unveil-mode-3 {
  transform: translateY(45%);
  transition: opacity .8s ease-in-out, transform .8s ease-in-out;
}

.mobile-only { display: block !important; }
.tablet-only { display: none; }
.to-tablet { display: block; }
.from-tablet { display: none; }
.to-desktop { display: block; }
.from-desktop { display: none !important; }

@media screen and (min-width: 768px) {
  .mobile-only { display: none !important; }
  .to-tablet { display: none; }
  .from-tablet { display: block; }
  .tablet-only { display: block; }
  .centered h1, 
  .centered h2, 
  .centered h3, 
  .centered h4, 
  .centered p,
  .centered ol,
  .centered ul  {
    max-width: 75%;
  }
  #matomo-opt-out {
    max-width: 75%;
    margin: 0 auto;
  }
  .filter-group:has(select:not([multiple])), .filter-group:has(.clear-filters), .filter-group:has(.toggle-map-list) {
    flex: 0 0 36%; 
    white-space: nowrap;
    text-align: left;
  }
  .filter-group:has(select[multiple]) {
    flex: 0 0 calc(72% + 13px);
  }
}

@media screen and (min-width: 1024px) {
  .tablet-only { display: none; }
  .to-desktop { display: none; }
  .from-desktop { display: block !important; }

  h1, h2 {
    font-size: 32px;
  }

  .richtext.big-text h1 {
    font-size: 48px;
  }
  .richtext.big-text h1 span {
    padding: 0 40px;
  }
  .richtext.big-text p {
    font-size: 24px;
  }

  .content-line {
    margin: 0 var(--grid-gap-desktop);
  }
  
  button, .button {
    font-size: 13px;
    padding: 0 21px;
    border-radius: 25px;
    clip-path: rect(auto auto auto auto round 25px);
    height: 38px;
    line-height: 38px;
  }
  button::after, .button::after {
    border-radius: 25px;
  }  
  .selectbox {
    font-size: 18px;
    padding: 0 30px;
    border-radius: 35px;
    height: 54px;
    line-height: 54px;
  }
  .selectbox .option {
    padding: 0 30px;
  }  

  .load-more {
    padding-bottom: var(--grid-gap-desktop);
  }  
  .desktop-large-ar16x6 {
    aspect-ratio: 16/8;
  }

  .map-filters .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap-mobile);
  }
  .map-filters .filter-group:has(select:not([multiple])), .map-filters .filter-group:has(.clear-filters), .map-filters  .filter-group:has(.toggle-map-list)  {
    flex: 0 0 calc((100% - 3 * var(--grid-gap-mobile)) / 4 * 1.3);
    min-width: 0;
  }
  .map-filters .filter-group:has(select[multiple]) {
    flex: 0 0 calc((100% - 3 * var(--grid-gap-mobile)) / 2 * 1.3 + var(--grid-gap-mobile));
    min-width: 0;
    order: 3;
  }
  .map-filters .filter-group:has(.clear-filters) {
    margin-left: auto;
  }
  .map-filters .filter-group:has(.toggle-map-list) {
    order: 4;
    margin-left: auto;
  }
}

@media screen and (min-width: 1180px) {
  .desktop-large-ar16x6 {
    aspect-ratio: 16/7;
  }
}

@media screen and (min-width: 1380px) {
  .content-line {
    max-width: var(--max-width-inner);
    margin: 0 auto;
  }
}

@media screen and (min-width: 1400px) {
  .desktop-large-ar16x6 {
    aspect-ratio: 16/6;
  }
}

@media screen and (min-width: 1440px) {
  .centered h1, .centered h2, .centered h3, .centered h4, .centered p,.centered ol, .centered ul  {
    max-width: 60%;
  }
}