.left {
  min-height:200px;
  background-image:url('../images/konserni-header.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  cursor:pointer;
  background-color: rgba(64,193,172,0);
  transition: background-color 1s;
}

.left:hover {
   background-color: rgba(64,193,172,.5);
}

.left:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
  z-index:2;
}

.left h2 {
  position:relative;
  z-index:3;
}

.right {
  min-height:200px;
  background-repeat:no-repeat;
  background-size:cover;
  cursor:pointer;
  background-color: rgba(64,193,172,0);
  transition: background-color 1s;
}

.right:hover {
   background-color: rgba(64,193,172,.5);
}

.right:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
  z-index:2;
}

.right h2 {
  position:relative;
  z-index:3;
}

.upper {
  min-height:200px;
  background-image:url('../images/ymparistovastuu-header.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  cursor:pointer;
  background-color: rgba(64,193,172,0);
  transition: background-color 1s;
}

.upper:hover {
   background-color: rgba(64,193,172,.5);
}

.upper:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
  z-index:2;
}

.upper h2 {
  position:relative;
  z-index:3;
}

.lower {
  min-height:200px;
  background-image:url('../images/taloudellinen-vastuu-header.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  cursor:pointer;
  background-color: rgba(64,193,172,0);
  transition: background-color 1s;
}

.lower:hover {
   background-color: rgba(64,193,172,.5);
}

.lower:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
  z-index:2;
}

.lower h2 {
  position:relative;
  z-index:3;
}

.bottom1 {
  min-height:200px;
  background-image:url('../images/yhteiskuntavastuu-header.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  cursor:pointer;
  background-color: rgba(64,193,172,0);
  transition: background-color 1s;
}

.bottom1:hover {
   background-color: rgba(64,193,172,.5);
}

.bottom1:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
  z-index:2;
}

.bottom1 h2 {
  position:relative;
  z-index:3;
}

.bottom2 {
  min-height:200px;
  padding-left:0px;
  padding-right:0px;

}

.bottom2 .videobackground {
  position:relative;
  width:100%;
  height:100%;

}

.bottom2 .videobackground video {
  cursor:pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: all 1s ease;
  z-index:2;
}

.bottom2 .videobackground video:hover {
  -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}

.bottom2 h2 {
  position:relative;
  z-index:3;
  top:calc(50% - 21px);
  pointer-events: none;
}


#toprow {
  height:140px;
  margin-bottom:40px;
}

/*Lahti Aqua vuosikertomus stylesheet*/
body,html {
  height: 100%;
}

:root {
  --purple:#8A1B61;
  --turqouise:#40C1AC;
  --gray:#1E252A;
}

a {
  color:var(--gray);
}

a:hover {
  color:#40C1AC;
}

.active a, a:active {
  color:#40C1AC;
}

.purple {
  background-color:var(--purple);
}

.turqouise {
  background-color:var(--turqouise);
}

h1 {
  font-family: kulturista-web,serif;
  font-weight: 300;
  font-style: normal;
  color:var(--purple);
  margin:0px;
  padding:0px;
}

#header {
  padding-top:43px;
  padding-bottom:35px;
  position:relative;
  z-index:99;
}

.site-logo {
  background:yellow;
  width:182px;
}

.nav-item {
  height:22px;
}

.nav-link {
  padding:0px;
  display:inline-block;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
  color:var(--purple);
}

h2 {
  font-size:35px;
  line-height: 42px;
  color:#fff;
  font-family: kulturista-web,serif;
  font-weight: 400;
  font-style: normal;
  text-align:center;
  display: block;
  text-shadow:0px 6px 10px #000;
}

@media (min-width: 320px){
  h1 {
    text-align: left;
    font-size:15px !important;
  }
  .right {
    background-image:url('../images/sosiaalinen-vastuu-header.jpg');
    background-position:0px 0px;
  }
  .left {
    background-position:0px center;
  }
}

@media (min-width: 510px) {
  .left {
    background-position:-420px center;
  }
}

@media (min-width: 576px) {
  .nav-link {
    font-size:15px;
    line-height:15px;
    margin:15px 15px;
  }

  .left {
    background-position:-420px center;
  }
  .right {
    background-position:0px 0px;
  }
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

  .left {
    background-position:-330px center;
  }

  .nav-link {
    font-size:12px;
    line-height:12px;
    margin:0px 15px;
  }

  h1 {
    text-align: left;
    font-size:25px !important;
  }

  .right {
    background-position:-250px 0px;
  }

}

@media (min-width: 1200px) {
  .right {
    background-image:url('../images/sosiaalinen-vastuu-front.jpg');
    background-position:0px 0px;
  }

  .nav-link {
    font-size:15px;
    line-height:15px;
    margin:0px 15px;
  }

  h1 {
    text-align: right;
    font-size:25px;
  }
}

@media (min-width: 1550px) {
    .nav-link {
      font-size:15px;
      line-height:22px;
      margin:0px 15px;
    }
    .right {
      background-image:url('../images/sosiaalinen-vastuu-front.jpg');
      background-position:0px 0px;
    }
}