:root {
  --ev-blue: #0094df;
  --ev-blue-dark: #006cbf;
  --ev-blue-light: #80c5e8;
  --ev-panel: #e3f2fd;
  --ev-orange: #ff8c00;
  --ev-green: #96c11f;
  --ev-text: #414141;
  --ev-muted: #676666;
  --ev-white: #fff;
  --cassiopeia-color-primary: var(--ev-blue-dark);
  --cassiopeia-color-link: var(--ev-blue-dark);
  --cassiopeia-color-hover: #004f8d;
  --cassiopeia-font-family-body: "Segoe UI", Arial, Helvetica, sans-serif;
  --cassiopeia-font-family-headings: "Segoe UI", Arial, Helvetica, sans-serif;
  --body-color: var(--ev-text);
}

body {
  color: var(--ev-text);
  line-height: 1.65;
}

:focus-visible {
  outline: 3px solid var(--ev-orange);
  outline-offset: 3px;
}

a {
  color: var(--ev-blue-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ev-blue-dark);
  font-weight: 500;
}

.container-header {
  background: var(--ev-white);
  box-shadow: 0 1px 8px rgb(0 0 0 / 12%);
  color: var(--ev-text);
  position: relative;
}

.container-header .navbar-brand {
  padding-block: 1rem;
}

.container-header .brand-logo img {
  content: url("../images/evijarven-kunta-logo-2019.png");
  height: auto;
  max-width: min(426px, 72vw);
  width: 270px;
}

.container-header .container-nav {
  background: linear-gradient(180deg, var(--ev-blue), #0390d8);
  margin: 0;
  max-width: none;
  padding-inline: max(1rem, calc((100vw - 1320px) / 2));
  width: 100%;
}

.container-header .mod-menu {
  color: var(--ev-white);
  flex-wrap: wrap;
  justify-content: center;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .navbar-toggler {
  color: var(--ev-white);
}

.container-header .mod-menu > li:hover,
.container-header .mod-menu > li:focus-within,
.container-header .mod-menu > li.active {
  background: rgb(0 0 0 / 6%);
  border-radius: .25rem;
}

.container-header .metismenu.mod-menu > li:hover > a,
.container-header .metismenu.mod-menu > li:hover > .mod-menu__heading,
.container-header .metismenu.mod-menu > li:focus-within > a,
.container-header .metismenu.mod-menu > li:focus-within > .mod-menu__heading,
.container-header .metismenu.mod-menu > li.active > a,
.container-header .metismenu.mod-menu > li.active > .mod-menu__heading {
  text-decoration-color: #fff !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: .16em !important;
  text-underline-offset: .3em;
}

.container-header .metismenu .mm-collapse .metismenu-item.active > a {
  text-decoration-line: underline;
  text-decoration-thickness: .16em;
  text-underline-offset: .3em;
}

.container-header .metismenu .metismenu-item > a:focus:not(:focus-visible),
.container-header .metismenu .metismenu-item > button:focus:not(:focus-visible) {
  outline: none;
}

.container-header .container-search {
  margin-inline-start: auto;
}

.container-header .container-search a,
.container-header .container-search button,
.container-header .container-search input {
  border-color: var(--ev-white);
  color: var(--ev-white);
}

.container-header .container-search .mod-finder__search input {
  display: none;
}

.container-header .container-search .mod-finder__search .btn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--ev-white);
  border-radius: .25rem;
  display: inline-flex;
  font-size: 0;
  height: 2.75rem;
  justify-content: center;
  padding-inline: .85rem;
  width: 3.5rem;
}

.container-header .container-search .mod-finder__search .btn .icon-search {
  font-size: 1rem;
  margin: 0;
}

.container-header .container-search .mod-finder__search .btn:hover,
.container-header .container-search .mod-finder__search .btn:focus-visible {
  background: rgb(0 0 0 / 14%);
}

.container-below-top {
  background: #cf1200;
  color: var(--ev-white);
  max-width: none;
  padding: .7rem max(1rem, calc((100vw - 1320px) / 2));
  text-align: center;
  width: 100%;
}

.container-below-top a,
.container-below-top h1,
.container-below-top h2,
.container-below-top h3 {
  color: var(--ev-white);
}

.container-sidebar-left .card {
  background: var(--ev-panel);
  border: 0;
  border-radius: 0;
}

.container-sidebar-left .mod-menu a {
  border-bottom: 1px solid var(--ev-white);
  display: block;
  padding: .7rem .85rem;
  text-decoration: none;
}

.container-sidebar-left .mod-menu li.active > a {
  background: var(--ev-white);
  border-inline-start: 5px solid var(--ev-orange);
  font-weight: 700;
}

.mod-breadcrumbs {
  color: var(--ev-muted);
  font-size: .875rem;
}

.mod-breadcrumbs__divider {
  display: none;
}

