footer { padding: 5px 0 min(calc(5px + 10vw), 55px) 0; }
@media (min-height: 600px) or (min-width: 840px) {
  footer { padding: 5px 0 min(calc(5px + 30vw), 155px) 0; }
}
@media ((min-width: 840px) and (min-aspect-ratio: 2/3)) {
  footer { padding: 5px 0; }
}

.sitenav ol { 
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  font-size: 0;
  position: fixed;
  left: 0;
  bottom: 0;
  background: white;
  z-index: 500;
  text-align: center;
  width: 100%;
}
@media (min-width: 521px) {
  .sitenav ol {
    margin: 0 -260px;
    width: 520px;
    left: 50vw;
    border-radius: 20px 20px 0 0;
    background: rgba(255, 255, 255, 0.8)
  }
}
@media ((min-width: 840px) and (min-aspect-ratio: 2/3)) {
  .sitenav ol {
    position: absolute;
    margin: 0;
    left: auto;
    right: 10px;
    top: 0;
    bottom: auto;
    background: none;
  }
  [dir="rtl"] .sitenav ol {
    left: 10px;
    right: auto;
  }
}
@media(min-width: 1500px) {
  .sitenav ol {
    left: auto;
    right: calc((100vw - 1500px)/2 + 10px);
  }
  [dir="rtl"] .sitenav ol {
    left: calc((100vw - 1500px)/2 + 10px);
    right: auto;
  }
}
.sitenav ol li {
  display: inline-block;
  width: 20vw;
  height: 30vw;
  max-width: 100px;
  max-height: 150px;
  margin: 0px;
  overflow: hidden;
  position: relative;
}
.sitenav ol li a {
  text-decoration: none;
  color: black;
}
.sitenav ol li a:focus {
  text-decoration: none;
  border: none;
  outline: none;
}

.sitenav ol li a .navtext {
  display: block;
  width: 100%;
  height: calc(33.33% - 12px);
  margin: 0;
  padding: 0;
  font-size: min(calc(20vw/8), 12.9px);
  font-family: sans-serif;
  text-align: center;
  font-weight: normal;
  position: absolute;
  bottom: 2px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 5px;
}
.sitenav ol li a:hover .navtext,
.sitenav ol li a:active .navtext, 
.sitenav ol li a:focus .navtext, 
.sitenav ol li a.current .navtext {
  font-size: min(calc(20vw/7.5), 13.75px);
  font-weight: bold;
}
.sitenav ol li a:focus .navtext {
  border: 1px dotted black;
}
.sitenav ol li a img {
  width: calc(100% - 10px);
  height: calc(66.66% - 10px);
  object-fit: cover;
  margin: 15px 5px 5px 5px;
  border-radius: 25%;
}
.sitenav ol li a:hover img,
.sitenav ol li a:active img, 
.sitenav ol li a:focus img, 
.sitenav ol li a.current img {
  width: 100%;
  height: 66.66%;
  object-fit: cover;
  margin: 5px 0px 5px 0px;
}
.sitenav ol li a span.lang-icon {
  width: calc(100% - 10px);
  height: calc(66.66% - 10px);
  display: block;
  font-size: min(10vw, 50px);
  font-family: sans-serif;
  text-align: center;
  box-sizing: border-box;
  margin: 15px 5px 5px 5px;
  padding: min(calc(3vw), 15.6px) 0 0 0;
  background: #f0f0f0;
  border-radius: 25%;
  overflow: hidden;
}
.sitenav ol li a:hover span.lang-icon,
.sitenav ol li a:active span.lang-icon,
.sitenav ol li a:focus span.lang-icon,
.sitenav ol li a.current span.lang-icon {
  width: 100%;
  height: 66.66%;
  font-size: min(calc(10vw + 10px), 60px);
  margin: 5px 0px 5px 0px;
}

