/*Lahti Aqua vuosikertomus stylesheet*/
:root {
  --purple:#8A1B61;
  --turqouise:#40C1AC;
  --gray:#1E252A;
}

.gray-text {
  color:var(--gray);
}

.purple-text {
  color:var(--purple);
}

.turqouise-text {
  color:var(--turqouise);
}

a {
  color:var(--turqouise);
}

a:hover {
  color:var(--turqouise);
}

.dropdown-menu {
  border-radius: 0px;
}

.extra {
  color:var(--turqouise) !important;
  font-family: din-2014, sans-serif !important;
  font-weight: 700;
  font-style: normal;
}

.active a, a:active {
  color:var(--turqouise);
}

.purple {
  background-color:var(--purple);
}

.turqouise {
  background-color:var(--turqouise);
}

.gray {
  background-color:var(--gray);
}

.white {
  background-color:#fff;
}

video {
  background-color: lime;
}

video[poster] {
  object-fit: cover;
}

.drop {
  background-image:url('../images/drop.svg');
  background-size:50px 73px;
  background-repeat:no-repeat;
  background-position: 80% 80%;
}

.drops {
  background-image:url('../images/drops.svg');
  background-size:62px 141px;
  background-repeat:no-repeat;
  background-position: 85% 85%;
}

.line {
  height:9px;
  width:calc(100% - 90px);
  display:inline-block;
  position:relative;
  bottom:55px;
  margin:0px 45px;
}

.bio {
  background-image:url('../images/biokaasu.svg');
  background-size:109px 95px;
  background-repeat:no-repeat;
  background-position: 90% 5%;
}

h1 {
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
}

hr {
  border-top:1px solid #C6C8C6;
  margin-top:48px;
  margin-bottom:6px;
}

b {
  font-weight: 900;
}

.topline {
  height:9px;
  width:100%;
  display:block;
  position:absolute;
}

#header {
  padding-top:43px;
  padding-bottom:35px;
  position:relative;
  z-index:99;
}

.site-logo {
  background:yellow;
  width:182px;
}

.navbar {
  padding:0px;
  background-color:#fff;
}

.navbar-brand {
  padding-top:0px;
  padding-bottom:0px;
  margin:0px 15px;
}

.navbar-toggler {
  padding:0px;
  font-size: 22px;
  line-height: 22px;
  background-color: transparent;
  border:0px;
  border-radius:0px;
  margin:0px 15px;
}

.navbar-toggler-icon {
  background-image:url('../images/toggler-icon.svg');
  width:32px;
  height:32px;
}

.nav-item {
  height:22px;
}

.nav-link {
  padding:0px;
  display:inline-block;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
}

.nav-link {
  color:var(--gray);
}