.container-bottom-a {
  background: linear-gradient(135deg, var(--ev-panel), #f8fcff);
  border-radius: .5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.container-bottom-a > .card {
  background: rgb(255 255 255 / 82%);
  border: 0;
  border-top: 4px solid var(--ev-blue-light);
  box-shadow: 0 .35rem 1.25rem rgb(0 66 112 / 10%);
}

.container-bottom-a > .card .card-header {
  background: transparent;
  border: 0;
  color: var(--ev-blue-dark);
  font-size: 1.25rem;
  padding-bottom: 0;
}

.container-footer {
  background: var(--ev-blue-dark);
  background-image: none;
  color: var(--ev-white);
}

.container-footer a,
.container-footer h1,
.container-footer h2,
.container-footer h3 {
  color: var(--ev-white);
}

/* Home: actual migrated modules are given these suffixes during activation. */
.itemid-101 .site-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.itemid-101 .container-component {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  order: 1;
  padding: 0;
  width: 100%;
}

.itemid-101 .mod-breadcrumbs {
  display: none;
}

.itemid-101 .ev-home-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgb(0 38 68 / 20%), rgb(0 38 68 / 5%)),
    url("../images/bodyBack-2018a.jpg") center / cover no-repeat;
  border: 0;
  border-radius: 0;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-content: center;
  margin: 0;
  min-height: clamp(330px, 42vw, 500px);
  overflow: hidden;
  position: relative;
}

