/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



/* --------------- { COMMON STYLES } --------------- */

html.fixed {
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  color: #656467;
  font-size: 1.125rem;
  line-height: 2.2;
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.body-fixed-overlay {
  position: relative;
  overflow: hidden;
}

body.body-fixed-overlay::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: .1s ease-out;
  z-index: 999;
}

@media screen and (max-width:991px) {
  body {
    font-size: 1rem;
    line-height: 2;
  }
}

figure {
  margin: 0;
}

ul,
ol {
  margin-bottom: 0;
}

@media screen and (max-width:575px) {

  ul li,
  ol li {
    line-height: 1.5;
  }
}

a {
  margin: 0;
  color: #656467;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.5;
}

a strong {
  font-weight: bold;
}

.container-fluid a {
  margin: 0;
  text-decoration: underline;
  color: #656467;
  font-weight: 600;
}

a:hover {
  color: #477D51;
}

p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  line-height: 1.2;
}


/* Subtitles Base h2 */
h2 {
  color: #1F2428;
  font-size: 1.875rem;
}

.section-title-h3,
.section-title-h3 h3 {
  font-size: 1.375rem;
}

/* General Table Styles */
.table-wrapper {
  overflow: auto;
  max-height: 500px;
}

.table tbody::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.table::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Handle */
.table tbody::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.table::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #00000080;
}

.table {
  border-radius: 4px;
  border-collapse: unset;
  border-spacing: 0;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  max-height: 500px;
}

/* Base Styles */
.table > thead {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: top;
  position: sticky;
  top: 0;
}

.table tr td,
.table tr th {
  padding: 12px 15px;
  text-align: left;
  line-height: 1.2;
}

.table tr td {
  font-size: 1rem;
  color: #656467;
  background-color: #fff;
  border: 1px solid #ECEBEB
}

.table tr th {
  color: #656467;
  font-weight: 600;
  border: 1px solid #BEBCBD80;
}

/* Blue Table Variant */
.table-blue tr th {
  background-color: #D7E4F5;
  border: 1px solid #B2CFED;
}

.table-blue tr td {
  background-color: #FFFFFF;
  border: 1px solid #ECEBEB;
}

/* Gray Table Variant */
.table-gray tr th {
  background-color: #ECEBEB;
  border: 1px solid #BEBCBD80;
}

.table-gray tr td {
  background-color: #FFFFFF;
  border: 1px solid #ECEBEB;
}

.table tr th a {
  color: #656467;
  text-decoration: underline;
}

.table tr th a:hover,
.table tr th a:focus {
  color: #656467;
  text-decoration: underline;
}

.table thead tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

.table thead tr:first-child th:last-child {
  border-top-right-radius: 4px;
}

.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

@media screen and (min-width:576px) {

  /* ---- For Alternating Color Rows -------- */
  .table tr:nth-child(even) td {
    background-color: #F7F7F7;
  }
}

@media screen and (max-width:991px) {
  .table > thead {
    font-size: 1rem;
  }

  .table tr td {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 575px) {
  .table-wrapper {
    max-height: 100%;
  }

  .table {
    max-height: 100%;
    position: relative;
  }

  .table::-webkit-scrollbar-thumb {
    background: #00000080;
  }

  .table thead th {
    border-radius: 4px 4px 0 0;
  }

  .table tbody:first-child tr:first-child th:first-child {
    border-top-left-radius: 4px;
  }

  .table tbody:first-child tr:first-child td:last-child {
    border-top-right-radius: 4px;
  }

  .table tbody tr:last-child th:first-child {
    border-bottom-left-radius: 4px;
  }

  .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
  }

  .table tr th,
  .table tr td {
    min-width: 9.75rem;
    border-width: 1px;
  }

  .table tr th {
    font-size: 1rem;
    position: sticky;
    left: 0;
  }

  .table-gray tr th {
    border-color: #C2C7CF;
  }

  .table tr td {
    font-size: 0.875rem;
  }

  .table tbody {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table tbody::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    height: 100%;
    pointer-events: none;
  }

  /* Body Scroll Table CSS */
  .table.body-scroll-table thead,
  .table.body-scroll-table thead tr,
  .table.body-scroll-table thead th {
    display: block;
  }

  .table.body-scroll-table thead {
    z-index: 2;
    position: relative;
  }

  /* Alternating Row Colors */
  .table tr td:nth-child(odd) {
    background-color: #F7F7F7;
  }
}

thead > tr {
  border: 0;
  padding: 0;
}

#block-stla-content .table li {
  line-height: 1.2;
}

/* ceqa table */
.table.ceqa-table thead tr th:nth-child(1) {
  width: 23%;
}

.table.ceqa-table thead tr th:nth-child(2) {
  width: 21%;
}

.table.ceqa-table thead tr th:nth-child(3) {
  width: 20%;
}

@media screen and (max-width:991px) {

  .table.ceqa-table thead tr th:nth-child(1) {
    width: 21%;
  }

  .table.ceqa-table thead tr th:nth-child(2) {
    width: 23%;
  }

  .table.ceqa-table thead tr th:nth-child(3) {
    width: 32%;
  }
}

@media screen and (max-width:767px) {
  .table.ceqa-table thead tr th:nth-child(1) {
    width: 18%;
  }

  .table.ceqa-table thead tr th:nth-child(2) {
    width: 24%;
  }

  .table.ceqa-table thead tr th:nth-child(3) {
    width: 35%;
  }
}


/* Button */
.btn.btn-primary {
  color: #fff;
  min-height: 3rem;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  border: 1px solid #1F2428;
  background-color: #1F2428;
  transition: .15s ease;
}

.btn.btn-primary span {
  display: block;
}

.btn.btn-primary:hover {
  color: #8F8D90;
  border-color: #454649;
  background-color: #454649;
}

.btn.btn-primary:hover span {
  transform: scale(0.98);
}

/* For No-Gutters Row */
.row.no-gutters {
  --bs-gutter-x: 0;
}

/* Common CSS for named anchor's target elements */
.target-scroll {
  scroll-margin-top: 13rem;
}

@media screen and (max-width:1199px) {

  .target-scroll {
    scroll-margin-top: 15rem;
  }
}

@media screen and (max-width:991px) {

  .target-scroll {
    scroll-margin-top: 13rem;
  }
}


/* --------------- { CONTAINER STYLES } --------------- */

@media screen and (max-width: 575px) {
  .container {
    padding: 0 1.5rem;
  }

  /*#block-stla-content .container {*/
  /*  padding: 0 calc(1.5rem + 6px);*/
  /*}*/

  #block-stla-content .container .container {
    padding: 0;
  }
}

@media screen and (min-width: 576px) {
  .container {
    max-width: 688px;
  }

  #block-stla-content .container {
    max-width: 688px;
    padding: 0 1.25rem;
  }

  #block-stla-content .container .container {
    padding: 0;
  }
}

@media screen and (min-width: 768px) {
  .container {
    max-width: 760px;
  }

  #block-stla-content .container {
    max-width: 760px;
    padding: 0 1.25rem;
  }

  #block-stla-content .container .container {
    padding: 0;
  }
}

@media screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  #block-stla-content .container {
    max-width: 960px;
    padding: 0 1.25rem;
  }

  #block-stla-content .container .container {
    padding: 0;
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1240px;
    padding: 0 1rem;
  }

  #block-stla-content .container {
    max-width: 1240px;
    padding: 0 calc(1rem + 8px);
  }

  #block-stla-content .container .container {
    padding: 0;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
    padding: 0 2rem;
  }

  #block-stla-content .container {
    max-width: 1400px;
    padding: 0 calc(2rem + 8px);
  }

  #block-stla-content .container .container {
    padding: 0;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1664px;
    padding: 0 1rem;
  }

  #block-stla-content .container {
    max-width: 1400px;
    padding: 0 1.5rem;
  }

  #block-stla-content .container-large {
    max-width: 1664px;
    padding: 0 calc(1rem + 8px);
  }

  #block-stla-content .container .container {
    padding: 0;
  }
}


.container-fluid,
.container-edge-to-edge {
  padding: 0;
  overflow: hidden;
}

/* Custom Max-width Wrapper  */
.content-max-width {
  padding-left: 8.75rem;
  padding-right: 17rem;
}

@media screen and (max-width:1600px) {
  .content-max-width {
    padding-left: 9vw;
    padding-right: 12vw;
  }
}

@media screen and (max-width:1199px) {
  .content-max-width {
    padding-left: 5vw;
    padding-right: 6.5vw;
  }
}

@media screen and (max-width:991px) {
  .content-max-width {
    padding-left: 0;
    padding-right: 0;
  }
}



/* Subtitles */
.content-subtitle {
  font-size: 1.875rem;
}



/* --------------- { HEADER STYLES } --------------- */

#global_navbar_la_4324422 {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 555;
}


/* Header */
.header {
  position: fixed;
  top: 47px;
  right: 0;
  left: 0;
  z-index: 500;
}

.user-logged-in .header {
  top: 86px;
}

.user-logged-in #global_nav_la_4324422 {
  top: 39px !important;
}

.toolbar-tray-open .header {
  top: 127px;
}

.toolbar-tray-open #global_nav_la_4324422 {
  top: 80px !important;
  z-index: 500;
}

.toolbar-tray-open #global_navbar_la_4324422 {
  z-index: 500;
}

.header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, #72BD44 47.9%, #8FC664 66.87%, #72BD44 83.76%);
  box-shadow: 0px 4px 4px 0px #00000033;
  z-index: -1;
}

