body{
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding:0;
  margin:0;
  overflow-x: hidden;
  background-color: #f4f4f4;
}
/* Global */
.container{
  width: 90%;
  margin: auto;
  overflow: hidden;
}

ul{
  margin: 0;
  padding: 0;
}

.dark{
  padding: 15px;
  background: #35424a;
  color: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn_1{
  color: #000000;
  background: #e8491d;
  margin-top: 10px;
  border: 0;
  padding: 0px 5px 0spx 5px;
}

/* Header */
header{
  background-color: #35424a;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;

}
header a{
  color:#ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li{
  float left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding{
  float: left;
}

header #branding h1{
  margin: 0;
}

header nav{
  float: right;
  margin-top: 10px;
}

header .highlight, header .current a{
  color: #e8481d;
  font-weight:bold;
}

header a:hover{
  color: #cccccc;
  font-weight: bold;
}

#animate1 {  
  position: absolute; 
  width: 300px;
  height: 200px;
  background:url('../img/D2A.JPG');
  background-size: cover;
}


#animate2 {  
  position: absolute; 
  width: 300px;
  height: 200px;
  background:url('../img/D8.JPG');
  background-size: cover;
}

#animate3 {  
  position: absolute; 
  width: 300px;
  height: 200px;
  background:url('../img/C1A.JPG');
  background-size: cover;
}

#animate4 {  
  position: absolute; 
  width: 300px;
  height: 200px;
  background:url('../img/D6.JPG');
  background-size: cover;
}

#animate5 {  
  position: absolute; 
  width: 300px;
  height: 200px;
  background:url('../img/D12.JPG');
  background-size: cover;
}

#animate6 {  
  position: absolute; 
  width: 300px;
  height: 200px;
  background:url('../img/D11.JPG');
  background-size: cover;
}

#animate7 {  
  position: absolute; 
  width: 300px;
  height: 200px;
  background:url('../img/D5.JPG');
  background-size: cover;
}





/* Showcase */
#showcase{
  min-height: 350px;
  background:url('../img/showcase.png') no-repeat 0 -250px;
  text-align: center;
  color: #ffffff;
  border-bottom: #e8491d 3px solid;
}
#showcase h1{
  margin-top: 100px;
  font-size: 55px;
  margin-bottom:10px;
}
#showcase p{
  font-size: 25px;
}

/* Boxes */

.boxes{
  margin-top: 25px;
  min-height: 250px;
}

.kuvat{
  margin-top: 5px;
  min-height: 5px;
  
}
.markinaali{
  margin-top: 20px;
  
  
}

.markinaali1{
  margin-top: 20px;
  text-align: center;
  
}








.boxes a{
  text-decoration: none;
  color: #000000;
}
 .box{

  float: left;
  text-align: center;
  width 30 %;
  padding: 5px;
  min-width: 30%;
}

/* Sidebar */
aside#sidebar{
  float: right;
  width: 30%;
  margin-top: 10px;
  text-align: center;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 .kuva{

  float: left;
  text-align: center;
 
  padding: 1px;
  min-width: 30%;
}
article.main-col2{
  float: left;
  width: 100%;
min-height: 450px;
}



/* Main-col */

article.main-col{
  float: left;
  width: 100%;

}

/* Footer */
footer{
  padding: 20px;
  margin-top: 20px;
  color: #ffffff;
  background-color: #e8491d;
  text-align: center;


}
 img {
            cursor: pointer;
        transition: -webkit-transform 0.1s ease
        }
    img:focus {
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
    }