/* ===========  DROPDOWN SIDEBAR MENU =================== */

.site-nav__list {
  --clr_link: var(--clr_link_dark);
  --clr_link_hover: var(--clr_link_hover_em);
}
.site-nav__footer {
  --clr_link: var(--clr_nega);
}
.site-nav a:hover,
.site-nav a:focus {
  /* text-decoration: underline; */
  outline: 0;
}
.site-nav__list a,
.site-nav__nav a:visited,
.dd-indicator i {
  color: var(--clr_bg);
}
.site-nav__list a:hover,
.site-nav__nav a:focus {
  color: var(--clr_link_hover);
}
.site-nav__header a:hover,
.site-nav__header a:focus,
.site-nav__footer a:hover .cover-meta,
.site-nav__footer a:focus .cover-meta {
  color: var(--clr_link_hover_em);
  text-decoration: none;
  outline: 0;
}
/* .site-nav__footer a:hover .cover-meta span.sarja,
.site-nav__footer a:focus .cover-meta span.sarja {
  border-top: 2px var(--clr_link_hover) solid;
} */
/* #site-nav .dropdown-menu > li a:hover {
    text-decoration: underline;
} */
.site-nav__footer a:hover,
.site-nav__footer a:focus,
.site-nav a:hover span,
.site-nav a:focus span {
  color: var(--clr_link_hover_em);
  text-decoration: none;
}
#site-nav .site-nav__list > li.active,
#site-nav .dropdown-menu > li.active {
  background-color: var(--clr_link_active);
}
.site-nav a:hover .cover-meta span.nro,
.site-nav a:focus .cover-meta span.nro {
  border-bottom: 2px var(--clr_link_hover_em) solid;
}
.site-nav-toggler {
  position: fixed;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  box-sizing: border-box;
  padding: 0;
  margin: auto;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1;
  background-color: var(--clr_black);
  color: var(--clr_white);
  border-radius: 0;
  border: 0;
  z-index: 444444;
  cursor: pointer;
}
.site-nav-toggler i:before {
  content: "\f0c9";
}
.site-nav-toggler[aria-expanded="true"] i:before {
  content: "\f00d";
}
.site-nav-toggler:hover,
.site-nav-toggler:focus {
  text-decoration: none;
  border: none;
}
#site-nav {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  text-align: center;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  min-height: 100%;
  line-height: 1;
  z-index: 333333;
}
.site-nav {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
#site-nav,
.site-nav__list {
  width: 100vw;
}
@media only screen and (min-width: 500px) {
  #site-nav,
  .site-nav__list {
    width: 500px;
  }
}
.site-nav__bg {
  width: 100%;
}
.site-nav__container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.site-nav__scroll {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  box-sizing: content-box;
  padding-right: 15px;
}
.site-nav__bg {
  min-height: 150%;
  background-color: var(--clr_black) !important;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -200;
}
.site-nav__nav {
  height: auto;
  max-height: none;
  border-top: 1px solid var(--clr_nega);
  border-bottom: 1px dashed var(--clr_nega);
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin-top: 0;
  margin-bottom: 1em;
}
.site-nav__nav.show {
  visibility: visible;
}
#site-nav-overlay {
  right: 0;
  z-index: 222222;
  position: fixed;
  top: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  bottom: 0;
  display: none;
  margin-top: 0;
}
#site-nav-overlay.show {
  display: block;
}
#site-nav__overlay {
  cursor: url("pix/close.png") 16 16, pointer;
  margin-top: 0;
}
#site-nav-overlay.show #site-nav__overlay {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
#site-nav__overlay {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  background: var(--clr_text);
  width: 100vw;
  height: 100vh;
  -webkit-transition: opacity 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
  -moz-transition: opacity 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
  -ms-transition: opacity 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
  -o-transition: opacity 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
  transition: opacity 0.4s cubic-bezier(0.215, 0.061, 0.355, 1);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
#site-nav {
  -webkit-transform: translate(500px, 0);
  -moz-transform: translate(500px, 0);
  -ms-transform: translate(500px, 0);
  -o-transform: translate(500px, 0);
  transform: translate(500px, 0);
  -webkit-transform: translate3d(500px, 0, 0);
  -moz-transform: translate3d(500px, 0, 0);
  -ms-transform: translate3d(500px, 0, 0);
  -o-transform: translate3d(500px, 0, 0);
  transform: translate3d(500px, 0, 0);
}
#site-nav.show {
  -webkit-transform: translate(0, 0) !important;
  -moz-transform: translate(0, 0) !important;
  -ms-transform: translate(0, 0) !important;
  transform: translate(0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}
#site-nav .site-nav__list > li {
  -webkit-transform: translate(30px, 0);
  -moz-transform: translate(30px, 0);
  -ms-transform: translate(30px, 0);
  transform: translate(30px, 0);
  -webkit-transform: translate3d(30px, 0, 0);
  -moz-transform: translate3d(30px, 0, 0);
  -ms-transform: translate3d(30px, 0, 0);
  -o-transform: translate3d(30px, 0, 0);
  transform: translate3d(30px, 0, 0);
}
#site-nav.show .site-nav__list > li {
  -webkit-transform: translate(0, 0) !important;
  -moz-transform: translate(0, 0) !important;
  -ms-transform: translate(0, 0) !important;
  transform: translate(0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}