.texture {
  min-height:520px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.heroimage {
  min-height:520px;
  background-size: cover;
  background-position: center center;
  display:flex;
  align-items: center;
}

h1 {
  display:inline-block;
  color:#fff;
}

h2 {
  font-size:35px;
  line-height: 42px;
  color:#8A1B61;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
  margin-top:42px;
  margin-bottom:46px;
}

.fiilis h2 {
  color:var(--turqouise);
  font-size:45px;
  line-height:54px;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: italic;
  margin-top:91px;
  margin-bottom:42px;
}

.fiilis h3 {
  color:var(--gray);
  font-size:20px;
  line-height:24px;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom:40px;
}

.fiiliskuva img {
  object-fit: cover;
  width:100%;
}

.fiilistext p {
  color:#fff;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
}

.fiiliselements {
  margin-bottom:80px;
}

blockquote {
  font-size:22px;
  line-height: 31px;
  color:#fff;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: italic;
}

h3 {
  font-family: din-2014, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size:16px;
  line-height:16px;
  margin-bottom:13px;
  margin-top:65px;
}

p {
  font-family: din-2014, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size:14px;
  line-height:19px;
  margin-bottom:19px;
}

.columns-3 ul {
  margin-left:17px;
}

.columns-3 li {
  font-family: din-2014, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size:14px;
  line-height:19px;
  list-style: initial;
}

.summary {
  color:#8A1B61;
  font-weight: 700;
}

.columns-2 {
  column-gap: 25px;
  margin-bottom:48px;
  height:100%;
  column-width: 100%;
  height:100%;
}

.columns-3 {
  column-gap: 25px;
  margin-bottom:48px;
  height:100%;
  column-width: 100%;
  height:100%;
}

.infobox {
  color:#fff;
  padding:45px;
  height:100%;
  position:relative;
  min-height:250px;
}

.infobox-image {
  min-height:380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
}

.infobox-text {
  display:block;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: italic;
  font-size:20px;
}

.infobox-number {
  display:block;
  font-family: din-2014, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin:0px;
}

.column-3-image {
  width:100%;
  min-height:790px;
  background-size: cover;
  background-position: top center;
}

.image-overlay-quote {
  position:absolute;
  bottom:60px;
  right:30px;
}
.opener {
  height:62px;
  width:100%;
  display:block;
  cursor:pointer;
}

.opener span {
  color:#fff;
  font-size:27px;
  line-height:62px;
  display:block;
  font-family: din-2014, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform:uppercase;
  text-align: center;
}

.collapse-link:hover {
  text-decoration: none !important;
}

.boxed {
  background: rgb(30,37,42);
  background: linear-gradient(180deg, rgba(30,37,42,1) 0%, rgba(60,60,60,1) 100%);
  border:0px;
  border-radius:0px;
}

.collapse p {
  color:#fff;
  font-size:17px;
  line-height:20px;
  padding:17px;
  text-align:center;
}

.collapse-bar {
  height:58px;
  position:relative;
}

.collapse-bar span {
  color:#fff;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
  margin-left:27px;
  float:left;
}

.toggle-icon {
  height:17px;
  width:33px;
  display:block;
  position:absolute;
  right:27px;
  top:20px;
  background-image:url('../images/arrow.svg');
  background-repeat:no-repeat;
}

a[aria-expanded="false"] .collapse-bar .toggle-icon, a[aria-expanded="false"] .opener .toggle-icon {
  transform: rotate(-90deg);
  -webkit-transition: -webkit-transform .3s ease-in-out;
  -ms-transition: -ms-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
}

a[aria-expanded="true"] .collapse-bar .toggle-icon, a[aria-expanded="true"] .opener .toggle-icon {
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform .3s ease-in-out;
  -ms-transition: -ms-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
}

table {
  margin-top:36px;
  font-family: din-2014, sans-serif;
}

.tavoitteet th {
  color:#fff;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
}

.tavoitteet td, .tavoitteet th {
  height:70px;
  display:table-cell;
  vertical-align:middle;
  text-align:left;
}

.tavoitteet td:nth-child(1), .tavoitteet th:nth-child(1) {
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}

.tavoitteet td:nth-child(2), .tavoitteet th:nth-child(2) {
  border-bottom:1px solid #fff;
}

.tavoitteet tr:nth-child(even) {background: #EFEFEF}
.tavoitteet tr:nth-child(odd) {background: #F9F9F9}

.tunnusluvut {
  width:100%;
}

.tunnusluvut th {
  color:#fff;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
  text-align: center;
}

.tunnusluvut td, .tunnusluvut th {
  height:70px;
  display:table-cell;
  vertical-align:middle;
  text-align:center
}

.tunnusluvut td:not(:last-child), .tunnusluvut th:not(:last-child) {
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}

.tunnusluvut td:last-child, .tunnusluvut th:last-child{
  border-bottom:1px solid #fff;
}

.tunnusluvut tr:nth-child(even) {background: #EFEFEF}
.tunnusluvut tr:nth-child(odd) {background: #F9F9F9}

.sidosryhmataulukko tr td {
  vertical-align: middle;
  text-align: center;
}

#footer-elements {
  margin-bottom:-4px;
  position:relative;
  z-index:0;
}

#footer {
  position:relative;
  z-index:1;
  height:94px;
  background-color: var(--turqouise);
}

.footer-stripes {
  position:absolute;
  width:100%;
  height:94px;
  background-image: url('../images/footer-stripes.svg');
  background-repeat:no-repeat;
  background-position: bottom right;
  background-size:40% auto;
  top:0px;
}

#footer span {
  font-size: 19px;
  font-family: din-2014, sans-serif;
  font-weight: 300;
  font-style: normal;
  color:#fff;
  text-align: center;
  display:block;
}

@media (min-width: 320px) {
  h1 {
    font-size:20px;
  }

  .nav-link {
    font-size:15px;
    line-height:20px;
  }

  .nav-item {
    height:30px;
    margin-left:15px;
  }

  #mobiilimenu {
    margin-top:30px;
  }

  .infobox-number {
    font-size:100px;
    line-height:120px;
  }

  .image-overlay-quote {
    width:80%;
  }

  .collapse-bar span {
    font-size:14px;
    line-height:58px;
  }

  .sidosryhmataulukko tr td {
    height:150px;
    width:150px;
    font-size:12px;
  }

  .tunnusluvut td, .tunnusluvut th, .tavoitteet td, .tavoitteet th {
    padding:10px 15px;
  }

  .tunnusluvut tr td, .tavoitteet tr td {
    font-size:12px;
  }
  .fiiliselements {
    margin-top:-20px;
  }
}

@media (min-width: 576px) {
  .image-overlay-quote {
    width:50%;
  }
  .fiilistext {
    padding:20px 20px 20px 20px;
  }
}

@media (min-width: 768px) {
  h1 {
    font-size:45px;
  }

  .columns-3, .columns-2 {
    column-count: 1;
  }

  .nav-item {
    height:30px;
    margin-left:15px;
  }

  #mobiilimenu {
    margin-top:30px;
  }

  .tunnusluvut td, .tunnusluvut th, .tavoitteet td, .tavoitteet th {
    padding:18px 34px;
  }

  .fiiliselements {
    margin-top:-40px;
  }
}

