* { box-sizing:border-box; }

body {
  display:flex;
  margin:auto;
  font:13px/28px 'Noto Sans HK';
  color:#000;
  background:#efefef url(blu-bg-crop.png);
  background-size:100%;
  background-repeat:no-repeat; 
  text-align: justify;
}

#wrapper {
  width:75%;
  margin:auto; }

#header {
  width:99%;
  margin:280px 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; }

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

h3 {
  margin-left:80px;
  margin-top:-20px;
  margin-bottom:40px;
  font:12px 'Lato';
  text-transform:uppercase;
  opacity:0.6; }

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:#fdaf5f;
  text-decoration:none; }

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

b {
  color:#fdaf5f; }

.hinfo {
  text-align:center;
  font:200 14px/28px 'Contrail One';
  margin:20px auto; }

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

.himgs img {
  height:200px;
  padding:5px;
  background:#f6f6f6;
  border:1px solid #fdaf5f; }

.tilat img {
  height:170px;
  padding:5px;
  background:#f6f6f6;
  border:1px solid #fdaf5f; }


.sukutaulu, .jalk, .kisat {
  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; }

.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 .info {
  color:#aaa;
  letter-spacing:2px; }

.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 {
  width:33%;
  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;
}

.oikeekuva2 {float: right; margin:0  0px 10px 20px; 
  padding:5px;
  background:#f6f6f6;
  border:1px solid #fdaf5f; 
}

.vaskuva {float: left; margin:0  10px 0px 0px;
}

.listaus {
    width: 100%;
    padding: 0;
}

.listakuva {
    width: 220px;
    padding: 0 20px 0 0;
}

.listakuva img {
    width: 100%;  
      padding:5px;
  background:#f6f6f6;
  border:1px solid #fdaf5f; }

}