/* Header Primary Bar */
.header-primary-bar {
  padding: 1rem 0;
  overflow: visible;
  background-image: url(../images/navbar-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.header-primary-bar .bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header-primary-bar .bar-content .navbar-toggler {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.header-primary-bar .bar-content .navbar-toggler .bar {
  width: 2.25rem;
  height: 4px;
  border-radius: 20px;
  background-color: #F7F8FC;
}

.header-primary-bar .logo {
  position: absolute;
  top: -2px;
  left: 0;
  max-width: 7.75rem;
  z-index: 99;
}

.header-primary-bar .logo img {
  box-shadow: 0px 4px 4px 0px #00000033;
  border-radius: 50%;
}

.header-primary-bar .header-title h2 {
  padding-left: 2.5rem;
  font-size: 1.875rem;
  font-weight: bold;
  color: #F7F8FC;
  display: none;
}

/* for link */
.header-primary-bar .header-title a {
  color: #F7F8FC;
  text-decoration: none;
}

.header-primary-bar .header-icons {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1.5rem;
}

.header-primary-bar .header-icons .icon-block {
  line-height: normal;
}

.header-primary-bar .header-icons .icon-block img {
  opacity: 70%;
  max-height: 1.625rem;
  transition: .1s ease-out;
}

.header-primary-bar .header-icons .icon-block img:hover {
  opacity: 100%;
}

.gt_selector {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(../images/translate-icon.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px;
  max-width: 58px;
  height: 26px;
  max-height: 26px;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: transparent;
  opacity: 70%;
  transition: .1s ease-out;
  transform: translateY(1px);
}

.gt_selector option {
  color: #656467;
}

.gt_selector:hover {
  opacity: 100%;
}

.gt_selector:focus {
  outline: none;
}

.gt_selector:focus-visible {
  border: 1px solid black;
  border-radius: 2px;
  outline: 2px solid white;
}

.header-primary-bar .header-mobile-icons {
  display: none;
  align-items: center;
  justify-content: end;
  padding-top: 1rem;
  gap: 2rem;
}


/* Search Block Wrapper */
.search-block-wrapper .container {
  position: relative;
}

.search-block-wrapper .search-block-mobile {
  display: none;
  position: fixed;
  width: 22.5rem;
  height: 3.75rem;
  right: 60px;
  top: 100px;
  opacity: 0;
  visibility: hidden;
  z-index: 1050;
}

.search-block-wrapper .search-block-mobile.active {
  opacity: 1;
  visibility: visible;
}

.search-block-wrapper .search-block-mobile .form-control {
  border: 0;
  border-radius: 0;
  color: #9ca0a7;
  font-size: 1.375rem;
  padding: 0.875rem 1rem;
  background-color: #F7F8FC;
}

.search-block-wrapper .search-block-mobile .form-control:focus {
  box-shadow: none;
}

.search-block-wrapper .search-block-mobile .form-control::placeholder {
  color: #C2C7CF;
}

.search-block-wrapper .search-block-mobile .input-group-text {
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background-color: #F7F8FC;
}

.header-mobile-icons .search-toggle-btn {
  padding: 0;
  border: 0;
  background-color: transparent;
}

.header-mobile-icons .search-toggle-btn img {
  width: 2rem;
}

header #search-block-form {
  padding: 0;
  flex-flow: row wrap;
}

/* Responsive Styles */

@media screen and (max-width:1399px) {
  .header-primary-bar .header-title h2 {
    padding-left: 7rem;
  }
}

@media screen and (max-width:1199px) {
  .search-block-wrapper .search-block-mobile {
    right: 100px;
  }

  .header-primary-bar {
    padding: 1.5rem 0;
  }

  .header-primary-bar .logo {
    top: 0;
  }

  .header-primary-bar .header-icons {
    gap: 0.75rem;
  }

  .header-primary-bar .header-icons .icon-block img {
    margin-top: -.1rem;
    max-height: 1.375rem;
  }

  .gt_selector {
    max-height: 1.375rem;
    transform: translateY(0);
  }

  .header-primary-bar .header-mobile-icons {
    display: flex;
  }

  .search-block-wrapper .search-block-mobile {
    display: block;
  }
}

@media screen and (max-width:991px) {
  .header-primary-bar {
    padding: 1rem 0;
  }

  .header-primary-bar .logo {
    top: -2px;
    max-width: 7.375rem;
  }

  .header-primary-bar .header-title h2 {
    font-size: 1.625rem;
  }

  .header-primary-bar .header-icons {
    gap: 0.75rem;
  }

  .header-primary-bar .header-icons .icon-block img {
    max-height: 19px;
  }

  .gt_selector {
    height: 19px;
    max-height: 19px;
    max-width: 38px;
    background-size: contain;
  }

  .header-primary-bar .header-mobile-icons {
    padding-top: 0.75rem;
    justify-content: space-between;
  }

  .search-block-wrapper .search-block-mobile {
    top: 90px;
  }
}

@media screen and (max-width:767px) {
  .search-block-wrapper .search-block-mobile {
    right: 122px;
    top: 88px;
  }

  .header-primary-bar {
    background-image: url(../images/navbar-bg-mobile.png);
    background-position: left;
  }
}


@media screen and (max-width:767px) {
  .search-block-wrapper .search-block-mobile {
    right: 80px;
    top: 40px;
  }
}

@media screen and (max-width:575px) {
  .header-primary-bar {
    padding: 1rem 0 1.125rem 0;
    background-position: left;
  }

  .header-primary-bar .logo {
    margin-left: -5px;
  }

  .search-block-wrapper .search-block-mobile {
    right: 0;
    top: 100px;
    width: 100%;
  }

  .header-primary-bar .header-icons .icon-block img {
    max-height: 17px;
  }

  .gt_selector {
    max-height: 17px;
    transform: translateY(1px);
  }
}


@media screen and (min-width:670px) {
  .header-primary-bar .header-title h2 {
    display: block;
  }
}

@media screen and (max-width:669px) {
  .header-primary-bar .bar-content {
    justify-content: end;
  }
}


/* Header Navbar */
.navbar {
  padding: 0;
  position: relative;
  background-color: #fff;
}

.navbar .navigation {
  display: contents;
}

.navbar .navbar-nav {
  padding-left: 9rem;
}

.navbar .navbar-nav .menu-close-btn {
  display: none;
}

.navbar .navbar-nav .nav-item .nav-link {
  padding: 0.625rem 1.5rem;
  font-weight: bold;
  color: #1F2428;
  transition: .1s;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
  color: #656467;
  background-color: #ecebeb99;
}

.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
}

.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle.show {
  color: #656467;
  background-color: #ECEBEB;
}

.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle .arrow-icon {
  max-width: 0.75rem;
  transition: opacity .1s;
}

.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle.show .arrow-icon,
.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle:hover .arrow-icon {
  opacity: 60%;
}

.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle.show .arrow-icon {
  transform: rotate(180deg);
}

.navbar .navbar-nav .nav-item .nav-link.dropdown-toggle::after {
  display: none;
}


/* Search Block */
.navbar .search-block .form-control {
  padding: 2px 12px;
  font-size: 1.125rem;
  color: #454649;
  border: 1px solid #E2E1E1;
  border-radius: 4px;
}

.navbar .search-block .input-group {
  display: flex;
}

.navbar .search-block .form-control::placeholder {
  font-weight: 300;
}

.navbar .search-block .form-control:focus {
  box-shadow: none;
}

.navbar .search-block .input-group-text {
  padding: 4px 10px;
  background-color: #72BD44;
  border: 1px solid #72BD44;
  border-radius: 4px;
}

.navbar .search-block .input-group-text img {
  max-width: 1.25rem;
  transition: .1s;
}

.navbar .search-block:hover .input-group-text {
  background-color: #8FC664;
}

.navbar .search-block:hover .input-group-text img {
  transform: scale(0.95);
}


/* Dropdown Menu  */
.navbar .navbar-nav .dropdown .dropdown-menu {
  padding: 0;
  margin: 0;
  min-width: 320px;
  border: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 4px 4px 0px #00000033;
  overflow: hidden;
}

@media screen and (min-width:1200px) {
  .navbar .navbar-nav .dropdown .dropdown-menu {
    min-width: 20rem;
    max-height: 79vh;
    overflow: auto;
  }
}

.navbar .navbar-nav .dropdown .dropdown-item {
  padding: 0.5rem 3rem 0.5rem 2.5rem;
  font-weight: 600;
  color: #656467;
  background-color: #ECEBEB;
  border-top: 1px solid #DEDDDD;
  white-space: normal;
}

.navbar .navbar-nav .dropdown .dropdown-item:hover {
  background-color: #F7F8FC;
}


/* DropDown SubMenu  */
.navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-menu {
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: 0.375rem;
  background-color: #F7F8FC;
  box-shadow: none;
  border-radius: 0;
}

.navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-toggle.active {
  background-color: #F7F8FC;
}

.navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-toggle::after {
  display: none;
}

.navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-toggle .arrow-icon {
  max-width: 0.75rem;
  opacity: 60%;
}

.navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-menu .dropdown-item {
  border: 0;
  background-color: #F7F8FC;
  padding: 0.25rem 0;
}


/* Responsive Styles */

@media screen and (max-width:1399px) {
  .navbar .navbar-nav {
    padding-left: 9rem;
  }

  .navbar .navbar-nav .nav-item .nav-link {
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
  }

  .navbar .navbar-nav .nav-item .nav-link.dropdown-toggle {
    gap: 0.25rem;
  }

  .navbar .navbar-nav .dropdown .dropdown-menu {
    min-width: 17.5rem;
  }

  .navbar .navbar-nav .dropdown .dropdown-item {
    padding: 0.5rem 2rem;
    font-size: 0.9375rem;
  }

  .navbar .search-block {
    max-width: 14rem;
  }

  .navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-menu {
    padding-left: 2.5rem;
  }
}


@media screen and (max-width:1199px) {

  .navbar .navbar-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 22rem;
    height: 100%;
    background-color: #F7F8FC;
    padding-top: 6.5rem;
    padding-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 0.75rem;
    transform: translate(100%);
    transition: .3s;
    z-index: 1060;
  }

  .navbar .navbar-nav.active {
    transform: translate(0%);
  }

  .mobile-bg-overlay {
    position: fixed;
    right: 22rem;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    z-index: 1050;
  }

  .mobile-bg-overlay.active {
    opacity: .3;
    visibility: visible;
    transition: .5s ease-in;
  }

  .navbar .navbar-nav .menu-close-btn {
    top: 56px;
    right: 24px;
    border: 0;
    position: absolute;
    background-color: transparent;
    display: block;
  }

  .navbar .navbar-nav .nav-item .nav-link {
    color: #656467;
    font-size: 1.125rem;
    padding: 0.75rem 2.5rem 0.5rem;
  }

  .navbar .navbar-nav .nav-item .nav-link:hover {
    background-color: #F7F8FC;
  }

  .navbar .navbar-nav .nav-item .nav-link.dropdown-toggle .arrow-icon {
    opacity: 60%;
    max-width: 1rem;
    width: 100%;
  }

  .navbar .navbar-nav .dropdown .dropdown-menu {
    box-shadow: none;
  }

  .navbar .navbar-nav .dropdown .dropdown-item {
    color: #656467;
    font-size: 1rem;
    background-color: #ECEBEB;
    border-top: 1px solid #DEDDDD;
    padding: 0.5rem 1.5rem 0.5rem 4.5rem;
    white-space: normal;
  }

  .navbar .navbar-nav .dropdown .dropdown-item:hover {
    background-color: #ECEBEB;
  }

  .navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-menu {
    padding-left: 6rem;
    background-color: #ecebeb;
  }

  .navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-toggle.active,
  .navbar .navbar-nav .dropdown .dropdown-submenu .dropdown-menu .dropdown-item {
    background-color: #ecebeb;
  }

  .navbar .search-block {
    display: none !important;
  }
}


@media screen and (max-width:575px) {
  .mobile-bg-overlay {
    display: none;
  }

  .navbar .navbar-nav {
    max-width: 100%;
  }
}

/* --------------- { MAIN STYLES } --------------- */

/* featured-top is used for slider on home page and division page */
.main,
.featured-top {
  padding-top: calc(7.5rem + 47px);
}

.slider-image .container {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}

@media screen and (max-width:1199px) {

  .main,
  .featured-top {
    padding-top: calc(8.125rem + 47px);
  }
}

@media screen and (max-width:991px) {

  .main,
  .featured-top {
    padding-top: calc(7rem + 45px);
  }
}

/* _ */
.featured-top__inner {
  position: relative;

}

.page-vocabulary-division .main,
.path-frontpage .main {
  padding-top: 0px;
}



/* Common Body Head */
.block-system-breadcrumb-block {
  padding: 2.5rem 0 0 0;
}

.body-head {
  padding: 0 0 2rem 0;
}

.path-frontpage .body-head {
  padding: 0;
}

.block-system-breadcrumb-block nav {
  padding: 0px 0px 0px 0.5rem;
}

.block-system-breadcrumb-block .breadcrumb {
  margin-bottom: 0;
}

.block-system-breadcrumb-block .breadcrumb .breadcrumb-item {
  color: #656467;
  font-size: 0.875rem;
  line-height: 20px;
  text-transform: uppercase;
}

.block-system-breadcrumb-block .breadcrumb .breadcrumb-item a {
  color: #656467;
  font-weight: normal;
  text-decoration: underline;
  text-transform: uppercase;
}

.block-system-breadcrumb-block .breadcrumb .breadcrumb-item a:hover {
  color: #477D51;
  text-decoration: none;
}

.body-head .head-title {
  max-width: 75rem;
  padding-top: 2.25rem;
}

.body-head .head-title h1 {
  color: #1F2428;
  font-size: 3.75rem;
  font-weight: bold;
  padding-left: 5px;
}


/* Responsive Styles */
@media screen and (max-width:1199px) {
  .block-system-breadcrumb-block {
    padding: 2.75rem 0 0 0;
  }

  .body-head {
    padding: 0 0 2rem 0;
  }

  .body-head .head-title {
    padding-top: 1.5rem;
  }

  .body-head .head-title h1 {
    font-size: 3.5rem;
  }
}

@media screen and (max-width:767px) {
  .block-system-breadcrumb-block {
    padding: 2.5rem 0 0 0;
  }

  .body-head {
    padding: 0 0 1.5rem 0;
  }

  .block-system-breadcrumb-block {
    padding: 2.125rem 0 0 0;
  }

  .block-system-breadcrumb-block nav {
    padding: 0px 0px 0px 0.40rem;
  }

  .body-head .head-title h1 {
    font-size: 3.125rem;
  }

  .page-vocabulary-division .body-head .head-title h1 {
    font-size: 2.0rem;
    color: #fff;
  }

  .page-node-16 .body-head .head-title h1,
  .page-node-41 .body-head .head-title h1 {
    font-size: 46px;
  }
  .page-node-196 .body-head .head-title h1 {
    font-size: 45px;
  }

  .page-node-31 .layout-builder__layout {
    --bs-gutter-x: 0;
  }

  @media screen and (max-width: 575px) {
    .body-head .head-title h1 {
      padding-left: 0;
      margin-left: -2px;
    }
    .block-system-breadcrumb-block nav {
      padding: 0;
    }
  }
}

/* Common Request-Service Section  */

.request-services-section {
  padding-top: 4.5rem;
  padding-bottom: 3.75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 69rem;
}

.path-frontpage .request-services-section {
  margin-top: 0;
  padding-top: 0;
}

/* Request Service Text */
.home-subtitle {
  font-size: 1.75rem;
  padding: 0.67rem 0 0.67rem 0;
}

.path-frontpage .home-title-wrapper h2 {
  color: #656467;
}

.request-services-section .service-block-wrapper {
  column-gap: 1rem;
}

.request-services-section .service-block {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.25rem 1rem;
  text-align: center;
  border-radius: 4px;
  background-color: #fff;
  border: 1.5px solid #ECEBEB4D;
  border-width: 1.5px 0 0 1.5px;
  box-shadow: 2px 2px 4px 1px #00000014;
  transition: .1s ease-out;
}

.request-services-section .service-block:hover {
  background-color: #F7F8FC;
  box-shadow: 2px 2px 4px 1px #00000014 inset;
}

.request-services-section .service-block.active {
  background-color: #F7F8FC;
  box-shadow: 2px 2px 4px 1px #00000014 inset;
}

.request-services-section .service-block.active .service-icon {
  fill: #709472;
}

.request-services-section .service-block.active h3 {
  color: #709472;
}

.resource-content-block .service-block.active p a {
  color: #477D51;
  text-decoration: none;
}

.request-services-section .service-block .service-icon {
  max-width: 100%;
  fill: #036A38;
}

/*--------------------------------
 ## Extra Class Added to SVG Icons
---------------------------------*/

.request-services-section .service-block .service-icon.pothole-icon {
  transform: translateX(7px);
}

.request-services-section .service-block .service-icon.permits-icon {
  transform: translateX(5px);
}



.request-services-section .service-block:hover .service-icon {
  fill: #709472;
}

.request-services-section .service-block h3 {
  padding-top: 1rem;
  color: #036A38;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}

.request-services-section .service-block:hover h3 {
  color: #709472;
}


/* Responsive Styles */
@media screen and (max-width:1199px) {
  .request-services-section .service-block-wrapper {
    column-gap: 0;
  }

  .request-services-section .service-block .service-icon.pothole-icon {
    transform: translateX(6px);
  }

}

@media screen and (max-width:991px) {
  .request-services-section {
    padding: 3.5rem 0 4rem 0;
    background-color: #F7F8FC;
    margin-top: 2.5rem;
  }

  .path-frontpage .home-title-wrapper {
    background-color: #F7F8FC;
    font-size: 2rem;
  }

  .path-frontpage .request-services-section {
    margin-top: 0;
  }

  .request-services-section .service-block-wrapper {
    column-gap: 0;
    row-gap: 1.5rem;
    justify-content: center;
  }

  .request-services-section .service-block h3 {
    order: 1;
    padding-top: 0;
  }

  .request-services-section .service-block .service-icon {
    order: 2;
    max-width: 5rem;
    height: 4.5rem;
    margin-top: 1rem;
  }

  .request-services-section .service-block .service-icon.sweeping-icon {
    transform: translate(-4px);
  }

}


@media screen and (max-width:767px) {
  .request-services-section .service-block {
    min-height: 9.5rem;
    padding: 1rem 0.5rem;
  }

  .request-services-section .service-block .service-icon {
    margin-top: 0.5rem;
  }
}


@media screen and (max-width:575px) {
  .request-services-section {
    padding: 2rem 0 2.5rem 0;
    background-color: #F7F8FC;
    margin-top: 2rem;
  }

  .request-services-section .service-block .service-icon.pothole-icon {
    transform: translateX(4px);
  }
}






/* Resource Image Block */

.resource-image-block {
  overflow: hidden;
  max-height: 50rem;
}

.resource-image-block img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1920/800;
}


/* Responsive Styles */
@media screen and (max-width:991px) {
  .resource-image-block {
    max-height: 25rem;
  }

  .resource-image-block img {
    aspect-ratio: 768/400;
  }
}


@media screen and (max-width:575px) {
  .resource-image-block {
    max-height: 23rem;
  }

  .resource-image-block img {
    aspect-ratio: 1/1;
  }
}

/* Resource Content Block */

.resource-content-block {
  padding: 3.75rem 0 0 0;
}

.resource-content-block p {
  color: #656467;
  font-size: 1.125rem;
  line-height: 2.2;
  padding-bottom: 1.5rem;
}

.resource-content-block p:last-child {
  padding-bottom: 0;
}

.resource-content-block p a {
  color: #656467;
  text-decoration: underline;
}

.resource-content-block p a:hover {
  color: #477D51;
  text-decoration: none;
}

/* Responsive Styles */
@media screen and (max-width:1199px) {
  .resource-content-block {
    padding: 3rem 0 0 0;
  }
}

@media screen and (max-width:991px) {
  .resource-content-block {
    padding: 3rem 0;
  }

  .resource-content-block p {
    font-size: 1rem;
    line-height: 2;
    padding-bottom: 1rem;
  }
}

@media screen and (max-width:767px) {
  .resource-content-block {
    padding: 2.5rem 0;
  }
}

.hero-image img {
  width: 100%;
  height: auto;
  margin: 0;
}

.hero-image .field--type-entity-reference {
  margin: 0;
}


/* Newsletter Signup Section */

.newsletter-signup-section {
  padding: 1.5rem 0;
  background-color: #E0E3EA;
}

.newsletter-signup-section .newsletter-content-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.newsletter-signup-section .newsletter-content-grid h2 {
  color: #036A38;
  font-size: 1.625rem;
  font-weight: bold;
}

.newsletter-signup-section .newsletter-content-grid .newsletter-form {
  flex: 1;
}

.newsletter-signup-section .newsletter-content-grid .newsletter-form .form-group {
  display: flex;
  align-items: center;
}

.newsletter-content-grid .newsletter-form .form-control {
  color: #656467;
  font-size: 1.25rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #C2C7CF99;
}

.newsletter-content-grid .newsletter-form .form-control:focus {
  box-shadow: none;
}

.newsletter-content-grid .newsletter-form .form-control::placeholder {
  color: #BEBCBD;
}

.newsletter-content-grid .newsletter-form .subscribe-button {
  width: 100%;
  max-width: 200px;
  min-height: 3rem;
  margin-left: 1.5rem;
}


/* Responsive Styles */
@media screen and (max-width:1199px) {
  .newsletter-signup-section .newsletter-content-grid h2 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width:991px) {
  .newsletter-signup-section {
    padding: 2rem 0;
  }

  .newsletter-signup-section .newsletter-content-grid {
    display: block;
  }

  .newsletter-signup-section .newsletter-content-grid h2 {
    font-size: 1.375rem;
    padding-bottom: 1.5rem;
  }
}

@media screen and (max-width:575px) {
  .newsletter-signup-section .newsletter-content-grid .newsletter-form .form-group {
    flex-direction: column;
  }

  .newsletter-content-grid .newsletter-form .subscribe-button {
    margin-left: auto;
    margin-top: 1.25rem;
  }
}







/* --------------- { FOOTER STYLES } --------------- */

.footer {
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 10px;
  width: 100%;
  background: linear-gradient(90deg, #454649 38.96%, #656467 98.54%);
}

.footer .footer-main-block {
  padding: 5.75rem 0 8.5rem 0;
  background-color: #1F2428;
  background-image: url(../images/footer-desktop-bg.png);
  background-position: left;
  background-size: cover;
}

.footer-main-block .region-footer-first,
.footer-main-block .block,
.footer-main-block .block .content,
.footer-main-block .block .content .field {
  height: 100%;
}

.footer-main-block .site-info {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 27.5rem;
}

.footer-main-block .site-info .logo-block {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.footer-main-block .site-info .logo-block .site-logo {
  max-width: 6.5rem;
  display: block;
}

.footer-main-block .site-info .logo-block .govt-logo-wrap {
  display: flex;
  align-items: end;
  gap: 2.5rem;
}

.footer-main-block .site-info .logo-block .govt-logo-wrap a {
  display: block;
  max-width: 5.25rem;
}

.footer-main-block .site-info .location {
  color: #F7F8FC;
  padding-top: 1.375rem;
  padding-left: 0.5rem;
}

.footer-main-block .site-info .location p {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.footer-main-block .site-info .social-icons-tray {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.625rem;
  padding-left: 0.5rem;
}

.footer-main-block .site-info .social-icons-tray a img {
  min-height: 2rem;
}

.footer-main-block .site-info .vzero-logo {
  padding-top: 2.5rem;
  padding-left: 0.5rem;
  margin-top: auto;
  position: relative;
  bottom: 4px;
}

.footer-main-block .site-info .vzero-logo a {
  display: block;
  max-width: 16rem;
}

.footer-main-block .footer-nav-wrapper {
  padding-top: 2.5rem;
  padding-left: 0.5rem;
}

.footer-main-block .footer-nav-wrapper .footer-nav h2,
.footer-main-block .footer-nav-wrapper .footer-nav h5 {
  color: #F7F8FC;
  font-size: 1.5rem;
  font-weight: 600;
  padding-bottom: 2rem;
}

.footer-main-block .footer-nav-wrapper .footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0;
}

.footer-main-block .footer-nav-wrapper .footer-nav ul::after {
  display: none;
}

.footer-main-block .footer-nav-wrapper .footer-nav ul li {
  line-height: 1.5;
}

.footer-main-block .footer-nav-wrapper .footer-nav ul li a {
  color: #F7F8FC;
  font-size: 1rem;
  font-weight: normal;
  padding: 0;
}

.footer-main-block .footer-nav-wrapper .footer-nav ul li a:hover {
  color: #477D51;
  text-decoration: underline;
}

.footer .footer-copyright-block {
  padding: 1.6rem 0;
  background-color: #036A38;
}

.footer .footer-copyright-block p {
  font-size: 1rem;
  color: #F7F8FC;
  text-align: center;
  line-height: 1.3;
}

.footer .footer-copyright-block p a {
  color: #F7F8FC;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: underline;
}

.footer .footer-copyright-block p a:hover {
  text-decoration: none;
}


/* Responsive Styles */
@media screen and (max-width: 1199px) {
  .footer .footer-main-block {
    padding: 4rem 0;
  }

  .footer-main-block .site-info .social-icons-tray {
    padding-top: 1.75rem;
  }

  .footer-main-block .site-info .social-icons-tray a img {
    min-height: 2.5rem;
  }

  .footer-main-block .site-info .vzero-logo {
    padding-top: 4.5rem;
    margin-top: 0;
    position: static;
  }

  .footer-main-block .site-info .vzero-logo a {
    max-width: 15rem;
  }

  .footer-main-block .footer-nav-wrapper {
    padding-top: 1rem;
    padding-left: 0;
  }

  .footer-main-block .footer-nav-wrapper .row {
    row-gap: 3.5rem;
  }

  .footer-main-block .footer-nav-wrapper .footer-nav h5 {
    padding-bottom: 1.25rem;
  }
}

@media screen and (max-width: 991px) {
  .footer .footer-main-block {
    background-image: url(../images/footer-tablet-bg.png);
  }

  .footer-main-block .site-info .logo-block .site-logo {
    max-width: 6.5rem;
    display: block;
  }

  .footer-main-block .site-info .logo-block .govt-logo-wrap {
    gap: 1.5rem;
  }

  .footer-main-block .site-info .logo-block .govt-logo-wrap a {
    max-width: 4.5rem;
  }

  .footer-main-block .site-info .location {
    padding-top: 2rem;
    max-width: 15rem;
  }

  .footer-main-block .site-info .social-icons-tray {
    padding-top: 2.5rem;
    gap: 1.5rem;
  }

  .footer-main-block .site-info .social-icons-tray a img {
    min-height: 2.75rem;
  }

  .footer-main-block .footer-nav-wrapper {
    padding-left: 5rem;
  }

  .footer-main-block .footer-nav-wrapper .row {
    row-gap: 3rem;
  }

  .footer .footer-copyright-block {
    padding: 1.5rem 0;
  }

  .footer .footer-copyright-block p {
    font-size: 0.9375rem;
    line-height: 1.4;
  }
}

@media screen and (max-width: 767px) {
  .footer-main-block .footer-nav-wrapper {
    padding-left: 2.5rem;
  }
}

@media screen and (max-width: 575px) {
  .footer .footer-main-block {
    padding: 4rem 0 2.75rem 0;
    background-image: url(../images/footer-mobile-bg.png);
  }

  .footer-main-block .site-info .logo-block {
    max-width: 20rem;
  }

  .footer-main-block .site-info .location {
    line-height: 1.2;
    padding-top: 1.5rem;
    padding-left: 0.375rem;
  }

  .footer-main-block .site-info .social-icons-tray {
    padding-top: 2rem;
    padding-left: 0.375rem;
  }

  .footer-main-block .site-info .social-icons-tray a img {
    min-height: 2.5rem;
  }

  .footer-main-block .site-info .vzero-logo {
    padding-top: 3rem;
    padding-left: 0.375rem;
  }

  .footer-main-block .footer-nav-wrapper {
    padding-left: 0.375rem;
    padding-top: 4rem;
  }

  .footer-main-block .footer-nav-wrapper .row {
    row-gap: 3.5rem;
  }
}

#drupal-off-canvas-wrapper {
  z-index: 999;
}

.alert-wrapper .alert {
  height: auto;
  overflow-y: unset;
}

.alert svg {
  max-height: 2rem;
}

.alert-wrapper {
  position: unset;
}

.hero-image div.dynamic-hero {
  display: none;
}

/* Show the correct image for each viewport */
@media screen and (min-width: 992px) {

  .hero-image div.dynamic-hero.desktop,
  .hero-image div.dynamic-hero.all {
    display: block;
  }
}

@media screen and (min-width: 767px) and (max-width: 991px) {

  .hero-image div.dynamic-hero.tablet,
  .hero-image div.dynamic-hero.all {
    display: block;
  }
}

@media screen and (max-width: 767px) {

  .hero-image div.dynamic-hero.mobile,
  .hero-image div.dynamic-hero.all {
    display: block;
  }
}

.iframe-block {
  border-radius: 4px;
  box-shadow: 0px 0px 16px 0px #00000014;
}

/* Hide all iFrames by default */
.iframe-block > div {
  display: none;
}

.iframe-block iframe {
  width: 100%;
  height: 670px;
}

/* shadows */

/* Desktop */
@media screen and (min-width: 992px) {
  .iframe-block > div.desktop {
    display: block;
  }
}

/* Tablet */
@media screen and (min-width: 767px) and (max-width: 991px) {
  .iframe-block > div.tablet {
    display: block;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .iframe-block > div.mobile {
    display: block;
  }
}



/* --------------------------------------
            HISTORY PAGE CSS
--------------------------------------*/


/* .history-timeline .container {
  max-width: 100%;
} */

/*  Timeline Section  */
.timeline-section {
  padding: 3rem 0 6rem;
  background-color: #ECEBEB;
}

.timeline-section .section-head {
  padding: 0 .5rem;
  padding-bottom: 3.75rem;
}

.timeline-section .section-head h2 {
  color: #1F2428;
  font-size: 1.875rem;
  font-weight: bold;
}

.timeline-section .timeline-blocks-wrapper {
  position: relative;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin-left: 5rem;
  row-gap: 5rem;
}

.timeline-section .timeline-blocks-wrapper::before {
  content: '';
  position: absolute;
  width: 22px;
  height: calc(100% + 4rem);
  background-image: url(../images/timeline-line.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
  left: -56px;
}

.timeline-section .timeline-block {
  display: flex;
  align-items: flex-start;
  column-gap: 4vw;
  position: relative;
}

.timeline-section .timeline-block::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: -55px;
  background-color: #036A38;
  top: 16px;
  border-radius: 50%;
  z-index: 1;
}

.timeline-block .text {
  flex: 1;
}

.timeline-block .text h3 {
  color: #1F2428;
  font-size: 3.125rem;
  font-weight: bold;
}

.timeline-block .text p {
  color: #656467;
  line-height: 1.75;
  padding-top: 0.25rem;
}

.timeline-block .image {
  flex: auto;
  max-width: 28rem;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.timeline-block .image .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #F7F8FC;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 15px;
  min-height: 1.875rem;
  padding: 0.5rem 1.75rem;
  background: linear-gradient(-90deg, rgba(31, 36, 40, 0.31) 20%, #1F2428 80%);
}

.timeline-block .image .caption span {
  font-size: 0.75rem;
  font-weight: 400;
}


/* Responsive Styles */

@media screen and (max-width:1199px) {
  .timeline-section .timeline-blocks-wrapper {
    margin-left: 10rem;
  }

  .timeline-section .timeline-block {
    column-gap: 2.5rem;
  }

  .timeline-section .timeline-block::before {
    left: -56px;
  }

  .timeline-block .image {
    max-width: 23rem;
  }
}


@media screen and (max-width:991px) {
  .timeline-section {
    margin-bottom: -2.5rem;
  }

  .timeline-section .section-head {
    padding: 0;
    padding-bottom: 4rem;
  }

  .timeline-section .timeline-blocks-wrapper::before {
    height: calc(100% + 3rem);
  }

  .timeline-section .timeline-blocks-wrapper {
    margin-left: 7.5rem;
  }

  .timeline-section .timeline-block {
    column-gap: 2.5rem;
  }

  .timeline-block .image {
    max-width: 21.75rem;
  }

  .timeline-block .image .caption {
    font-size: 11px;
  }

  .timeline-block .image .caption span {
    font-size: 10px;
  }
}

@media screen and (max-width:767px) {
  .timeline-section .title {
    padding-bottom: 4.5rem;
  }

  .timeline-section .timeline-blocks-wrapper {
    margin-left: 7rem;
    row-gap: 6rem;
  }

  .timeline-block .image {
    max-width: 21.75rem;
  }
}

@media screen and (max-width:670px) {
  .timeline-section .timeline-blocks-wrapper {
    margin-left: 5rem;
    row-gap: 5rem;
  }

  .timeline-section .timeline-blocks-wrapper::before {
    top: -30px;
    left: -60px;
    width: 26px;
    height: calc(100% + 5rem);
    transform: none;
  }

  .timeline-section .timeline-block {
    flex-direction: column;
  }

  .timeline-section .timeline-block::before {
    left: -58px;
  }

  .timeline-block .image {
    margin-top: 1rem;
  }
}

@media screen and (max-width:575px) {
  .timeline-section {
    padding: 3rem 0 7rem;
  }

  .timeline-section .title {
    padding-bottom: 4rem;
  }

  .timeline-block .text p {
    max-width: 10.5rem;
  }

  .timeline-block .image .caption {
    padding: 0.25rem 0.5rem;
  }

  /* .timeline-block .image:not(.logo-img) {
      max-width: 200px;
      min-height: 250px;
  }

  .timeline-block .image:not(.logo-img) img {
      height: 100%;
  max-width: none;
  object-fit: cover;
  min-height: 250px;
  max-width: 320px;
  } */

  .timeline-block .image.logo-img {
    margin-left: -12px;
  }

  .timeline-block .image.logo-img img {
    position: relative;
    left: -20px;
  }

}


/* -----------------------------------
        Who-We-Are PAGE CSS
------------------------------------*/



/*  Organization Overview  */
.organization-overview {
  padding: 3rem 0 3.5rem;
  background-color: #ECEBEB;
}

.organization-overview .section-head {
  max-width: 84.5rem;
  padding-bottom: 2.5rem;
}

.organization-overview .section-head h2 {
  color: #1F2428;
  font-size: 1.875rem;
  font-weight: bold;
  padding-left: 1rem;
}

.organization-overview .overview-wrapper {
  max-width: 86rem;
}

.organization-overview .overview-item,
.organization-overview .overview-item .text {
  display: flex;
  flex-direction: column;
}

.organization-overview .overview-item .text {
  flex: 1;
}

.organization-overview .overview-item h5 {
  color: #1F2428;
  font-size: 1.375rem;
  font-weight: bold;
  padding-top: 1.75rem;
  height: 100%;
}

.organization-overview .overview-item h5 span {
  display: block;
}

.organization-overview .overview-item p {
  color: #656467;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.33;
  padding-top: 0.875rem;
  padding-bottom: 0.5rem;
}

.organization-overview .overview-item a {
  color: #379CD7;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: underline;
  display: inline-block;
  margin-top: auto;
}

.organization-overview .overview-item a:hover {
  text-decoration: none;
}


/* Specific Primary member */
.organization-overview .overview-item.primary-member {
  max-width: 19rem;
}

.organization-overview .overview-item.primary-member .image img {
  max-width: 16.5rem;
}

.organization-overview .overview-item.primary-member h5 {
  height: auto;
}

.organization-overview .overview-item.primary-member a {
  margin-top: 0;
}


/* Specific Secondary member(s) */
.organization-overview .secondary-members-wrap {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}

.organization-overview .secondary-members-wrap .overview-item {
  flex: 1;
}

.organization-overview .secondary-members-wrap .overview-item .image img {
  max-width: 9.25rem;
}


/* Chart-link */
.organization-overview .chart-link {
  margin-top: 3.5rem;
}

.organization-overview .chart-link a {
  color: #379CD7;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: underline;
}

.organization-overview .chart-link a:hover {
  text-decoration: none;
}


/* Responsive Styles */
@media screen and (max-width:1399px) {
  .organization-overview .secondary-members-wrap {
    gap: 1rem;
  }
}

@media screen and (max-width:1199px) {
  .organization-overview .section-head h2 {
    padding-left: 0;
  }

  .organization-overview .overview-item.primary-member {
    max-width: 100%;
    display: flex;
    flex-direction: row;
  }

  .organization-overview .overview-item.primary-member .image img {
    max-width: 100%;
  }

  .organization-overview .overview-item.primary-member .text {
    max-width: 19.5rem;
    margin: 0 auto;
    padding-top: 3rem;
  }

  .organization-overview .secondary-members-wrap {
    gap: 3rem;
    padding-top: 3rem;
  }

  .organization-overview .secondary-members-wrap .overview-item .image img {
    max-width: 100%;
  }
}


@media screen and (max-width:991px) {
  .organization-overview .title {
    padding-bottom: 2rem;
  }

  .organization-overview .overview-item.primary-member h5 span {
    display: inline;
  }

  .organization-overview .secondary-members-wrap {
    gap: 1.5rem;
  }

  .organization-overview .overview-item.primary-member .image img {
    max-width: 19.5rem;
  }

  .organization-overview .chart-link {
    margin-top: 3rem;
  }

  .organization-overview .chart-link a {
    font-size: 1.125rem;
  }
}


@media screen and (max-width:670px) {
  .organization-overview .overview-item h5 span {
    display: inline;
  }

  .organization-overview .overview-item.primary-member .image {
    flex: 1;
  }

  .organization-overview .overview-item.primary-member .image img {
    max-width: 100%;
  }

  .organization-overview .secondary-members-wrap {
    gap: 1rem;
  }
}


@media screen and (max-width:575px) {
  .organization-overview .overview-item.primary-member {
    flex-direction: column;
  }

  .organization-overview .overview-item.primary-member .text {
    padding-top: 0;
  }

  .organization-overview .secondary-members-wrap {
    flex-wrap: wrap;
    row-gap: 3.5rem;
    padding-top: 3.5rem;
  }

  .organization-overview .secondary-members-wrap .overview-item {
    flex: 40%;
  }

  .organization-overview .overview-item.primary-member .image img {
    max-width: 100%;
    width: 100%;
  }

  .organization-overview .overview-item.secondary-members-wrap .image img {
    max-width: 100%;
    width: 100%;
  }
}


/* Division Section */

.container-fluid .divisions-section .row > * {
  padding-right: calc(var(--bs-gutter-x)* .5) !important;
  padding-left: calc(var(--bs-gutter-x)* .5) !important;
}

.divisions-section {
  padding: 4.5rem 0 0 0;
}

.policies-and-guidelines-boxes .divisions-section {
  padding: 2rem 0;
}

.tree-removal-notification-list-boxes .divisions-section {
  padding: 0;
}

.divisions-section .section-head {
  padding-bottom: 3rem;
  max-width: 84.5rem;
}

.divisions-section .section-head h2 {
  color: #1F2428;
  font-size: 1.875rem;
  font-weight: bold;
}

.divisions-section .section-head p {
  color: #656467;
  font-size: 1.125rem;
  line-height: 2.2;
  padding-top: 1.75rem;
}

.divisions-section .divisions-wrapper {
  max-width: 84.5rem;
}

/* Division Page Title */
.street-maintenance-division {
  background-color: #F15625;
}

.street-renewal-division {
  background-color: #FCD40B;
}

.street-renewal-division h1 {
  color: #1F2428 !important;
}

.urban-forestry-division {
  background-color: #036A38;
}

.engineering-services-division {
  background-color: #B7659A;
}

.construction-services-division {
  background-color: #5C588C;
}

.emergency-operations-section {
  background-color: #B14F47;
}

.investigation-enforcement-division {
  background-color: #32477B;
}

.external-relations-team {
  background-color: #379CD7;
}

.division-page-title {
  padding: 1.375rem 0;
}

.division-page-title.body-head .head-title {
  padding: 0;
}

.division-page-title.body-head .head-title h1 {
  color: #F7F8FC;
  font-size: 1.875rem;
}

/* Common Box-Button  */
.box-button-item {
  border-radius: 4px;
  position: relative;
  display: block;
  overflow: hidden;
  transition: .1s ease-out;
}

/* Overlays */
.box-button-item .overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 95%;
  transition: .1s ease-out;
}

.box-button-item .overlay.orange {
  background-color: #F15625;
  mix-blend-mode: hard-light;
}

.box-button-item .overlay.yellow {
  background-color: #FCD40B;
  mix-blend-mode: hard-light;
}

.box-button-item .overlay.green {
  opacity: 1;
  background-color: #036A38;
  mix-blend-mode: multiply;
}

.box-button-item .overlay.violet {
  opacity: 1;
  background-color: #B7659A;
  mix-blend-mode: multiply;
}

.box-button-item .overlay.purple {
  background-color: #5C588C;
  mix-blend-mode: multiply;
}

.box-button-item .overlay.red {
  background-color: #B14F47;
  mix-blend-mode: multiply;
}

.box-button-item .overlay.darkblue {
  background-color: #32477B;
  mix-blend-mode: multiply;
}

.box-button-item .overlay.lightblue {
  background-color: #379CD7;
  mix-blend-mode: multiply;
}

.box-button-item .overlay.black {
  opacity: 1;
  background-color: #1F2428;
  mix-blend-mode: multiply;
}

.box-button-item .overlay.green {
  opacity: 1;
  background-color: #386342;
  mix-blend-mode: multiply;
}

.box-button-item:hover .overlay.black {
  opacity: 100%;
  box-shadow: inset 0px 0px 20px #FFFFFF70;
}

.box-button-item:hover .overlay.green {
  opacity: 100%;
  box-shadow: inset 0px 0px 20px #FFFFFF70;
}

.box-button-item:hover .overlay {
  opacity: 40%;
}

.box-button-item img {
  width: 100%;
  display: block;
  transition: .1s ease-out;
}

.tree-removal-notification-list-boxes .box-button-item img {
  width: 100%;
  opacity: 0.1;
  display: block;
  transition: .1s ease-out;
}

.box-button-item h3 {
  color: #F7F8FC;
  font-size: 1.375rem;
  font-weight: bold;
  padding: 1.25rem;
  position: absolute;
  bottom: -6px;
  left: 0;
  transition: .1s ease-out;
}

.box-button-item h3 small {
  font-size: 1.125rem;
}

.box-button-item .dark-text {
  color: #1F2428;
}

/* Division Button Hovers */
.box-button-item.division-btn:hover img {
  transform: scale(1.07);
}

.box-button-item.division-btn:hover h3 {
  text-shadow: 0 1px 3px #000000E5;
}

.box-button-item.division-btn:hover .dark-text {
  color: #fff;
}

/* Resource Button specific */
.box-button-item.resource-btn .shadow-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Resource Button Hovers */
.box-button-item.resource-btn:hover .shadow-overlay {
  box-shadow: 0px 0px 32px 20px rgba(247, 248, 252, 0.15) inset;
}


@media screen and (max-width:1199px) {
  .divisions-section .section-head p {
    padding-left: 0;
    padding-top: 0.75rem;
  }
}

@media screen and (max-width:1024px) {
  .box-button-item:not(.division-btn) {
    height: 100%;
    min-height: 4.5rem;
    display: flex;
    align-items: end;
  }

  .box-button-item:not(.division-btn) img {
    position: absolute;
  }

  .box-button-item:not(.division-btn) h3 {
    position: relative;
    padding: 0.5rem 0.875rem;
    bottom: 0;
  }

}

@media screen and (max-width:991px) {
  .divisions-section {
    padding: 3.5rem 0 0 0;
  }

  .divisions-section .section-head {
    padding-bottom: 2rem;
  }

  .divisions-section .section-head p {
    font-size: 1rem;
    line-height: 2;
    padding-top: 1.25rem;
  }
}

@media screen and (max-width:575px) {
  .divisions-section {
    padding-bottom: 0;
  }

  .box-button-item h3 {
    padding: 1.5rem;
  }

  #block-stla-content .divisions-section .divisions-wrapper .container {
    padding: 0;
  }

  .division-btn {
    border-radius: 0;
  }
}

/* ---------- Slider CSS  ---------- */
.slider-image img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

.slick__arrow {
  transform: translateY(calc(-50%));
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  width: 100%;
}

/* Navigation Arrows */
/* Navigation Arrows */
button.slick-prev,
button.slick-next {
  width: 94px;
  height: 85px;
  margin-top: 0;
  background: transparent no-repeat center;
  background-size: contain;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 0;
  /* Hide text */
  line-height: 0;
  /* Hide text */
  text-indent: -9999px;
  /* Hide text */
}

button.slick-prev {
  left: 60px;
  background-image: url(../images/common-slider-arrow.png);
  transform: rotate(180deg);
  /* Rotate arrow */
}

button.slick-next {
  right: 60px;
  background-image: url(../images/common-slider-arrow.png);
}

/* Pagination Bullets */
ul.slick-dots {
  position: absolute;
  bottom: 33px;
  /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.slick-dots li {
  margin: 0 7.5px;
}

ul.slick-dots li button {
  opacity: 0.7;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #F7F8FC;
  border: none;
  border-radius: 50%;
  transition: 0.8s;
  padding: 0;
  font-size: 0;
  /* Hide default text */
  cursor: pointer;
}

ul.slick-dots li.slick-active button {
  background-color: #F15625;
}

/* Remove default bullet styling */
ul.slick-dots li button:before {
  content: "";
}

/* Responsive Styles */
@media screen and (max-width: 991px) {
  button.slick-prev {
    left: 20px;
  }

  button.slick-next {
    right: 20px;
  }

  button.slick-dots {
    bottom: 21px;
  }
}

@media screen and (max-width: 575px) {

  .slick__arrow {
    display: none
  }
}

/* CSS for modal, back to top button, fixes for layout builder modal  */

.modal-link {
  color: #656467;
  text-decoration: underline;
  font-size: 18px;
  cursor: pointer;
}

.section-title {
  font-weight: bold;
  font-size: 1.5rem;
  color: #1F2428;
  line-height: 1.2;
}

a.back-to-top {
  font-size: 1rem;
  color: #006400;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  margin-left: 3rem;
  white-space: nowrap;
}

.back-to-top:hover {
  text-decoration: underline;
}

.section-subtitle {
  font-weight: bold;
  margin-top: 1rem;
  color: #454649;
}

.link-list a {
  display: block;
  color: #656467;
  line-height: 1.5;
  text-decoration: underline;
  margin: 1rem 0 0 1rem;
}

.ui-layout-builder-modal {
  z-index: 1000 !important;
}

#layout-builder-modal .ck-editor {
  color: #000000;
}

#layout-builder-modal .ck-editor textarea {
  min-height: 300px;
}

#layout-builder-modal {
  padding-top: 0px;
}