@media (min-width: 992px) {
  h1 {
    font-size:60px;
  }

  .nav-item {
    height:22px;
    margin-left:0px;
  }

  .nav-link {
    font-size:12px;
    line-height:12px;
    margin:0px 5px;
    padding-left:0px !important;
    padding-right:0px !important;
  }
  .columns-3, .columns-2 {
    column-count: 2;
  }
  .image-overlay-quote {
    width:40%;
  }

  .fiilistext p {
    font-size:18px;
  }

  .fiilistext {
    padding:45px 45px 45px 45px;
  }

  .infobox-number {
    font-size:100px;
    line-height:120px;
  }
}

@media (min-width: 1200px) {
  .image-overlay-quote {
    width:25%;
  }

  .nav-link {
    font-size:14px;
    line-height:14px;
    margin:0px 5px;
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .fiilistext {
    padding:45px 45px 45px 45px;
  }

  .fiilistext p {
    font-size:20px;
    line-height:24px;
  }

  .collapse-bar span {
    font-size:35px;
    line-height:58px;
  }

  .sidosryhmataulukko tr td {
    height:250px;
    width:250px;
    font-size:14px;
  }
  .infobox-number {
    font-size:70px;
    line-height:90px;
  }
}

@media (min-width: 1550px) {
  .columns-3 {
    column-count: 3;
  }

  .columns-2 {
    column-count: 2;
  }

  .fiilistext {
    padding:45px 144px 45px 144px;
  }

  .infobox-number {
    font-size:120px;
    line-height:140px;
  }
}

#bt-button {
  display: inline-block;
  background-color:var(--turqouise);
  width: 50px;
  height: 50px;
  text-align: center;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  border:1px solid #fff;
  background-image:url('../images/arrow.svg');
  background-repeat:no-repeat;
  background-size:20px 30px;
  background-position: center center;
  transform:rotate(180deg);
}

#bt-button:hover {
  cursor: pointer;
  background-color:var(--gray);
}
#bt-button:active {
  background-color:var(--gray);
}
#bt-button.show {
  opacity: 1;
  visibility: visible;
}
