* { box-sizing:border-box; }

body {
  display:flex;
  margin:auto;
  font:13px/28px 'Noto Sans HK';
  color:#000;
  background: #15282c;
  background-size:100%;
  background-repeat:no-repeat; 
  text-align: justify;
}

#wrapper {
  width:1100px;
  margin:auto; }

#header {
  width:99%;
  margin:100px auto 10px auto;
  font:52px 'Contrail One';
  color:#fff;
  letter-spacing:2px;
  text-shadow:1px 1px 0px #000; }

#navi {
  width:100%;
  padding:0px;
  margin-top:120px;
  font:14px 'Noto Sans HK';
  letter-spacing:4px; }

#navi ul {
  width:100%;
  text-align:center;
  margin:0;
  padding:0; }

#navi li {
  display:inline-block;
  width:20%;
  background:rgba(255,255,255,0.1);
  color:#fff;
  text-align:center;
  padding:5px 0px;
  margin:10px -3px;
  text-transform:uppercase;
  text-shadow:1px 1px #000;
  transition:0.6s all ease; }

#navi li:hover {
  background:rgba(255,255,255,0.4);
  transition:0.3s all ease; }

#navi li a {
  color:#fff;
  text-decoration:none; }

#content {
  margin:0 auto;
  background:#fff;
  width:99%;
  padding:60px 80px; }

h1 {
  margin-left:40px;
  font:30px 'Contrail One';
  letter-spacing:1px; }
  
  h2 {
  margin-left:50px;
  font:22px 'Contrail One';
  letter-spacing:1px; }

h3 {
 margin-left:60px;
  font:15px 'Contrail One';
  letter-spacing:1px; }
  

h4 {
  margin-left:150px;
  font:24px 'Contrail One';
  letter-spacing:1px; }
  
h5 {
  margin-left:165px;
  margin-top:-20px;
  margin-bottom:40px;
  font:12px 'Lato';
  text-transform:uppercase;
  opacity:0.6; }

#content a {
  color:#38657a;
  text-decoration:none; }

#content a:hover {
  color:#ddd;
  text-decoration:underline; }

b {
  color:#38657a; }

.hinfo {
  text-align:center;
  font:200 14px/28px 'Contrail One';
  margin:20px auto; }
  
 .hinfo table {width:100%;margin:-10px auto 20px auto;border-bottom:1px solid #efefef;border-top:1px solid #efefef;background:#fdfdfd;padding:10px 0;}
 
 .hinfo td {vertical-align:top;width:50%;}

.himgs {
  margin:40px auto;
  text-align:center;
  font:10px 'Lato';
  color:#aaa;
  letter-spacing:1px; }

.himgs img {
  height:160px;
  padding:5px;
  background:#f6f6f6;
  border:1px solid #38657a; }

#galleria img {
      height:160px;
  padding:5px;
  background:#f6f6f6;
  border:1px solid #38657a; }

.sukutaulu, .jalk, .kisat, .kas {
  width:100%;
  margin:20px auto;
  border-collapse:collapse;
  border-spacing:0; }

.sukutaulu td {
  width:33%;
  font:400 12px 'Lato'; 
  padding:10px 22px;
  background:#fff;
  border:1px solid #efefef;
  transition:0.6s all ease; 
  font:600 13px 'Lato';
  text-transform:uppercase;
  line-height: 1.8em;
}

.sukutaulu td:hover {
  background:#f1f1f1;
  transition:0.6s all ease; }

.sukutaulu strong {
  font:600 13px 'Lato';
  text-transform:uppercase; }

.sukutaulu .evm {
  text-transform:uppercase;
  opacity:0.3;
  font-weight:800;
  letter-spacing:2px;
  float:right; }

.sukutaulu small {
  color:#aaa;
  font:200 11px 'Lato'; }

.jalk td {
  font:400 12px 'Lato'; 
  padding:10px 22px;
  border:1px solid #efefef; }

.jalk tr {
  background:#fff;
  transition:0.6s all ease; }

.jalk tr:hover {
  background:#f1f1f1;
  transition:0.6s all ease; }

.kisat td {
  vertical-align:top;
  background:#fff;
  padding:10px 22px;
  border:1px solid #efefef; }
  
.otsikko {
  font:600 12px 'Lato';
  text-transform:uppercase;
  letter-spacing:2px; }

.oikeekuva {float: right; margin:0  0px 10px 10px;
}

.lista {
margin: 0 0 0 0px;
width: 100%;
padding: 0;
text-align: left;
line-height: 1.7em;

}

.lista li {
display: inline-block;
list-style:none;
width: 25%;
padding-left:0;
margin-bottom: 20px;
text-align: center;

}

.lista img {	
 padding:5px;
  background:#f6f6f6;
  border:1px solid #38657a;
  height: 140px;
  max-width:210px;
  margin-bottom: 10px;
	}

.lista a {font:600 12px 'Lato';
  text-transform:uppercase;
  letter-spacing:2px;}
  
  
  
  @media screen and (max-width: 1000px) {
    
    body { font-size:18pt;}
    
  #wrapper {
  width:100%;
  margin:auto; line-height: 2em;}
  
  .lista li {
      width: 100%;
      
  }

h2 { font-size: 24pt; }
h4 {font-size: 20pt;}

.lista img {	
width: 90%;
max-height: 1000px;
}

#header {
  margin-top:40px;
  margin-bottom: 30px;
  text-align: center;
  font:100px 'Contrail One';
 }

#navi {
    margin-top:0px;
      font:25pt 'Noto Sans HK';

}

#navi li {
  width:30%;
}

h2 {
  font:40pt 'Contrail One';
  }

h3 {
  font:24pt 'Lato';
  margin-top: -35px;
  }


h4 {
  font:32pt 'Contrail One';
  }
  
.hinfo {
  font:200 20pt 'Contrail One';
  line-height: 2em;}

.himgs img {
width: 90%;
max-height: 2000px;}

.sukutaulu td {
  font:400 18pt 'Lato'; 
}

.himgs {
  font:16pt 'Lato';
  
}

}