#layout-builder-modal tr td {
  background-color: #2C2E32;
}

.guideline-modal-header {
  display: flex;
  flex-direction: column;
}

.image-with-caption .field--name-field-image,
.image-with-caption img {
  margin: 0;
  width: 100%;
}

.image-with-caption .image-caption {
  color: #454649;
  font-size: 1rem;
  line-height: 1.5;
  padding: 1.25rem;
  border-radius: 0 0 4px 4px;
  background-color: #ECEBEB;
}

@media screen and (max-width:575px) {
  .section-title {
    font-size: 1.375rem;
  }

  a.back-to-top {
    margin-left: auto;
    text-align: right;
  }

  .link-list a {
    font-size: 1rem;
  }

  .image-with-caption .image-caption {
    padding: 1.5rem 1rem;
  }
}


/* ---------- Sustainability Page CSS  ---------- */

.focus-areas-section {
  margin-top: 1.25rem;
}

.container-fluid .focus-areas-section .row > * {
  padding-right: calc(var(--bs-gutter-x)* .5) !important;
  padding-left: calc(var(--bs-gutter-x)* .5) !important;
}

.focus-areas-section .boxes-row {
  --bs-gutter-y: 2rem;
  --bs-gutter-x: 2rem;
}

.focus-areas-section .box {
  display: flex;
  align-items: center;
  max-width: 38.5rem;
  min-height: 8.75rem;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  background-color: #E0EFD4;
  height: 100%;
}