@media ((max-height: 600px) and (max-width: 840px)) {
  .sitenav ol li {
    height: 10vw;
    max-height: 50px;
  }
  .sitenav ol li a .navtext {
    height: calc(100% - 12px);
  }
  .sitenav ol li a img {
    display: none;
  }
  .sitenav ol li a span.lang-icon {
    display: none;
  }
}
:root {
  scroll-behavior: smooth;
}
body { 
  margin: 0; 
  overflow-x: hidden; 
  overflow-y: overlay; 
}
main article { 
  padding: 0;
  position: relative;
}
::-webkit-scrollbar {
  background: none;
  width: 8px;
}
::-webkit-scrollbar:hover {
  background: #ccc;
  border: 1px solid white;
  border-right: none;
}
::-webkit-scrollbar-thumb {
  background: #aaa;
  border: 1px solid white;
  border-right: none;
  border-radius: 5px;
  margin: 0 1px;
}
::-webkit-scrollbar-thumb:hover {
  background: #888;
}
h1 { font-size: 2em; }
picture { font-size: 0; }

.full-width {
  width: 100%;
  height: auto;
}

.stacked {
  display: grid;
}
.stacked > * {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
}
.align-end {
  align-self: end;
}

hgroup {
  color: white;
  text-shadow: 0px 1px 3px black;
  font-family: sans-serif;
  font-size: 5vw;
  font-weight: 900;
  font-style: oblique;
}
hgroup h1 {
  margin: 2em 0 0 0;
  font-size: 1.5em;
  text-decoration: underline;
}
hgroup.align-end h1 {
  margin: 0;
}
hgroup p {
  margin: 0.1em 0;
}
@media (min-aspect-ratio: 7/8) {
  hgroup h1 {
    margin: 0;
  }
}
@media (min-width: 800px) {
  hgroup {
    font-size: 37px;
  }
}
@media (min-width: 1200px) {
  hgroup h1 {
    margin: 2em 0 0 0;
  }
}
@media (min-width: 1500px) {
  hgroup {
    font-size: 2.5vw;
  }
}

dt {
  font-weight: bold;
  margin-top: 1em;
}
dd {
  margin: 0.5em 0 0 0;
}

.floatstart, .floatend {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 500px) {
  .floatstart, [dir="rtl"] .floatend { 
    float: left; margin: 0 1rem 1rem 0;
  }
  [dir="rtl"] .floatstart, .floatend {
    float: right; margin: 0 0 1rem 1rem;
  }
}
.border-black {
  border: 1px solid black;
}

.logo { 
  margin: 10px 0 20px 0; 
  padding: 0;
  background-image: url("../static/logo-new-he-white-right-line.png");
  font-size: 0;
  height: 120px;
  position: relative;
}
[dir="rtl"] .logo {
  background-image: url("../static/logo-new-he-white-left-line.png");
}
@media(min-width: 1500px) {
  .logo:before {
    background-image: url("../static/logo-new-he-white-left-line.png");
    display: block;
    width: calc((100vw - 1500px)/2);
    height: 120px;
    float: left;
    content: "";
  }
  [dir="rtl"] .logo:before {
    background-image: url("../static/logo-new-he-white-right-line.png");
    float: right;
  }
}
.pad-to-logo {
  padding-left: 10px;
  padding-right: 10px;
}
@media(min-width: 1500px) {
  .pad-to-logo {
    padding-left: calc((100vw - 1500px)/2 + 10px);
    padding-right: calc((100vw - 1500px)/2 + 10px);
  }
}

.clear-both {
  clear: both;
}

.sec-image {
  width: 100%;
  height: auto;
}

.maybe-columns {
  margin-top: 1em;
  margin-bottom: 1em;
}
.maybe-columns section {
  break-inside: avoid;
}
.maybe-columns h2 {
  margin: 0 0 0.5em 0;
}
@media(min-width: 1080px) {
  .maybe-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
  }
}

