.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-image:url('../images/sosiaalinen-vastuu-header.jpg');
  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;
}

.bottom {
  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;
}

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

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

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


#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;
}

@media (min-width: 320px){
  h1 {
    text-align: left;
    font-size:15px !important;
  }
}

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

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

@media (min-width: 768px) {

}

@media (min-width: 992px) {
  .right {
    background-position:-120px center;
  }

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

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

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

@media (min-width: 1200px) {
  .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;
    }
}