.ominaisuudet {
  position: relative;
}
.ominaisuudet:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  opacity: 0;
  background: #fff;
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3222864146) 65%, rgba(255, 255, 255, 0.85) 100%);
  transition: opacity 0.5s ease-in-out;
}
.ominaisuudet.hide {
  height: 35vh;
  overflow: hidden;
}
.ominaisuudet.hide:before {
  opacity: 1;
}
.ominaisuudet .row {
  padding: 15px 0px;
  border-bottom: 1px solid rgba(52, 58, 64, 0.2);
  cursor: pointer;
}
.ominaisuudet .row.head {
  font-weight: 500;
  background: #93c94a;
  color: #fff;
}
.ominaisuudet .row.head span {
  font-size: 14px;
  font-weight: normal;
}
.ominaisuudet .row .col-1 {
  text-align: center;
  font-size: 14px;
  padding: 0px !important;
}
.ominaisuudet .row .col-1 strong {
  display: block;
}
.ominaisuudet .row .col-9 {
  font-weight: bold;
  font-size: 16px !important;
}
.ominaisuudet .row .col-9 .info-hidden,
.ominaisuudet .row .col-9 .info-visible {
  font-weight: normal;
  padding-left: 0px;
}
.ominaisuudet .row:hover:not(.head) {
  background: #f7f7f7;
}
.ominaisuudet .row .info-hidden,
.ominaisuudet .row .info-visible {
  display: block;
}
.ominaisuudet .row .info-button,
.ominaisuudet .row .text.blue {
  color: #33c3f0;
  font-size: 20px;
  margin-right: 20px;
}
.ominaisuudet .row .text-green {
  color: #93c94a;
}
.ominaisuudet .row .text-orange {
  color: orange;
}
.ominaisuudet .row .text-red {
  color: red;
}
.ominaisuudet .row.nayta .col-9 {
  font-weight: bold;
}
.ominaisuudet .row.nayta .info-visible,
.ominaisuudet .row.nayta .info-hidden {
  display: block;
}

@media (max-width: 768px) {
  .ominaisuudet .row .col-9 {
    width: 69% !important;
    font-size: 14px !important;
  }
  .ominaisuudet .row .col-1 {
    width: 10% !important;
    font-size: 12px !important;
  }
}