body {
    font-family: "Assistant", serif;
    font-optical-sizing: auto;
    font-weight: 400; /* Use a value from 200 to 800 */
    font-style: normal;
    line-height: 1.5;
    margin: 0 auto;
    background-color: rgb(32 42 41);
}
h1, h2, h3 {
    margin: 1em 0;
    line-height: 1.5;
}
h1 {font-weight: 800; line-height: 1.2; font-size: 2.2em; text-shadow: rgb(32 42 41) 1px 1px 1px;}
h2 {font-weight: 700;}
h3 {font-weight: 600;}
h4 {font-size: 1em; font-weight: 800;}
p {
    margin-bottom: 1em;
    line-height: 1.5;
}
a {color: #e4a338; text-decoration: none;}
a:hover {color: #b8822b;}
a span {display: inline-block;}
section {padding: 5em 1em;}

.ns-btn {background-color: #e4a338; color: rgb(32 42 41); font-weight: 600; border: none; padding: .5em 2em; border-radius: .1em;}
.ns-btn:hover {background-color: #b8822b;}
.ns-btn:active {background-color: #b8822b;}

/* HEADER & NAVI */
#ns-logo-header {width: 180px; margin-left: 1em;}
#ns-logotxt {fill: #f9f9f9;}
.ns-nav-container {background-color: rgb(32 42 41) !important;}
.ns-nav {font-weight: 600;}
.ns-nav a {
    padding: .2em 1em .3em !important;
    margin: .2em;
    color: #f9f9f9;
}
.ns-nav a:hover {
    background-color: #e4a338;
    transition: 300ms ease-in;
}

/* SECTIONS */
/* HERO */
#hero {
    background: url(img/hero.png) no-repeat 90% center;
    background-size: cover;
    background-color: rgb(32 42 41);
    color: #f9f9f9;
    padding: 7em 1em;
    filter: brightness(1.2);
}
#hero h1 {max-width: 500px;}

@media screen and (max-width: 750px) {
  #hero {padding: 11em 0 3em;}
}

@media screen and (max-width: 550px) {
  #hero {padding: 15em 0 2em;}
}

.animointi {
    animation-duration: 800ms;
    animation-name: animointi-fade;
    animation-delay: 10ms;
    animation-fill-mode: backwards;
  }
  @keyframes animointi-fade {
      0% { opacity: 0; }
    100% { opacity: 1; }
  }
  .animointi.pop {
    animation-name: animointi-pop;
    animation-timing-function: cubic-bezier(.3,.5,.7,1.1);
  }
  @keyframes animointi-pop {
    0% {
      opacity: 0;
      transform: translate(0, -16px);
    }    
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  .viive-1 {
    animation-delay: 200ms;
  } 
  .viive-2 {
    animation-delay: 300ms;
  }  
  .viive-3 {
    animation-delay: 400ms;
  }
  @media screen and (prefers-reduced-motion: reduce) {
    .animointi { animation: none !important; }
  }
#ominaisuudet {background: #f9f9f9;}
#ominaisuudet h2 {max-width: 700px; margin: 1em auto 2em;}
#ominaisuudet i {font-size: 3em; color: #e4a338;}
#ominaisuudet h3 {margin-top: .2em;}
#ominaisuudet a {margin-top: 3em;}
#esittely {background-color: #f0e8e1;}
#esittelyhero {
  max-width: 600px;
  width: 100%;
  height: auto;
}
#esittely img {margin: 2em auto 0 auto;}
#esittely i {position: relative; top: 0; left: 0; color: #e4a338; font-size: 3em; z-index: 99;}
#esittely .row {margin-bottom: 2em;}
#hinnat {background-color: #f9f9f9; color: rgb(32 42 41);}
#hinnat h3 {margin-bottom: 0.5em;}
#hinnat p {margin-bottom: 2em;}
#hintalinkit {text-align: center; margin-bottom: 2em;}
#hintalinkit .card {background-color: transparent; border-radius: 2px; border: 1px solid #ccc;}
#hintalinkit .card:hover {box-shadow: 1px 1px 4px #ccc;}
#hintalinkit p {margin-bottom: 0;}
.ns-tbl th, .ns-tbl td {padding: 0 2em;}
.ns-tbl th {border-radius: 2px 2px 0 0;}
.ns-tbl th p {font-weight: 400;}
.ns-tbl td {width: 70%;}
.ns-tbl-tilaa {padding: 2em !important; border-radius: 0 0 2px 2px; border-bottom: none; text-align: right;}
.ns-tbl-ominaisuudet h4, .ns-tbl-hinnat h4, .ns-tbl-hinnat a {margin: 1em 0;}
.ns-tbl-ominaisuudet ul, .ns-tbl-hinnat ul {margin: 0; padding: 0;}
.ns-tbl-ominaisuudet li, .ns-tbl-hinnat li {list-style: none; margin: .5em 0 1.5em; padding: 0;}
.ns-tbl-ominaisuudet > ul > li > i {display: block; color: #e4a338; font-size: 1.5em;}
.ns-collapse {margin-bottom: .5em !important;}
a[aria-expanded=true] .bi-chevron-down {
  display: none;
}
a[aria-expanded=false] .bi-chevron-up {
  display: none;
}
.ns-tbl-hinnat li>span {display: block;}
.ns-tbl-hinnat li>span>span {display: block;}
@media screen and (max-width: 550px) {
  tr {
      display: flex;
      flex-direction: column;
  }
  
  td {
      display: block;
      width: 100%;
  }
  .ns-tbl td {width: 100%;}
}
#tilaa, #testaa {background-color: #e4a338; padding: 1em 1em 3em}
#tilaa i, #testaa i {font-size: 2em;}
#tilaa .ns-btn, #testaa .ns-btn {background-color: #f0e8e1; color: rgb(32 42 41);}
#tilaa .ns-btn:hover, #testaa .ns-btn:hover {background-color: #f7f6f6; color: rgb(32 42 41);}
#tilaa h2, #testaa h2 {margin-bottom: .5em;}
#lisaominaisuudet {background-color: #f0e8e1;}
#lisaomintro {margin-bottom: 3em;}
#lisaomintro i {font-size: 8em; color: #e4a338; margin-top: 40px; display: block;}
#lisaominaisuudet .card {background-color: #fff; border-radius: 2px;}
#lisaominaisuudet .card img {border-radius: 2px 2px 0 0; max-width: 300px; padding: 3em 1em 1em 1em; margin: 0 auto;}
#lisaominaisuudet h3 {margin-top: 0;}
#lisaominaisuudet .card-body {margin-bottom: 1em;}
#testaa {padding: 3em 0 4em 0;}
#testaa h3 {font-size: 1.2em; font-style: italic;} 
#yritys {background-color: #f9f9f9;}
#footer {background: #1a1a1a; color: #f0e8e1;}
#footer p {margin: 1.5em 0;}
#footer a {padding: 0 .5em;}