.focus-areas-section .box h5 {
  color: #656467;
  font-size: 1.25rem;
  font-weight: bold;
  padding-bottom: 0.5rem;
}

.focus-areas-section .box p {
  display: block;
  font-size: 1.125rem;
  font-weight: normal;
  line-height: 1.7;
}

.focus-areas-section .row .col-lg-4:nth-child(5) .box p,
.focus-areas-section .row .col-lg-4:nth-child(4) .box p {
  letter-spacing: -0.5px;
}

.sustainability-bottom-images img {
  border-radius: 4px;
}

@media screen and (min-width:1400px) {
  .focus-areas-section .row .col-lg-4:nth-child(4) {
    margin-left: 3rem;
  }
}

@media screen and (max-width:991px) {
  .focus-areas-section .boxes-row {
    --bs-gutter-y: 1.25rem;
    --bs-gutter-x: 1.5rem;
  }

  .focus-areas-section .box {
    min-height: 7rem;
  }

  .focus-areas-section .box h5 {
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: 0.25rem;
  }

  .focus-areas-section .box p {
    font-size: 0.875rem;
  }

  .sustainability-bottom-images img {
    object-fit: cover;
  }
}

@media screen and (max-width:575px) {
  .focus-areas-section .box {
    display: block;
    padding: 0.75rem 0.5rem 0.75rem 0.625rem;
    min-height: auto;
  }

  .focus-areas-section .box h5 {
    font-size: 1rem;
  }

  .sustainability-bottom-images img {
    height: auto;
    object-fit: unset;
  }
}