.itemid-101 .ev-home-hero .ev-hero-slide {
  background-image:
    linear-gradient(90deg, rgb(0 38 68 / 20%), rgb(0 38 68 / 5%)),
    var(--ev-hero-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
  z-index: 1;
}

.itemid-101 .ev-home-hero .ev-hero-slide.is-active {
  opacity: 1;
}

.itemid-101 .ev-home-hero .card-body {
  display: none;
}

.itemid-101 .ev-home-hero::after {
  background: url("../images/itseaan-suurempi-kunta.png") center / contain no-repeat;
  content: "";
  height: min(143px, 20vw);
  max-width: 710px;
  position: relative;
  width: min(75vw, 710px);
  z-index: 2;
}

.itemid-101 .ev-news,
.itemid-101 .ev-notices,
.itemid-101 .ev-contact {
  background: var(--ev-panel);
  border: 0;
  border-radius: 0;
  grid-row: 2;
  margin: 0;
  padding: clamp(1.4rem, 4vw, 3rem);
}

.itemid-101 .ev-news {
  grid-column: 1;
}

.itemid-101 .ev-notices {
  border-inline-start: 1px solid var(--ev-white);
  grid-column: 2;
}

.itemid-101 .ev-contact {
  border-inline-start: 1px solid var(--ev-white);
  grid-column: 3;
}

.itemid-101 .ev-news .card-header,
.itemid-101 .ev-notices .card-header,
.itemid-101 .ev-contact .card-header {
  background: linear-gradient(180deg, var(--ev-blue), #0390d8);
  border: 0;
  color: var(--ev-white);
  font-size: 1.5rem;
}

.itemid-101 .ev-alert {
  background: #cf1200;
  border: 0;
  border-radius: 0;
  color: var(--ev-white);
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  text-align: center;
}

.itemid-101 .ev-alert .card-body {
  padding: .7rem max(1rem, calc((100vw - 1320px) / 2));
}

.itemid-101 .ev-alert a {
  color: var(--ev-white);
}

.itemid-101 .container-component > main {
  background: var(--ev-white);
  grid-column: 1 / -1;
  grid-row: 4;
  padding: clamp(2.5rem, 7vw, 5rem) max(1rem, calc((100vw - 1040px) / 2));
  text-align: center;
}

.itemid-101 .container-top-a,
.itemid-101 .container-top-b {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1320px;
  order: 2;
  padding-block: .5rem;
  width: min(100% - 2rem, 1320px);
}

.itemid-101 .container-top-b {
  order: 3;
}

.itemid-101 .ev-service {
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 0;
  color: var(--ev-white);
  min-height: 250px;
  overflow: hidden;
  position: relative;
}

.itemid-101 .ev-service::before {
  background: linear-gradient(0deg, rgb(0 50 88 / 88%), rgb(0 50 88 / 8%));
  content: "";
  inset: 0;
  position: absolute;
}

.itemid-101 .ev-service .card-body {
  align-self: end;
  position: relative;
  text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
  z-index: 1;
}

.itemid-101 .ev-service a,
.itemid-101 .ev-service h1,
.itemid-101 .ev-service h2,
.itemid-101 .ev-service h3 {
  color: var(--ev-white);
}

.itemid-101 .ev-service-director {
  background-image: url("../images/evijarvi-mikko-huhtala-tervehdys.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.itemid-101 .ev-service-library { background-image: url("../images/etus_bott_kirjasto.jpg"); }
.itemid-101 .ev-service-housing { background-image: url("../images/etus_bott_asuminen.jpg"); }
.itemid-101 .ev-service-activities { background-image: url("../images/etus_bott_ranta.jpg"); }
.itemid-101 .ev-service-business { background-image: url("../images/etus_bott_yrittaja.jpg"); }
.itemid-101 .ev-service-education { background-image: url("../images/etus_bott_opintie.jpg"); }

.itemid-101 .container-bottom-a {
  order: 4;
}

.itemid-101 .container-bottom-b {
  order: 5;
}

@media (max-width: 991.98px) {
  .container-header .container-nav {
    justify-content: space-between;
    padding-block: .55rem;
  }

  .container-header .container-nav nav.navbar {
    display: contents;
  }

  .container-header .navbar-toggler {
    order: 1;
  }

  .container-header .container-search {
    margin-block: 0;
    margin-inline-start: auto;
    order: 2;
  }

  .container-header .navbar-collapse {
    flex-basis: 100%;
    order: 3;
  }

  .container-header .navbar-collapse.show {
    width: 100%;
  }

  .container-header .navbar-collapse .mod-menu {
    align-items: stretch;
    justify-content: flex-start;
  }

  .itemid-101 .container-top-a,
  .itemid-101 .container-top-b {
    grid-template-columns: 1fr;
  }

  .itemid-101 .ev-service {
    min-height: 220px;
  }

  .container-bottom-a {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .container-header .container-search {
    inset-inline-end: max(1rem, calc((100vw - 1320px) / 2));
    margin: 0;
    position: absolute;
    top: 2.5rem;
    z-index: 2;
  }

  .container-header .container-search .mod-finder__search .btn {
    background: var(--ev-white);
    border-color: var(--ev-blue-dark);
    border-radius: .25rem;
    color: var(--ev-blue-dark);
    padding-inline: .85rem;
    width: 3.5rem;
  }

  .container-header .container-search .mod-finder__search .btn .icon-search {
    color: var(--ev-blue-dark);
  }

  .container-header .container-search .mod-finder__search .btn:hover,
  .container-header .container-search .mod-finder__search .btn:focus-visible {
    background: rgb(0 108 191 / 12%);
  }

  .container-header .metismenu li.parent:hover > .mm-collapse,
  .container-header .metismenu li.parent:focus-within > .mm-collapse {
    display: block;
  }

  .container-header .metismenu li.parent > .mm-toggler {
    display: none !important;
  }

  .container-header .metismenu .mm-collapse > li.parent > a,
  .container-header .metismenu .mm-collapse > li.parent > span {
    width: 100%;
  }

  .container-header .metismenu .mm-collapse > li.parent > a::after,
  .container-header .metismenu .mm-collapse > li.parent > span::after {
    content: "\203a";
    margin-inline-start: auto;
    padding-inline-start: 1rem;
  }

  .container-header .metismenu .mm-collapse > li.parent > .mm-collapse {
    background-color: var(--ev-white);
    box-shadow: 1px 1px 8px rgb(0 0 0 / 18%);
    color: var(--ev-text);
    flex-basis: auto;
    inset-inline-start: 100%;
    margin: 0;
    min-width: 14rem;
    position: absolute;
    top: 0;
  }
}

@media (max-width: 767.98px) {
  .container-bottom-a {
    grid-template-columns: 1fr;
  }

  .itemid-101 .container-component {
    grid-template-columns: 1fr;
  }

  .itemid-101 .ev-news,
  .itemid-101 .ev-notices,
  .itemid-101 .ev-contact,
  .itemid-101 .ev-alert,
  .itemid-101 .container-component > main {
    grid-column: 1;
  }

  .itemid-101 .ev-news {
    grid-row: 2;
  }

  .itemid-101 .ev-notices {
    border-inline-start: 0;
    border-top: 1px solid var(--ev-white);
    grid-row: 3;
  }

  .itemid-101 .ev-contact {
    border-inline-start: 0;
    border-top: 1px solid var(--ev-white);
    grid-row: 4;
  }

  .itemid-101 .ev-alert {
    grid-row: 5;
  }

  .itemid-101 .container-component > main {
    grid-row: 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .itemid-101 .ev-home-hero .ev-hero-slide {
    transition: none;
  }
}

/* Align Bootstrap 5 Visforms actions with their controls and make them full-width. */
.bt5.visform .pbBtnCon > .col-1:first-child {
  width: 25%;
}

.bt5.visform .pbBtnCon > .col-10 {
  width: 75%;
}

.bt5.visform .pbBtnCon > .col-1:last-child {
  display: none;
}

.bt5.visform .pbBtnCon .form-group.row.justify-content-center > .col-auto,
.bt5.visform .pbBtnCon input[type="submit"] {
  width: 100%;
}

.bt5.visform textarea.form-control {
  height: 12rem;
}

/* Required fields retain native validation and their visible asterisks. */
.visform .vis_mandatory {
  display: none;
}