/*-----------------------------------------------
GLOBAL
-----------------------------------------------*/

html { 
  font-size: 62.5%;
}

body { 
 margin: 0;
 padding: 0;
 line-height: 1em;
 background: #000000;
} 

* { outline: none; }

h1 {
  margin: 0 0 0.5em 0;
  line-height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1 + p { margin-top: 0.5em; }

h2 {
  margin: 1.5em 0 0.5em 0;
  line-height: 1.2em;
}

h2 + p { margin-top: 0.5em; }

/* styles.inc */
h3 { 
  margin: 1.5em 0 1em 0;
  line-height: 1.2em;
}

h3 + p { margin-top: 0.5em; }

p { margin: 1.5em 0; }

ul, ol { margin: 1em 0; }

a { transition: all 300ms ease-in-out 0s; }

/* styles.inc */
a:focus,
a:hover { transition: color 300ms ease-in-out 0s; }

a:focus { 
  outline: 2px solid #000000;
  outline-offset: 2px;
}

div {
 -webkit-box-sizing:border-box;
 -ms-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}

mark.large { line-height: 1.5em; }

div#tiptip_holder { z-index: 99999999; }

.nowrap { white-space: nowrap; }

.admin-linkset { 
  margin: 0;
  line-height: 1em;
}

.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.right { text-align: right; }
.center { text-align: center; }
.absmiddle { vertical-align: middle; }

.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
.table-gap { display: table-cell; width: 50px; }

table td p:only-child { margin: 0; }

table td p:first-child { margin-top: 0; }

table td p:last-child { margin-bottom: 0; }

/* styles */
table th,
table thead { 
	font-weight: bold;
	text-transform: uppercase;
}

/* styles.inc */
td.data-header,
th.data-header { 
  border: 0;
  padding: 4px 8px;
  text-transform: uppercase;
}

.data { padding: 8px; }

table.muotoiltu { border-collapse: collapse; }

/* styles.inc */
table.muotoiltu th { 
	padding: 4px 8px;
	text-transform: uppercase;
}

table.muotoiltu td { padding: 8px; }

div#pagemask-black { 
 top: 0;
 z-index: 11000;
}

/*--- Slide from left and right ---*/

/* Perustila (ei javascriptiä) */
.reveal {
  opacity: 1;
  transform: none;
}

/* R */
/* Piilotetaan ja liu'utetaan sisään */
.js .reveal {
  opacity: 0;
  transition: transform 1000ms cubic-bezier(0.5, 0, 0, 1),
              opacity   1000ms cubic-bezier(0.5, 0, 0, 1);
  will-change: transform, opacity;
}

/* R */
.js .slide-from-left  { transform: translateX(-120px); }
.js .slide-from-right { transform: translateX( 120px); }

.js .reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* (Valinnainen) vähennä liikettä jos käyttäjä pyytää */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/*-----------------------------------------------
LAYOUT
-----------------------------------------------*/

div#container { background: #ffffff; } 

div#printHeader { display: none; }

/* R */
div#header { 
  display: flex;
  width: 100%;
  height: 120px;
  padding: 30px 120px;
  position: fixed; 
  z-index: 100;
  top: 0;
  transition: top 0.2s ease-in-out;
  background: #ffffff;
}

/* R */
.header-up { top: -120px !important; }

/* R */
div#header-push { 
 height: 120px;
 background: #ffffff;
}

/* R */
div#headerWrap {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
} 

/* R */
div#logo-wrap h1 { margin: 0; }

/* R */
div#nav-wrap {
  display: flex;
  gap: 32px;
}

/* R */
div#nav-wrap a { 
  font-weight: bold;
  text-decoration: none;
}

div#section1-cont {
  background: #000000;
  color: #ffffff;
  line-height: 1.4em;
}

/* R */
div#section1-wrap {
  display: flex;
  align-items: stretch;
  min-height: 80vh;
}

div#section1-left-wrap1 {
  flex-basis: 50%;
  min-height: 80vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

div#section1-left-wrap2 {
  flex-basis: 50%;
  height: 100%;
  background-image: url('/img/layout/bg-brush.png'); 
  background-repeat: repeat-y;
  background-position: right center;
}

/* R */
div#section1-right-wrap {
  flex-basis: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/img/layout/bg-paint.jpg);
  padding: 40px 80px 40px 40px;
}

div#section1-right-wrap h1,
div#section1-right-wrap h2,
div#section1-right-wrap h3,
div#section1-right-wrap p,
div#section1-right-wrap a,
div#section1-right-wrap a:visited { color: #ffffff; }

div#section1-right-wrap h2:first-of-type { margin-top: 0; }

div#section1-right-wrap a:focus { outline: 2px solid #ffffff; }

/* R */
div#section2-cont {
  min-height: 80vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 120px 120px;
  gap: 80px;
  line-height: 1.4em;
}

/* R */
div#section2-left-wrap { flex-basis: 50%; }

div#section2-left-wrap h2:first-of-type { margin-top: 0; }