/* ------- Service Section CSS ------- */
.service-section-tree {
  margin-bottom: 5rem;
}

.service-section .service-icon-box {
  max-width: 450px;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 2px 2px 8px 2px #0000001A;
}

.service-section .service-icon-box:hover {
  box-shadow: 2px 2px 16px 2px #379CD74D;
}

.service-section .service-icon-box .service-icon {
  max-width: 288px;
  max-height: 230px;
  fill: #036A38;
}

.service-section .service-icon-box .service-icon.pothole-icon {
  transform: translateX(20px);
}

.service-section .service-icon-box h3 {
  padding-top: 4rem;
  color: #036A38;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}


@media screen and (max-width:991px) {
  .service-section-tree {
    margin-bottom: 3rem;
  }

  .service-section .service-icon-box {
    min-height: 316px;
  }

  .service-section .service-icon-box .service-icon {
    max-width: 160px;
    max-height: 150px;
  }

  .service-section .service-icon-box .service-icon.pothole-icon {
    max-height: 110px;
    transform: translateX(10px);
  }

  .service-section .service-icon-box h3 {
    padding-top: 2.5rem;
  }
}

@media screen and (max-width:575px) {
  .service-section-tree {
    margin-bottom: 2.5rem;
  }

  .service-section .service-icon-box {
    max-width: 100%;
    margin-bottom: 1.75rem;
  }
}


/* Tree Issue Box CSS */

.tree-issue-boxes {
  padding: 0 3rem 0 2rem;
}

a.service-icon-box,
.tree-issue-boxes a {
  text-decoration: none;
}

.container-fluid .tree-issue-boxes .row > * {
  padding-right: calc(var(--bs-gutter-x)* .5) !important;
  padding-left: calc(var(--bs-gutter-x)* .5) !important;
}

.tree-issue-boxes .issue-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 230px;
  height: 100%;
  padding: 0.5rem;
  border-radius: 4px;
  background-color: #036A38;
  box-shadow: 2px 2px 4px 1px #0000001A;
}