.full-width-text .extra {
  display: none;
  width: 360px;
  float: right;
  margin: 0 10px;
}
.full-width-text img.extra {
  height: 202px;
  object-fit: cover;
}
.full-width-text p {
  padding: 0 10px;
  margin: 0 0 0.5em 0;
  text-align: justify;
}
.full-width-text ul {
  padding: 0 10px;
  margin: 0 0 0.5em 0;
  text-align: justify;
}
.full-width-text ul li {
  margin: 0.5em 0 0 2em;
}
[dir="rtl"] .full-width-text ul li {
  margin: 0.5em 2em 0 0;
}
@media (min-width: 900px) {
  .full-width-text .extra {
    display: block;
  }
  [dir="rtl"] .full-width-text .extra {
    float: left;
  }
  .full-width-text .more-extra {
    display: none;
  }
  .full-width-text p, .full-width-text ul {
    width: calc(100% - 380px);
    text-align: left;
  }
  [dir="rtl"] .full-width-text p,
  [dir="rtl"] .full-width-text ul {
    text-align: right;
  }
}
@media (min-width: 1140px) {
  .full-width-text .more-extra {
    display: block;
  }
  .full-width-text .extra.wide {
    width: 720px;
  }
  .full-width-text p, .full-width-text ul {
    width: calc(100% - 750px);

  }
}
@media (min-width: 1500px) {
  .full-width-text img.extra {
    width: 465px;
    height: 262px;
  }
  .full-width-text .extra.wide {
    width: 930px;
  }
  .full-width-text p, .full-width-text ul {
    width: calc(100% - 960px);
    max-width: 960px;
  }
}

aside {
  font-size: 1rem;
  z-index: 200;
  position:relative;
  background: lightgrey;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
}
aside section {
  padding: 0 10px 10px 10px;
  break-inside: avoid;
}
aside h1 {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-bottom: 1px solid black;
  font-size: 1.2rem;
  text-align: center;
}
aside h2 {
  position: initial;
  background: none;
  font-size: 1rem;
  text-align: center;
}
aside p {
  padding: 0;
  width: auto;
  text-align:justify
}
aside img {
  width: 338px;
  height: 190px;
  border-radius: 4px;
  object-fit: cover;
}
@media (min-width: 1140px) {
  aside img {
    width: 218px;
  }
}
@media (min-width: 1500px) {
  aside img {
    width: 289px;
  }
}

.colscroll { 
  position: relative;
  column-count: 3;
  column-gap: 1px;
  column-rule: 1px solid black;
  width: calc(3px + 300%);
  margin-bottom: 40px;
  transition-property: left;
  transition-duration: 0.5s;
  border-bottom: 1px solid black;
}
.colsel {
  box-sizing: content-box;
  position: absolute;
  bottom: 20px;
  width: 0px;
  height: 0px;
  border: 6px solid #5684bf;
  margin: -6px;
  appearance: none;
  border-radius: 50%;
  background: white;
  transition-property: width, height, margin;
  transition-duration: 0.25s;
}
.colsel:checked {
  width: 8px;
  height: 8px;
  margin: -10px;
}
#colsel1 { left: 30%; }
#colsel2 { left: 50%; }
#colsel3 { left: 70%; }
#colsel1:checked ~ .colscroll { left: 0; }
#colsel2:checked ~ .colscroll { left: calc(-100% - 1px); }
#colsel3:checked ~ .colscroll { left: calc(-200% - 3px); }
[dir="rtl"] #colsel1 { left: 70%; }
[dir="rtl"] #colsel2 { left: 50%; }
[dir="rtl"] #colsel3 { left: 30%; }
[dir="rtl"] #colsel1:checked ~ .colscroll { left: 0; }
[dir="rtl"] #colsel2:checked ~ .colscroll { left: calc(100% + 1px); }
[dir="rtl"] #colsel3:checked ~ .colscroll { left: calc(200% + 3px); }

@media (min-width: 1140px) {
  .colscroll {
    width: 100%;
    border-bottom: none;
    left: 0;
    transition-property: none;
    margin-bottom: 0;
  }
  .colsel {
    display: none;
  }
  #colsel1:checked ~ .colscroll,
  #colsel2:checked ~ .colscroll,
  #colsel3:checked ~ .colscroll,
  [dir="rtl"] #colsel1:checked ~ .colscroll,
  [dir="rtl"] #colsel2:checked ~ .colscroll,
  [dir="rtl"] #colsel3:checked ~ .colscroll { left: 0; }
}

.mainpage {
  font-size: 1.4rem;
}

