a:visited, a:active, a:link {color: #2d6d99;}
a:hover {color: #aaa}

a {text-decoration: none;}

.linkki{
    font-size: 1.5em;
    margin-right: 30px;
}
.linkki2{
    font-size: 1.5em;
    margin-right: 30px;
}
body {
	margin:0 auto;
	padding:0;
    width:100%;
    
    background-color: white;
    font-family: 'Baloo Bhaina 2', cursive;
}
    
.header {
  margin: 0 auto;
  padding: 0;
    width: 100%;
    height: 110px;
    background-color: black;
}

.header2 {
    margin: 0 auto;
    padding: 0;
      width: 50%;
      min-width: 700px;
}

.otsikko {
  margin: 30px;
    width: 248px;
    float: right;
}

.linkit {
    margin-top: 40px;
    
    float: left;
    text-align: justify;
}
.responsive {
    width: 100%;
    height: auto;
    border-bottom: solid 0px rgb(214, 214, 214);
  }

.tekstiosio{
    margin: auto;
    padding: 10px;
    width: 60vw;
    background-color: white;
    border: solid 0px grey;
    text-align: justify;
}
.tarjous {float: right;
border: 0;}
.copyt{
    
    font-size: 0.8em;
    text-align: center;
    padding: 3px;
}

.yht{
    width: 50%;
    float: left;
}

@media screen and (max-width: 700px){

    .otsikko {
        margin: auto;
          width: 303px;
        float: none;}
          
.linkit {
    margin: 0 auto;
    padding: 3px;
}
a:visited, a:active, a:link {color: #2d6d99;}
a:hover {color: #aaa}

a {text-decoration: none;}
.header2 {
    margin: 0 auto;
    padding: 0;
      width: 50%;
      min-width: 248px;
}

.tekstiosio{
    width: 90%;
}
.linkki{
    font-size: 1em;
    margin-right: 2px;
}
.linkki2{
    font-size: 1em;
    margin-right: 0px;
}

.tarjous {float: none;}

.yht{
    width: 100%;
    float: none;
}}


.container {
    position: relative;
    width: 48%;
  }
  .container2 {
      position: relative;
      width: 48%;
      float: right;
    }
  
  .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    border: solid black 1px;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .container2:hover .image {
    opacity: 0.3;
  }
  
  .container2:hover .middle {
    opacity: 1;
  }
  
  .container:hover .image {
    opacity: 0.3;
  }
  
  .container:hover .middle {
    opacity: 1;
  }
  
  .text {
    background-color: #33497f;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
  }