.tree-issue-boxes .issue-box .icon {
  fill: #8FC664;
  width: 65px;
  height: 90px;
}

.tree-issue-boxes .issue-box h5 {
  color: #8FC664;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding-top: 1.5rem;
  text-transform: uppercase;
}

/* Large Main Box Button */
.tree-removal-issue-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 480px;
  padding: 1rem;
  border-radius: 4px;
  background-color: #036A38;
  box-shadow: 2px 2px 4px 1px #0000001A;
}

.tree-removal-issue-box .icon {
  fill: #8FC664;
  width: 147px;
  height: 202px;
}

.tree-removal-issue-box h5 {
  color: #8FC664;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  padding-top: 3rem;
  text-transform: uppercase;
}

/* Hovers */
.tree-removal-issue-box:hover,
.tree-issue-boxes .issue-box:hover {
  background-color: #386342;
}

.tree-removal-issue-box:hover .icon,
.tree-issue-boxes .issue-box:hover .icon {
  fill: #75A057;
}

.tree-removal-issue-box:hover h5,
.tree-issue-boxes .issue-box:hover h5 {
  color: #75A057;
}

.tree-removal-notification-list-boxes {
  padding-left: 3rem;
}


/* Responsive */

@media screen and (max-width:1399px) {
  .tree-issue-boxes {
    padding: 0;
  }
}

@media screen and (max-width:991px) {
  .tree-issue-boxes .issue-box {
    min-height: 160px;
    padding: 1rem 0.5rem;
  }

  .tree-issue-boxes .issue-box .icon {
    order: 2;
    width: 44px;
    height: 60px;
  }

  .tree-issue-boxes .issue-box h5 {
    order: 1;
    padding-top: 0;
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
    letter-spacing: -0.5px;
  }

  .tree-removal-issue-box {
    min-height: 316px;
  }

  .tree-removal-issue-box .icon {
    height: 130px;
  }

  .tree-removal-issue-box h5 {
    font-size: 1.75rem;
    padding-top: 1.5rem;
  }

  .tree-removal-notification-list-boxes {
    padding-left: 0;
  }
}

@media screen and (max-width:575px) {
  .tree-removal-issue-box {
    padding: 1.25rem
  }

  .tree-issue-boxes .issue-box h5 {
    font-size: 0.875rem;
  }
}

/* Urban Forestry CTA CSS */
.urban-forestry-cta .video-block {
  padding-right: 5rem;
}

.urban-forestry-cta .video-block video {
  border-radius: 4px;
}

.urban-forestry-cta .content-block p {
  color: #656467;
  font-size: 1.125rem;
  line-height: 2.2;
  padding-top: 4rem;
  padding-right: 3.75rem;
}