footer {
  clear: both;
  text-align: center;
  background: black;
  color: white;
}
.galhead {
  font-size: 1.5rem;
  height: 3rem;
  margin: 0px;
  padding: 0.6rem 10px 0.2rem 3rem;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
}
[dir="rtl"] .galhead {
  padding: 0.8rem 3rem 0 10px;
}
h2.galhead {
  position: sticky;
  font-size: 0.8rem;
  padding-top: 1.2rem;
}
@media (min-width: 560px) {
  h2.galhead {
    font-size: 1.2rem;
    padding-top: 0.8rem;
  }
}

ul.gallery { 
  list-style: none; 
  padding: 0;
  display: block;
  font-size: 0;
  width: 100vw;
  max-width: 100vw;
}
ul.gallery li {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 33.33vw;
  height: 25vw;
  overflow: hidden;
}
ul.gallery img {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  display: block;
  margin: 1px;
  object-fit: cover;
}
ul.gallery li:first-child {
  width: 100vw;
  height: auto;
}
ul.gallery li:nth-child(3n-1):last-child {
  width: 100vw;
  height: auto;
}
ul.gallery li:nth-child(3n-1):nth-last-child(2), 
ul.gallery li:nth-child(3n):last-child,
ul.gallery li:first-child:nth-last-child(2), 
ul.gallery li:nth-child(2):last-child {
  width: 50vw;
  height: 37.6vw;
}

@media(min-aspect-ratio: 1/1) {
  ul.gallery li, 
  ul.gallery li:first-child,
  ul.gallery li:nth-child(3n-1):last-child,
  ul.gallery li:nth-child(3n-1):nth-last-child(2), 
  ul.gallery li:nth-child(3n):last-child {
    width: 25vw;
    height: 14vw;
  }
  ul.gallery li:first-child:nth-last-child(4n+2),
  ul.gallery li:nth-child(2):nth-last-child(4n+1),
  ul.gallery li:first-child:nth-last-child(4n+1),
  ul.gallery li:nth-child(2):nth-last-child(4n), 
  ul.gallery li:first-child:nth-last-child(4n),
  ul.gallery li:nth-child(2):nth-last-child(4n-1),
  ul.gallery li:nth-child(4n):last-child,
  ul.gallery li:nth-child(4n-1):nth-last-child(2) {
    width: 50vw;
    height: 28vw;
  }
  ul.gallery li:nth-child(4n+1):last-child,
  ul.gallery li:nth-child(4n):nth-last-child(2),
  ul.gallery li:nth-child(4n-1):nth-last-child(3),
  ul.gallery li:first-child:nth-last-child(4n+3),
  ul.gallery li:nth-child(2):nth-last-child(4n+2),
  ul.gallery li:nth-child(3):nth-last-child(4n+1) {
    width: 33.33vw;
    height: 18.74vw;
  }
  ul.gallery li:first-child:last-child {
    width: 100vw;
    height: auto;
    max-height: 35vw;
  }
}

@media (min-width: 1500px) {
  ul.gallery img {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: 2px;
  }
}

