/*----- max-width: 767px -----*/

.admin-linkset,
div#toolbarWrapper,
.no-mobile  {
 display: none !important; 
}

.mobile-only { display: block; }

div#pagemask-black { opacity: 1 !important; }

.js .reveal { opacity: 1; }
.js .slide-from-left  { transform: translateX( 0px); }
.js .slide-from-right { transform: translateX( 0px); }

div#header {
  height: unset;
  min-height: 96px;
  padding: 16px;
}

.header-up { top: -96px !important; }

div#header-push { height: 96px; }

div#headerWrap { 
  flex-direction: column;
  gap: 8px;
}

div#logo-wrap h1 { font-size: 2.4rem; }

div#nav-wrap { gap: 12px; } 

div#nav-wrap a { font-size: 1.5rem; }

div#section1-wrap { flex-direction: column; }

div#section1-right-wrap { padding: 80px 16px; }

div#section2-cont {
  flex-direction: column;
  padding: 80px 16px 16px 16px;
  gap: 40px;
}

div#section2-right-wrap { flex-direction: column; }

div#section2-right-wrap img {
  height: auto;         
  max-height: unset;
  width: 100%; 
}

div#section3-cont {
  flex-direction: column-reverse;
  padding: 80px 16px 16px 16px;
  gap: 40px;
}

div#section3-left-wrap { flex-direction: column; }

div#section3-left-wrap img {
  height: auto;         
  max-height: unset;
  width: 100%;             
}

div#section4-cont { padding: 80px 8px 8px 8px; } 

div#images-cont { flex-direction: column; }

div#images-cont::after { content: none; }
 
div#slider div.sliderWrap {
  width: calc(100% - 2px);
  height: 50vh;
  margin: 0px 0px 40px 0px;
  height: initial;
  max-height: 70vh;
  aspect-ratio: 3/2;
}

div#slider a#sliderNext, div#slider.fullscreen a#sliderNext { right: 0; }
div#slider a#sliderPrev, div#slider.fullscreen a#sliderPrev { left: 0; }

a#closefullscreen { background: #00000099; }

div#slider.fullscreen div.sliderWrap {
  width: 100vw;
  height: calc(100vh - 120px);
  max-height: unset;
  margin: 0;
  margin-bottom: 0;
  margin-left: 50%;
  transform: translateX(-50%);
  aspect-ratio: unset;
}

div#slider.fullscreen a#sliderNext,
div#slider.fullscreen a#sliderPrev { top: calc(50%); }

div.kuva { height: unset; }

div.kuva img { max-height: unset; }  

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

  div#section2-cont { 
    min-height: unset;
    padding: 80px 32px;
  }

  div#section2-right-wrap { flex-direction: row; }

  div#section2-right-wrap img {
    height: 220px;
    max-height: 220px;
    width: auto;
  }

  div#section3-cont { 
    min-height: unset;
    padding: 80px 32px;
  }

  div#section3-left-wrap {
    flex-direction: row;
  }

  div#section3-left-wrap img {
    height: 220px;
    max-height: 220px;
    width: auto;
  }

  div#images-cont { flex-direction: row; }

  div#images-cont::after {   
    content: "";
    flex: 20 0 220px;
    background: repeat-x url(/img/layout/bg-gallery.jpg);
  }

  div.kuva { height: 220px; }

  div.kuva img { max-height: 220px; }  

}

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

  div#logo-wrap h1 { font-size: 2.2rem; }

  div#nav-wrap a { font-size: 1.4rem; }

  body { font-size: 1.8rem; }

  h1 { font-size: 4rem; }
  h2 { font-size: 3.6rem; }
  h3 { font-size: 2.6rem; }

  div#section1-right-wrap img { 
    width: 36px !important;
    height: 36px !important;
  }

}