.urban-forestry-cta .content-block p > a {
  color: #656467;
  font-weight: 600;
  text-decoration: underline;
}

.urban-forestry-cta .content-block p > a:hover {
  text-decoration: none;
}

/* Responsive */

@media screen and (max-width:1399px) {
  .urban-forestry-cta .video-block {
    padding-right: 1rem;
  }

  .urban-forestry-cta .content-block p {
    padding-top: 3rem;
    padding-right: 0;
  }
}

@media screen and (max-width:991px) {
  .urban-forestry-cta .video-block {
    padding-right: 0;
  }

  .urban-forestry-cta .content-block p {
    padding-top: 0;
    padding-bottom: 3rem;
    font-size: 1rem;
    line-height: 2;
  }
}

@media screen and (max-width:575px) {
  .urban-forestry-cta .video-block {
    width: 100vw;
    text-align: center;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
  }

  .urban-forestry-cta .video-block video {
    border-radius: 0;
  }
}


/* Report Pothole CSS */

.service-section .report-pothole-content {
  padding-top: 4.5rem;
}

.service-section .report-pothole-content p {
  color: #656467;
  font-size: 1.125rem;
  line-height: 2.2;
  padding-right: 3.5rem;
  padding-bottom: 2.5rem;
}

.service-section .report-pothole-content p > a {
  color: #656467;
  font-weight: 600;
  text-decoration: underline;
}

.service-section .report-pothole-content img {
  display: none;
}

.service-section .pothole-mobile-img {
  display: block;
}


/* Responsive */

@media screen and (min-width:992px) {
  .service-section .report-pothole-content img {
    display: block;
  }

  .service-section .pothole-mobile-img {
    display: none;
  }
}

@media screen and (max-width:1199px) {
  .service-section .report-pothole-content p {
    padding-right: 0;
  }
}

@media screen and (max-width:991px) {
  .service-section .report-pothole-content {
    padding-top: 2.25rem;
    padding-left: 2rem;
  }

  .service-section .report-pothole-content p {
    font-size: 1rem;
    line-height: 2;
  }

  .service-section .pothole-mobile-img {
    padding-top: 2rem;
  }
}

@media screen and (max-width:575px) {
  .service-section .report-pothole-content {
    padding-top: 0;
    padding-left: 0;
  }

  .service-section .report-pothole-content p {
    padding-bottom: 0;
  }

  .service-section .pothole-mobile-img {
    padding-top: 3rem;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- Permit Sub-Page CSS  ---------- */

.permit-process-section {
  margin: 1.5rem 0 0 0;
}

.permit-process-section .permit-link {
  padding: 0;
  margin-bottom: 4rem;
}

.permit-process-section .permit-link a {
  color: #036A38;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: underline;
}

.permit-process-section .permit-link a:hover {
  text-decoration: none;
}

.permit-process-section .process-cards-wrapper {
  padding-left: 2.25rem;
}

.permit-process-section .process-cards-wrapper .row {
  column-gap: 2rem;
}

.permit-process-section .process-cards-wrapper .row .col-lg {
  max-width: 20.5rem;
}

.permit-process-section .process-card {
  max-width: 18.5rem;
  padding: 1.5rem 2.25rem;
  border-radius: 4px;
  background-color: #E0EFD4;
  position: relative;
}

.permit-process-section .process-card::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 45px;
  background-image: url(../images/triangle-icon-right.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 60px;
}

.permit-process-section .lastprocess-cards-wrapper .process-card::after {
  display: none;
}

.permit-process-section .process-card .process-number {
  top: -36px;
  left: -36px;
  position: absolute;
  color: #F7F8FC;
  font-size: 3.125rem;
  font-weight: bold;
  width: 4.75rem;
  height: 4.75rem;
  background-color: #379CD7;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.permit-process-section .process-card .process-number.bg-grey {
  background-color: #5D758C;
}

.permit-process-section .process-card .process-number span {
  font-size: 2rem;
}

.permit-process-section .process-card h3 {
  color: #656467;
  font-size: 2rem;
  font-weight: bold;
  border-bottom: 2px solid #656467;
  padding-bottom: 1.25rem;
  margin-bottom: 0.5rem;
}

.permit-process-section .process-card p {
  color: #656467;
  font-size: 1.125rem;
  line-height: 1.6;
}

.permit-process-section .process-card p a {
  color: #656467;
  font-weight: 600;
  text-decoration: underline;
}

.permit-process-section .process-card p a:hover {
  text-decoration: none;
}

.permit-process-section .process-cards-wrapper .or-divider {
  color: #656467;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 1rem 0;
}


@media screen and (max-width:1600px) {
  .permit-process-section .process-cards-wrapper .row {
    row-gap: 3rem;
  }

  .permit-process-section .process-cards-wrapper .row .col-lg {
    max-width: 18.5rem;
  }
}

@media screen and (max-width:1399px) {
  .permit-process-section .process-cards-wrapper .row {
    column-gap: 3rem;
  }

  .permit-process-section .process-card {
    padding: 1.5rem 2rem;
  }
}

@media screen and (max-width:1199px) {
  .permit-process-section .process-card .process-number {
    top: -30px;
    left: -30px;
    width: 4rem;
    height: 4rem;
    font-size: 2.5rem;
  }

  .permit-process-section .process-card .process-number span {
    font-size: 1.5rem;
  }
}

@media screen and (max-width:991px) {
  .permit-process-section {
    margin: 1.5rem 0 0 0;
  }

  .permit-process-section .permit-link {
    padding: 0;
    margin-bottom: 3rem;
  }

  .permit-process-section .permit-link a {
    font-size: 1.625rem;
  }

  .permit-process-section .process-cards-wrapper {
    padding-left: 1.75rem;
  }

  .permit-process-section .process-cards-wrapper .row .col-lg {
    max-width: 100%;
  }

  .permit-process-section .process-card {
    max-width: 31rem;
    padding: 1.5rem 1rem 1.5rem 2rem;
    height: 100%;
  }

  .permit-process-section .process-card::after {
    left: 100px;
    top: 100%;
    width: 60px;
    transform: rotate(90deg);
  }

  .permit-process-section .process-card h3 {
    font-size: 1.75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .permit-process-section .process-card p {
    font-size: 1rem;
  }

  .permit-process-section .process-cards-wrapper .or-divider {
    padding: 1.25rem;
  }

  .permit-process-section .lastprocess-cards-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .permit-process-section .lastprocess-cards-wrapper .process-card {
    flex: 1;
  }
}


@media screen and (max-width:575px) {
  .permit-process-section {
    margin: 0 0 0 0;
  }

  .permit-process-section .permit-link {
    margin-bottom: 3.5rem;
  }

  .permit-process-section .permit-link a {
    font-size: 1.5rem;
  }

  .permit-process-section .process-cards-wrapper {
    padding-left: 0.75rem;
  }

  .permit-process-section .process-card {
    padding: 1rem 1rem 1rem 2.25rem;
  }

  .permit-process-section .process-card::after {
    left: 60px;
  }

  .permit-process-section .process-card .process-number {
    left: -26px;
  }

  .permit-process-section .process-card h3 {
    padding-bottom: 1rem;
  }

  .permit-process-section .lastprocess-cards-wrapper {
    flex-direction: column;
  }

  .permit-process-section .process-cards-wrapper .or-divider {
    padding: 0.375rem 0;
  }
}

.node--type-division #content {
  padding-top: 0;
}

.node--type-division #block-stla-breadcrumbs-2 {
  padding: 1.5rem 0;
}

/* Permit Callout Box */

.permits-callout-box {
  border-radius: 4px;
  padding: 2.5rem;
  margin-top: 2.5rem;
  background-color: #ECEBEB;
  max-width: 42.5rem;
  margin-left: 2.5rem;
}

.permits-callout-box p {
  color: #656467;
  font-size: 1rem;
  line-height: 1.8;
}

@media screen and (min-width:1554px) {
  .permit-process-section .permits-callout-box {
    margin-top: 0;
  }
}

@media screen and (max-width:991px) {
  .permits-callout-box {
    margin-top: 2rem;
    margin-left: 2rem;
    max-width: 100%;
  }
}

@media screen and (max-width:575px) {
  .permits-callout-box {
    padding: 1.75rem;
    margin-top: 1.25rem;
    margin-left: 0;
  }
}

.footer-nav-wrapper ul,
.footer-nav-wrapper ol {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* ------------------
    MODAL STYLES
--------------------*/

.modal {
  padding-right: 0 !important;
}

.modal-dialog {
  max-width: 41.25rem;
}

.modal-content {
  padding: 3rem 3.5rem;
  border: 1px solid #BEBCBD66;
  background-color: #F7F8FC;
  box-shadow: 0px 4px 4px 0px #00000033;
  border-radius: 4px;
}

.modal-body,
.modal-header {
  border: 0;
  padding: 0;
}

.modal-header {
  align-items: start;
}

.modal-header div:last-child {
  line-height: 1;
}

.modal .guideline-modal-header > div {
  color: #1F2428;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.2;
}

.modal .guideline-modal-header h2 {
  color: #656467;
  font-size: 1.875rem;
  font-weight: bold;
  line-height: 1.2;
  padding-top: 0.5rem;
}

.modal .modal-body {
  color: #454649;
  font-size: 1rem;
  line-height: 2;
  margin-top: 1.75rem
}


@media screen and (max-width:991px) {
  .modal-dialog {
    height: 450px;
    padding: 1.5rem;
  }

  .modal-content {
    height: 450px;
    padding: 1.5rem 1.75rem;
  }

  .modal .guideline-modal-header h2 {
    font-size: 1.625rem;
    padding-top: 0.625rem;
  }

  .modal .modal-body {
    margin-top: 1rem;
  }
}

@media screen and (max-width:575px) {
  .modal-dialog {
    margin: 0;
    padding: 0;
    top: calc(100% - 450px);
  }

  .modal-dialog.modal-dialog-centered {
    min-height: auto;
  }

  .modal-content {
    padding: 1.5rem 1.5rem 1rem;
    border-radius: 0;
  }
}

/* Hollenbeck Callout Box */
.hollenbeck-callout-box {
  padding: 2.25rem 1.25rem 2.25rem 2.5rem;
  border-radius: 4px;
  background-color: #ECEBEB;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.hollenbeck-callout-box h5 {
  font-size: 1.375rem;
  padding-bottom: 0.75rem;
}

.hollenbeck-callout-box p {
  color: #656467;
  font-size: 1.125rem;
  line-height: 1.8;
}

@media screen and (max-width:1199px) {
  .hollenbeck-callout-box {
    padding: 1.75rem;
  }
}

@media screen and (max-width:991px) {
  .hollenbeck-callout-box {
    max-width: 32rem;
    margin-left: auto;
    margin-bottom: 2.5rem;
  }
}

@media screen and (max-width:575px) {
  .hollenbeck-callout-box h5 {
    padding-bottom: 0.5rem;
  }
}

/* Hollenbeck List */
.hollenbeck-list {
  margin-top: 1.25rem;
}

@media screen and (max-width:575px) {
  .hollenbeck-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}


/* Custom padding, margin and spacing classes for stla */
.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

@media (min-width:576px) {
  .mt-sm-30 {
    margin-top: 30px;
  }

  .mb-sm-30 {
    margin-bottom: 30px;
  }

  .mt-sm-40 {
    margin-top: 40px;
  }

  .mb-sm-40 {
    margin-bottom: 40px;
  }

  .mb-sm-6 {
    margin-bottom: 4rem !important;
  }

  .mt-sm-6 {
    margin-top: 4rem !important;
  }
}

@media (min-width:992px) {
  .mt-lg-30 {
    margin-top: 30px;
  }

  .mb-lg-30 {
    margin-bottom: 30px;
  }

  .mt-lg-40 {
    margin-top: 40px;
  }

  .mb-lg-40 {
    margin-bottom: 40px;
  }

  .mb-lg-6 {
    margin-bottom: 4rem !important;
  }

  .mt-lg-6 {
    margin-top: 4rem !important;
  }
}

.field--type-entity-reference,
.field--name-field-media-image img {
  margin: 0;
}

.landscaping-page-list li ul {
  margin-top: 0.75rem;
}

@media screen and (min-width:1200px) {
  .sustainability-bottom-images .row .col-lg-8 {
    padding-left: 4rem;
  }
}

@media screen and (min-width:1400px) {
  .sustainability-bottom-images .row .col-lg-8 {
    padding-left: 6.5rem;
  }
}


/* ------------------
    SEARCH RESULTS PAGE
--------------------*/
.search-section .search-results .list-group-item {
  border-radius: 5px;
  padding: 15px;
  transition: background-color 0.3s, box-shadow 0.3s;
  margin-bottom: 15px;
  border-top-width: 1px;
}

.search-section .search-results .list-group-item:hover {
  background-color: #e0efd4;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-section .search-results h3 {
  margin-bottom: 20px;
}

.search-section .search-results h3 a {
  color: #004d00;
  font-size: 24px;
  font-weight: bold;
}

.search-section .search-results h3 a:hover {
  text-decoration: underline;
}

.search-section .search-results p {
  color: #656467;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  line-height: 27px;
  padding-bottom: 0;
}

.search-section .search-help-link,
.search-section .search-advanced {
  display: none;
}

.search-section h2 {
  color: #0f2940;
}

.search-section .node_search-results {
  padding-right: 0 !important;
  width: 100%;
}

@media screen and (max-width: 575px) {
  .search-section .node_search-results {
    width: calc(100% - 1.5rem);
    margin: 0 auto;
  }
}

@media screen and (min-width: 576px) {
  .search-section .node_search-results {
    width: calc(100% - 24px);
    margin: 0 auto;
  }
}

@media screen and (max-width: 766px) {
  .search-section .search-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .search-section .search-container h2 {
    padding-left: 11px;
  }
}

.search-section .search-container h2 {
  margin-bottom: 40px;
}

@media screen and (max-width: 575px) {
  .search-section .search-container h2 {
    padding-left: 1.5rem;
  }
}

@media screen and (max-width: 766px) {
  .search-section .search-form {
    padding-left: 11px;
  }
}

@media screen and (max-width: 575px) {
  .search-section .search-form {
    padding-left: 1.5rem;
  }
}

@media screen and (max-width: 766px) {
  .search-section .search-form input {
    width: 94%;
    margin-right: 10px;
  }
}

.search-section .search-form .form-submit {
  background-color: #72bd44;
  transition: background-color 0.3s;
  border: none;
  padding: 0 28px;
  min-height: 38px;
}

.search-section .search-form .form-submit:hover {
  background-color: #8fc664;
  color: #000;
}

.search-section .alert-dismissible .btn-close {
  padding: 4px;
}

.search-container .pagination {
  padding-left: 9.5rem;
}

.search-container .pagination .page-item.active span {
  background: #036a38;
  border: 1px solid #036a38;
}

.search-container .pagination .page-item a {
  color: #036a38;
  line-height: 2.2rem;
}

.search-container .body-head .container {
  padding-left: 0;
}

.search-container .container h1 {
  padding-left: 0;
}

.search-container .container h1 {
  padding-left: 0;
}

.search-container .pagination .page-item span {
  line-height: 2.2rem;
}

@media screen and (max-width: 766px) {
  #search-form-block h1 {
    padding-left: 11px;
  }
}

@media screen and (max-width: 575px) {
  #search-form-block h1 {
    padding-left: 1.5rem;
  }

  .search-container .pagination .page-item span {
    line-height: 2.2rem;
  }

  .search-container .pagination {
    padding-left: 0;
    justify-content: center;
  }
}