.inav {
  font-size: 3rem;
  font-family:sans-serif;
  display: none;
  text-align: center;
  color: black;
  text-shadow: 0 0 5px white;
  position: fixed;
}
.inav:focus,
.inav:hover {
  color: gray;
}
label.inav#zoom-out-btn {
  display: block;
  position: fixed;
  right: 0;
  top: 0;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 1000;
}
/* Keyboard navigation */
@media (hover: hover) and (pointer: fine) and (min-width: 840px) and (min-aspect-ratio: 2/3) {
  input.inav {
    display: block;
    position: absolute;
    appearance: none;
  }
  input.inav#zoom-out {
    font-size: 1.5vw;
    position: fixed;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    outline: none;
    transition-property: height;
    transition-duration: 0.5s;
  }
  input.inav#zoom-out:focus {
    height: 3em;
    transition-property: height;
    transition-duration: 0.5s;
  }
  input.inav#zoom-out:after {
    display: inline-block;
    content: "To navigate images with the keyboard - Press arrow keys";
    color: black;
    background: rgba(255,255,255, 0.7);
    padding: 1em;
    height: 1em;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
  }
  [lang="he"] input.inav#zoom-out:after {
    content: "לניווט בין התמונות במקלדת - לחץ על מקשי החצים";
  }
}
input.inav:checked ~ label.inav#zoom-out-btn {
  display: none;
}
input.inav:checked ~ .icont {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  bottom: 0;
  z-index: 800;
  background: black;
}
input.inav:checked ~ .icont img {
  margin: 0;
  object-fit: contain;
}
input.inav:checked ~ label.inav {
  display: block;
  z-index: 900;
  top: 0;
  bottom: 0;
  width: 20vw;
  padding: calc(50vh - 3.5rem / 2) 1vh;
}
input.inav:checked ~ label.inav:hover {
  background: rgba(255,255,255, 0.3);
}
input.inav:checked ~ label.inav.nprev {
  left: 0;
  text-align: left;
}
[dir="rtl"] input.inav:checked ~ label.inav.nprev {
  left: auto;
  right: 0;
  text-align: right;
}
input.inav:checked ~ label.inav.nnext {
  right: 0;
  text-align: right;
}
[dir="rtl"] input.inav:checked ~ label.inav.nnext {
  right: auto;
  left: 0;
  text-align: left;
}

.gnav {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  overflow: visible;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
[dir="rtl"] .gnav {
  right: 0;
  left: auto;
}
.gnav-btn {
  width: 3rem;
  height: 3rem;
  display: block;
  position: sticky;
  padding: 0;
  margin: 0;
  top: 0;
  z-index: 500;
  appearance: none;
  text-align: center;
  font-size: 2.2rem;
}
.gnav-btn:after {
  content: "\2630";
  animation: 0.40s linear hamburger-un-fade;
}
.gnav-btn:focus, 
.gnav-btn:hover {
  background: rgba(230, 230, 230, 0.8);
  outline: none;
  border: none;
}
.gnav-btn:checked:after {
  content: "\00d7";
  animation: 0.40s linear hamburger-fade;
}
@keyframes hamburger-fade {
  0% { content: "\2630"; color: rgba(0, 0, 0, 1); }
  50% { content: "\2630"; color: rgba(0, 0, 0, 0); }
  51% { content: "\00d7"; color: rgba(0, 0, 0, 0); }
  100% { content: "\00d7"; color: rgba(0, 0, 0, 1); }
}
@keyframes hamburger-un-fade {
  100% { content: "\2630"; color: rgba(0, 0, 0, 1); }
  51% { content: "\2630"; color: rgba(0, 0, 0, 0); }
  50% { content: "\00d7"; color: rgba(0, 0, 0, 0); }
  0% { content: "\00d7"; color: rgba(0, 0, 0, 1); }
}
.gnav-menu {
  display: block;
  list-style: none;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 24em;
  max-width: 100vw;
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.5s, visibility 0.5s, overflow-y 0s;
  margin: 0;
  padding: 0;
  background: rgba(230, 230, 230, 0.8);
  position: sticky;
  z-index: 500;
  top: 3em;
  font-weight: bold;
  font-size: min(1rem, 4.5vw);
}
.gnav-btn:checked ~ .gnav-menu {
  max-height: calc(80vh - 3rem - min(10vw, 50px));
  visibility: visible;
  overflow-y: scroll;
  transition: max-height 0.5s, visibility 0s, overflow-y 0.5s;
}
@media (min-height: 600px) or (min-width: 840px) {
  .gnav-btn:checked ~ .gnav-menu {
    max-height: calc(100vh - 3rem - min(30vw, 150px) - 5px);
  }
}
@media ((min-width: 840px) and (min-aspect-ratio: 2/3)) {
  .gnav-btn:checked ~ .gnav-menu {
    max-height: calc(100vh - 3rem);
  }
}
.gnav-menu > * {
  margin: 0.5em 0.5em;
}
.gnav-menu > :first-child {
  margin-top: 0.2em;
}
.gnav-menu > :last-child {
  margin-bottom: 0.5em;
  border-top: 1px solid black;
  padding-top: 0.5em;
}
.gnav-menu a {
  text-decoration: none;
}