div#section2-left-wrap p:last-of-type { margin-bottom: 0; }

/* R */
div#section2-right-wrap {
  flex-basis: 50%;
  display: flex;
  justify-content:center;
  align-items: center;
  gap: 16px;
}

/* R */
div#section2-right-wrap img {
  height: 320px;         
  max-height: 320px;
  width: auto;             
  object-fit: contain;     
  display: block;
}

div#section3-cont {
  min-height: 80vh;
  background: #e5e5e5 repeat url(/img/layout/bg-paint-white.jpg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 120px 120px;
  gap: 80px;
  line-height: 1.4em;
}

/* R */
div#section3-left-wrap {
  flex-basis: 50%;
  display: flex;
  justify-content:center;
  align-items: center;
  gap: 16px;
}


/* R */
div#section3-left-wrap img {
  height: 320px;         
  max-height: 320px;
  width: auto;             
  object-fit: contain;     
  display: block;
}

/* R */
div#section3-right-wrap { flex-basis: 50%; }

div#section3-right-wrap h2:first-of-type { margin-top: 0; }

div#section3-right-wrap p:last-of-type { margin-bottom: 0; }

/* R */
div#section4-cont { padding: 120px 8px 8px 8px; } 

div#section4-cont h2 {
  margin-top: 0;
  text-align: center;
}

/* R */
div#images-cont {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

/* R */
div.kuva { 
  flex: 1 0 auto;
  height: 280px;
  overflow: hidden; 
}

div.kuva a {
  display: block;
  height: 100%;
}

div.kuva a:hover { cursor: pointer; }

/* R */
div.kuva img { 
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;  /* pehmeä animaatio */
}

div.kuva a:hover img,
div.kuva a:focus img {
  transform: scale(1.1);      /* suurennus hoverissa */
}

div#slider {
  position: relative;
  background: #ffffff;
  border:1px solid #ffffff;
  border-radius: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 -o-border-radius: 0;
 -moz-box-shadow: 0 0.2rem 2rem rgb(36 36 36 / 10%);
 -webkit-box-shadow: 0 0.2rem 2rem rgb(36 36 36 / 10%);
  box-shadow: 0 0.2rem 2rem rgb(36 36 36 / 10%);
}

div#slider.fullscreen {
  background: initial;
  border: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000000;
}

/* R */
a#closefullscreen {
  color: #ccc;
  top: 10px;
  right: 10px;
  position: absolute;
  cursor: pointer;
  width: 38px;
  height: 38px;
  overflow: hidden;
  line-height: 1em;
  display: none;
  z-index: 2000010;
  border: 1px solid transparent;
}

a#closefullscreen:hover,
a#closefullscreen:focus { color: #fff; }

a#closefullscreen:focus { border: 1px dotted #ffffff; }

/* R */
div#slider div.sliderWrap {
  position: relative;
  height: 580px;
  margin: 8px 8px 40px 8px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

div#slider div.sliderWrap:hover { cursor:pointer; }

div#slider div.sliderWrap img {
 object-fit: contain;
 height: 100%;
 width: 100%;
}

div#slider.fullscreen div.sliderWrap {
 width: 100vw;
 height: calc(95vh - 40px);
 margin: 0;
 margin-top: calc((100vh - 95vh) / 2);
 margin-left: 50%;
 transform: translateX(-50%);
}

div#slider.fullscreen div.sliderWrap:hover { cursor:default; }

div#slider div#sliderMap {
 display: none;
 background-color: white;
 width: 100%;
 height: 100%;
 text-align: center;
 padding-top: 50px;
}

div#slider a#sliderPrev {
 left: 4px;
 width: 44px;
 height: 44px;
 top: calc(50% - 20px);
 transform: translateY(-50%);
 position: absolute;
 background: #ffffff;
 cursor: pointer;
 opacity: 1;
 z-index: 199999;
}

div#slider.fullscreen a#sliderPrev { left: 8px; }

div#slider a#sliderNext {
 right: 4px;
 width: 44px;
 height: 44px;
 top: calc(50% - 20px);
 transform: translateY(-50%);
 position: absolute;
 background: #ffffff;
 cursor: pointer;
 opacity: 1;
 line-height: 1em;
 z-index: 199999;
}

div#slider.fullscreen a#sliderNext { right: 8px; }

div#slider a#sliderPrev:hover,
div#slider a#sliderPrev:focus,
div#slider a#sliderNext:hover,
div#slider a#sliderNext:focus {
  opacity: 0.8;
  border: initial;
}

div#slider:hover a#sliderPrev,
div#slider:focus a#sliderPrev {
 display: block;
}

div#slider a#sliderPrev.forcehide,
div#slider a#sliderNext.forcehide {
 display: none !important;
}

div#slider:hover a#sliderNext,
div#slider:focus a#sliderNext {
 display: block;
}

div#slider a#sliderPrev span,
div#slider a#sliderNext span { font-size: 44px; }

div#copied-to-clipboard { z-index: 3000000; }