@media screen and (max-width:991px) {
  .image-caption-row.row {
    --bs-gutter-y: 3rem;
  }
}

.biography-modal .modal-dialog {
  max-width: 850px;
}

.biography-modal .modal-header {
  align-items: center;
}

.biography-modal .modal-header .btn-close {
  margin: 0;
  padding: 0;
}

.biography-modal .modal-header .bio-head {
  display: flex;
  align-items: center;
}

.biography-modal .modal-header .bio-head h2 {
  white-space: nowrap;
  font-size: 1.375rem;
  color: #1F2428;
  padding-right: 2rem;
  flex: 1;
}

.biography-modal .modal-header .bio-head div {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  flex: auto;
}

.biography-modal .modal-content {
  max-height: 600px;
  padding: 2rem 2.25rem 2rem 3.5rem;
}

.biography-modal .modal-body {
  font-size: 1.125rem;
  line-height: 2.2;
  margin-top: 1rem;
}

@media screen and (max-width:991px) {
  .biography-modal .modal-dialog {
    max-width: 500px;
    padding: 0;
  }

  .biography-modal .modal-header {
    align-items: start;
  }

  .biography-modal .modal-header .btn-close {
    margin-top: 6px;
  }

  .biography-modal .modal-header .bio-head {
    flex-direction: column;
    align-items: start;
  }

  .biography-modal .modal-header .bio-head h2 {
    padding-right: 0;
    padding-bottom: 0.5rem;
  }

  .biography-modal .modal-content {
    padding: 2.25rem 2rem 1.5rem 2rem;
  }

  .biography-modal .modal-body {
    font-size: 1rem;
    line-height: 2;
    margin-top: 1.25rem;
  }
}

@media screen and (max-width:575px) {
  .biography-modal .modal-dialog {
    max-width: 100%;
  }

  .biography-modal .modal-content {
    padding: 2rem 2rem 1.5rem 2rem;
  }

  .biography-modal .modal-body {
    margin-top: 1.25rem;
  }
}

@media screen and (max-width:991px) {
  .mobile-list {
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
    padding-left: 1.5rem;
  }

  .mobile-list li ul {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    margin-top: 0.75rem;
    padding-left: 1.5rem;
  }
}

/* Rightofway Content Spacing */
.page-node-16 .block .content p + p {
  margin-top: 1.25rem;
}

.page-node-16 .block .content p + ul {
  margin-top: 1.25rem;
}

.page-node-16 .block .content ul + p {
  margin-top: 1.25rem;
}

@media screen and (max-width:991px) {
  .page-node-16 .block .content p + p {
    margin-top: 1.25rem;
  }

  .page-node-16 .block .content p + ul {
    margin-top: 1.25rem;
  }

  .page-node-16 .block .content ul + p {
    margin-top: 1.25rem;
  }
}

/* Newsletter Signup Section */

.newsletter-signup-section {
  padding: 1.5rem 0;
  background-color: #e0e3ea;
}

.newsletter-signup-section .newsletter-content .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.newsletter-signup-section .newsletter-content .content .form-label {
  color: #036a38;
  font-size: 1.625rem;
  font-weight: bold;
  margin-bottom: 0;
  line-height: 1.2;
}

.newsletter-signup-section .newsletter-content .content form {
  display: flex;
  align-items: center;
  flex: 1;
}

.newsletter-signup-section .newsletter-content .content form {
  display: flex;
  align-items: center;
  position: relative;
}

.newsletter-signup-section .newsletter-content .content form .mailchimp-newsletter-mergefields {
  width: calc(100% - 224px);
}

.newsletter-signup-section .newsletter-content .content form .form-type-email {
  margin-bottom: 0 !important;
}

.newsletter-signup-section .newsletter-content .content form input {
  color: #656467;
  font-size: 1.25rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #c2c7cf99;
}

.newsletter-signup-section .newsletter-content .content form input:focus {
  box-shadow: none;
}

.newsletter-signup-section .newsletter-content .content form input::placeholder {
  color: #bebcbd;
}

.newsletter-signup-section .newsletter-content .content form .form-actions {
  width: 100%;
  max-width: 200px;
  min-height: 3rem;
  margin-left: 1.5rem;
  margin-bottom: 0 !important;
}

.newsletter-signup-section .newsletter-content .content form .form-actions button {
  width: 100%;
}

.newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] {
  position: absolute;
  bottom: -23px;
  right: 225px;
}

.newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] .alert-wrapper svg,
.newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] .alert-wrapper h2 {
  display: none;
}

.newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] .alert-wrapper button {
  padding: 0;
  top: 6px;
}

.newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] .alert-wrapper .alert {
  font-size: 11px;
  line-height: 10px;
  height: 22px;
  margin: 0;
  padding: 0 20px 0 5px;
  border: none;
  background: transparent;
}

.newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] .alert-wrapper .alert.alert-danger {
  color: #c00;
}

.newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] .alert-wrapper .alert.alert-success {
  color: #008000;
}

.ajax-progress {
  display: none;
}

/* Responsive Styles */
@media screen and (max-width: 1199px) {
  .newsletter-signup-section .newsletter-content .content .form-label {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 991px) {
  .newsletter-signup-section {
    padding: 2rem 0;
  }

  .newsletter-signup-section .newsletter-content .content {
    display: block;
  }

  .newsletter-signup-section .newsletter-content .content .form-label {
    font-size: 1.375rem;
    padding-bottom: 1.5rem;
  }
}

@media screen and (max-width: 575px) {
  .newsletter-signup-section .newsletter-content .content form {
    flex-direction: column;
  }

  .newsletter-signup-section .newsletter-content .content form .form-actions {
    margin-left: auto;
    margin-top: 1.25rem;
  }

  .newsletter-signup-section .newsletter-content .content form .mailchimp-newsletter-mergefields {
    width: 100%;
  }

  .newsletter-signup-section .newsletter-content .content form > div[id*="mailchimp-response"] {
    bottom: 49px;
    left: 0;
    right: initial;
  }
}