#site-nav,
.site-nav__container,
.site-nav__bg {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.4s
      cubic-bezier(0.215, 0.061, 0.355, 1),
    background 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  -moz-transition: -moz-transform 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    background 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  -ms-transition: -ms-transform 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    background 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  -o-transition: -o-transform 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    background 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.215, 0.061, 0.355, 1) 1s,
    background 0.4s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  transition-delay: 1s, 0s, 0s;
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}
.site-nav__list .menu-item {
  cursor: pointer;
  margin: 0;
  position: relative;
  list-style: none;
}
.site-nav__list > li {
  opacity: 0;
  -webkit-transition: -webkit-transform 0.2s
      cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  -moz-transition: -moz-transform 0.2s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  -ms-transition: -ms-transform 0.2s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  -o-transition: -o-transform 0.2s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  transition: transform 0.2s cubic-bezier(0.215, 0.061, 0.355, 1),
    opacity 0.2s cubic-bezier(0.215, 0.061, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.site-nav__list li a,
.site-nav__list li > a:before {
  -webkit-transition: all 0.3s cubic-bezier(0.215, 0.061, 0.355, 1);
  -moz-transition: all 0.3s cubic-bezier(0.215, 0.061, 0.355, 1);
  -o-transition: all 0.3s cubic-bezier(0.215, 0.061, 0.355, 1);
  -ms-transition: all 0.3s cubic-bezier(0.215, 0.061, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.215, 0.061, 0.355, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#site-nav.show .site-nav__list > li {
  opacity: 1;
}
#site-nav.show .site-nav__list > li:nth-child(1) {
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
#site-nav.show .site-nav__list > li:nth-child(2) {
  transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
}
#site-nav.show .site-nav__list > li:nth-child(3) {
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
#site-nav.show .site-nav__list > li:nth-child(4) {
  transition-delay: 0.35s;
  -webkit-transition-delay: 0.35s;
}
#site-nav.show .site-nav__list > li:nth-child(5) {
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}
#site-nav.show .site-nav__list > li:nth-child(6) {
  transition-delay: 0.45s;
  -webkit-transition-delay: 0.45s;
}
#site-nav.show .site-nav__list > li:nth-child(7) {
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
#site-nav.show .site-nav__list > li:nth-child(8) {
  transition-delay: 0.55s;
  -webkit-transition-delay: 0.55s;
}
#site-nav.show .site-nav__list > li:nth-child(9) {
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}
#site-nav.show .site-nav__list > li:nth-child(10) {
  transition-delay: 0.65s;
  -webkit-transition-delay: 0.65s;
}
#site-nav.show .site-nav__list > li:nth-child(11) {
  transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
}
#site-nav.show .site-nav__list > li:nth-child(12) {
  transition-delay: 0.75s;
  -webkit-transition-delay: 0.75s;
}
#site-nav.show .site-nav__list > li:nth-child(13) {
  transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
}
#site-nav.show .site-nav__list > li:nth-child(14) {
  transition-delay: 0.85s;
  -webkit-transition-delay: 0.85s;
}
#site-nav.show .site-nav__list > li:nth-child(15) {
  transition-delay: 0.9s;
  -webkit-transition-delay: 0.9s;
}
.site-nav__list > li a {
  width: 100%;
  min-height: 60px;
  align-items: center;
  padding: 12px;
  padding-left: 1.5rem;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1;
  text-align: left;
}
.site-nav__list.with_names > li a {
  width: 100%;
  min-height: 60px;
  align-items: center;
  padding: 12px;
  padding-left: 1.5rem;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
.site-nav__list.with_names > li a b {
  opacity: 0.7;
}
.numbers .site-nav__list > li a {
  display: grid;
  grid-template-columns: 45px 1fr;
}
.site-nav__list > li a {
  min-height: 60px;
  padding-right: 60px;
}
.site-nav__list.with_names > li a {
  min-height: 60px;
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.site-nav__list li > a::before,
.site-nav__header > div a::before {
  position: absolute;
  top: 0;
  right: -45px;
  content: "";
  bottom: 0;
  width: 0;
  z-index: -1;
  background-color: var(--clr_link);
  transition: all 0.3s cubic-bezier(0.215, 0.061, 0.355, 1);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.site-nav__list li:hover > a::before,
.site-nav__header > div:hover a::before {
  width: calc(100% + 45px);
}
.menu-item.active > a::before {
  width: calc(100% + 45px);
  opacity: 0.1;
}
.site-nav__list li.menu-item.active::hover > a::before {
  opacity: 1;
}
/* #site-nav .site-nav__list > li.active:not(.current-menu-parent) a, #site-nav .dropdown-menu > li.active a {
    text-decoration: underline;
} */
#site-nav .site-nav__list > li.active:not(.current-menu-parent) a span {
  text-decoration: none;
}
.site-nav__list li a span {
  font-size: 2.5em;
  padding: 0;
  text-decoration: none;
  width: 45px;
}
.site-nav__list li a em {
  margin-top: 0.5em;
}
.site-nav__header,
.site-nav__footer {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
.site-nav__header {
  position: relative;
  margin-top: 3rem;
}
.site-nav__header > div {
  position: relative;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--clr_nega);
}
.site-nav__header > * {
  padding: 1em 2em 0;
}
.site-nav__header a {
  margin: 1rem 0;
  padding: 1rem;
  color: var(--clr_nega);
}
.site-nav__header span {
  font-family: var(--ff_display);
  color: var(--clr_nega);
  font-size: 2.4rem;
  line-height: 1em;
  display: block;
  font-weight: 700;
}
.site-nav__header span.author,
.site-nav__header span.site-nav__description {
  color: var(--clr_nega);
  font-size: 1.8rem;
  line-height: 1em;
  font-weight: 400;
  margin-top: 0.2em;
}
.site-nav__footer {
  align-items: baseline;
  flex-direction: row;
  margin-top: 2rem;
}
.site-nav__list {
  line-height: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}