button.copyToClipboard {
  color: #ffffff;
  background: transparent;
  border: 0;
  transition: color 300ms ease-in-out 0s;
  cursor: pointer;
}

button.copyToClipboard:hover,
button.copyToClipboard:focus { 
  color: #C76A68;
  transition: color 300ms ease-in-out 0s;
}

div#slider button.copyToClipboard {
  vertical-align: middle;
  margin-left: 8px;
}

div#tiptip_holder { z-index: 99999999; }

div#slider {
  position: relative;
  background: #ffffff;
  border:1px solid #ffffff;
  border-radius: 0;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 -o-border-radius: 0;
 -moz-box-shadow: 0 0.2rem 2rem rgb(36 36 36 / 10%);
 -webkit-box-shadow: 0 0.2rem 2rem rgb(36 36 36 / 10%);
  box-shadow: 0 0.2rem 2rem rgb(36 36 36 / 10%);
}

div#slider.fullscreen {
  background: initial;
  border: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000000;
}

/* R */
a#closefullscreen {
  color: #ccc;
  top: 10px;
  right: 10px;
  position: absolute;
  cursor: pointer;
  line-height: 1em;
  display: none;
  z-index: 2000010;
  border: 1px solid transparent;
}

a#closefullscreen:hover,
a#closefullscreen:focus { color: #fff; }

a#closefullscreen:focus { border: 1px dotted #ffffff; }

/* R */
div#slider div.sliderWrap {
  position: relative;
  height: 580px;
  margin: 8px 8px 40px 8px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

div#slider div.sliderWrap.hidden { display: none; }

div#slider div.sliderWrap:hover { cursor:pointer; }

div#slider div.sliderWrap img {
 object-fit: contain;
 height: 100%;
 width: 100%;
}

div#slider.fullscreen div.sliderWrap {
 width: 100vw;
 height: calc(95vh - 40px);
 margin: 0;
 margin-top: calc((100vh - 95vh) / 2);
 margin-left: 50%;
 transform: translateX(-50%);
}

div#slider.fullscreen div.sliderWrap:hover { cursor:default; }

div#slider div#sliderMap {
 display: none;
 background-color: white;
 width: 100%;
 height: 100%;
 text-align: center;
 padding-top: 50px;
}

div#slider a#sliderPrev {
 left: 4px;
 width: 44px;
 height: 44px;
 top: calc(50% - 20px);
 transform: translateY(-50%);
 position: absolute;
 background: #ffffff;
 cursor: pointer;
 opacity: 1;
 z-index: 199999;
 display: none;
}

div#slider.fullscreen a#sliderPrev { left: 8px; }

div#slider a#sliderNext {
 right: 4px;
 width: 44px;
 height: 44px;
 top: calc(50% - 20px);
 transform: translateY(-50%);
 position: absolute;
 background: #ffffff;
 cursor: pointer;
 opacity: 1;
 line-height: 1em;
 z-index: 199999;
 display: none;
}

div#slider.fullscreen a#sliderNext { right: 8px; }

div#slider a#sliderPrev:hover,
div#slider a#sliderPrev:focus,
div#slider a#sliderNext:hover,
div#slider a#sliderNext:focus {
  opacity: 0.8;
  border: initial;
}

div#slider:hover a#sliderPrev,
div#slider:focus a#sliderPrev {
 display: block;
}

div#slider a#sliderPrev.forcehide,
div#slider a#sliderNext.forcehide {
 display: none !important;
}

div#slider:hover a#sliderNext,
div#slider:focus a#sliderNext {
 display: block;
}

div#slider a#sliderPrev span,
div#slider a#sliderNext span { font-size: 44px; }

/* R */
div#slider .flexslider-img-text-cont {
  width: 100%;
  position: absolute;
  bottom: -40px;
  left: 0;
  padding: 10px;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.4em;
  background-color: #fff;
  color: #000;
}

div#slider .flexslider-img-text-cont span.img-nimi { font-weight: bold; }

div#slider.fullscreen .flexslider-img-text-cont {
 position: fixed;
 bottom: calc(-2.5vh - 40px);
 width: 100%;
 left: 0;
 background-color: #1a1a1a;
 color: #fff;
 padding: 10px 15px 20px 15px;
}

/* R */
div#footer { 
  background: repeat-x url(/img/layout/bg-paint-2.jpg);
  color: #ffffff;
  padding: 16px;
  line-height: 1.4em;
}

div#footer h1,
div#footer h2,
div#footer h3,
div#footer a,
div#footer a:visited { color: #ffffff; }

div#footer h2:first-child { margin-top: 0; }
div#footer p:first-of-type { margin-top: 0; }
div#footer p:last-of-type { margin-bottom: 0; }

/* R */
div#footerWrap {
  margin: auto; 
  padding: 64px 0 56px 0 
}

div#footerWrap a:focus { outline: 2px solid #ffffff; }

div#netlandWrap img#netland_apprunnercms { margin: 0 auto; }

div#netlandWrap a:focus img#netland_apprunnercms { 
  outline: 2px solid #ffffff; 
  outline-offset: 2px;
}