/*-----------------------------------------------
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;
  border-radius: 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 img { display: block; } 

/* 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;
}

/* R */
div#section1-left-wrap {
  flex-basis: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000 right / cover url(/img/layout/bg-black.jpg);
  padding: 40px 0px 40px 120px;
}

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

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

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

div#section1-left-wrap a.button {
  display: inline-flex;
  align-items: center;
 -webkit-box-sizing:border-box;
 -ms-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
  background: #ffea00;
  color: black;
  font-weight: 800;
  text-decoration: none;
  min-height: 44px;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  transition: all 300ms ease-in-out 0s;
}

div#section1-left-wrap a.button:hover { 
  background: #ffdc00;
  transition: all 300ms ease-in-out 0s;
}

div#section1-left-wrap a.button:focus { 
  background: #ffd000;
  transition: all 300ms ease-in-out 0s;
}

/* R */
div#section1-right-wrap1 {
  flex-basis: 75%;
  min-height: 80vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

div#section1-right-wrap2 {
  height: 100%;
  background-image: url('/img/layout/bg-tyre.png'); 
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left center;
}

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

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

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%;
  flex-basis: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  gap: 16px;
}

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

div#section3-cont {
  min-height: 80vh;
  background: #e5e5e5 center / cover url(/img/layout/bg-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: 360px;         
  max-height: 360px;
  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 { 
  line-height: 1.4em;
  padding: 120px;
} 

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

/* R */
div#section4-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  margin-top: 40px;
}

/* R */
div#section4-left-wrap {
  width: 320px;
  text-align: right;
}

div#section4-center-wrap {
  flex-shrink: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

div#section4-center-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div#section4-right-wrap { width: 320px; }

/* R */
div#footer { 
  background: #e5e5e5 center / cover url(/img/layout/bg-black.jpg);
  color: #ffffff;
  line-height: 1.4em;
  padding-bottom: 16px;
}

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:last-of-type { margin-bottom: 0; }

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

img#footer-logo {
  display: block;
  margin: 0 auto;
}

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

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

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