.div {	border:1px red solid; 	}


body {	background-color:rgb(255,255,255);  margin: 0; color: rgb(0,0,0);  word-spacing: 0.1em;  letter-spacing: 0.07em;  
font-family: "Liberation Sans", "DejaVu Sans", "Bitstream Vera Sans", Arial, Helvetica;   }
td { 		padding: 0;  vertical-align: top;  }
table { 	border-collapse: collapse;  empty-cells: show;}
img {		border: 0; display: block; }
* 	{	box-sizing:border-box; 	}

.oranssi { 	background-color:hsl(30,92%,50%);	color: rgb(255,144,10); }
.logonruskea  {	background-color: hsl(20,85%,29%);	color:rgb(136, 52,11);   }
.ehdotettuoranssi { background-color:hsl(33, 100%,52%);	color: rgb(255,144,10); }
.muokatturuskea {	background-color: hsl(24,90%,37%); }
 


.tekstialue {	background-color:hsl(111, 88%, 88%);  width:100%;  }


.sivualue {	width:100%;  display:table; 	}

h1 {		font-size: 244%;  font-weight:bold;  padding: 1em 19%;  margin: 0; text-align:center; color: rgb(136,52,11);	
word-spacing:0.2em;  letter-spacing:0.1em;    }
.ingressiteksti {	padding:11px 19%;   margin: 0;  font-size: 144%;  text-align:center;   line-height:166%;   }
h2 {		font-size: 144%;  padding: 0.7em 1em;  color:rgb(0,0,0);   margin: 0;     }
h3 {		padding: 17px 0% 17px 0; 	margin: 0;  font-size: 122%;     }
p {		padding: 11px 0%; 	margin: 0;  font-size: 111%;   line-height:155%;   }
.pampula {	margin: 0px 5% 17px 6%; padding: 0px 0px 0px 9%;  font-size: 100%;  background-image: url(kuvat/nnpmusta.png);  background-size:8px;  background-position: 0 0.5em;  background-repeat: no-repeat;    }
.referenssiei {	margin: 0px 5% 11px 3%; padding: 0px 0px 0px 4%;  line-height:155%; 
		font-size: 100%;  background-image: url(kuvat/nnpmusta.png);  background-size:9px;  background-position: 0 0.5em;  background-repeat: no-repeat;  }
.varjostettu {	font-size:222%; text-shadow: 2px 2px rgb(255,255,255);	}



/*    navigointi       */

.navilohko {	width:50em;  display:table;  position:fixed;  top:11px;  right:1%;  z-index:111;     }
ul {		list-style-type:none;  margin:0;  padding:0;  position: absolute;  right:0;   }
li {		margin-left:22px;  display:inline-block;  float:left;  font-size:1.1em;  font-weight:bold; 	}
li a {		background-color:hsl(30,92%,50%);  color:rgb(255,255,255);  border-radius:9px;  
		border:1px rgb(255,255,255) solid;  padding: 0.5em 2em;  font-size:100%;  letter-spacing: 0.1em;  
		text-decoration:none;  display:block;   }
li:hover a {	background:hsl(20,85%,29%); color:rgb(255,255,255);  }
li ul {		display:none;  }
li ul li {	display:block;  float:none;  }
ul li a:hover + .hidden, .hidden:hover {	display:block; }
.show-menu {				display:none;   }
input[type=checkbox]{			display:none;  -webkit-appearance: none; }
input[type=checkbox]:checked ~ #menu{	display:block;  }


.navinelio { 	padding: 0 0.41em 0.25em 0.44em;  position:fixed;    bottom:5px;  right:1%; border:1px white solid;  border-radius:9px; font-size:222%; display: block;  text-decoration: none;    }
.navinelio:link { 	color:rgb(255,255,255);  background-color:hsl(30,92%,50%);    }
.navinelio:visited { 	color:rgb(255,255,255);  background-color:hsl(30,92%,50%);   }
.navinelio:hover { 	color:rgb(255,255,255);  background:hsl(20,85%,29%);    }





/*    logo            */

.logolohko { 	background-color:hsla(0,0%,100%, 0.5);  padding: 33px 77px;  margin: 66px 0 0px 0;  border-radius: 25px;  display: table;  float:left;      }
.logokuva { 	width: 444px;   	  }
.logoteksti {	padding: 11px 0 0 0;  font-size: 144%;  color:rgb(136,52,11);   word-spacing: 0.1em;  letter-spacing: 0.09em;      }


/*    alueet            */

.aluevakio {	background-color:rgb(255,255,255);  padding:77px 11%;  width:100%;  display:table;    }
.alueimage {	background-image:url(kuvat/imagekuva.jpg);  background-position: 80% 0;  background-size:cover;  width:100%;  height:777px;  display:table;    }
.alueingressi {	background-color:rgba(255,145,9, 0.05);  padding:55px 0;  width:100%;  display:table;    }

.otsikkorivi {	background:linear-gradient( hsl(24,90%,37%) , hsl(30,92%,50%) );  width:100%;    } 	


.otsikkorivi1 {	   } 	
.otsikkorivi2 {	  } 	  
.otsikkorivi3 {	  } 	
.riviotsikko {	font-size: 222%; text-align:center; color:rgb(255,255,255);   margin: 0;     }



.slogan1 {	 width:100%;  padding:13px 7% 11px 7%;  text-align: center;  background:linear-gradient( hsl(24,90%,37%) , hsl(30,92%,50%) );  display:table;    }
.sloganteksti1 {	color:rgb(255,255,255); font-size: 122%;  text-align:center;    }

.slogan2 {	 width:80%;  margin:1em 10% 1em 10%; padding:0;  text-align: center;  
color:rgb(0,0,0); font-size: 122%;  }


/*    Boxit   */

.boxialue2 {	display: flex; justify-content:space-between;  	}
.boxi2 {		width:45%;   margin:33px 0;  padding:2em 5%;  background-color:rgba(255,145,9, 0.5);   	   }
.boxi21 {		background: linear-gradient( 110deg, rgb(255,145,9) 55px, rgba(255,145,9, 0.05) 55px , rgba(255,145,9, 0.05) 30%);   	   }
.boxi22 {		background: linear-gradient( 110deg, rgb(255,145,9) 55px, rgba(255,145,9, 0.05) 55px , rgba(255,145,9, 0.05) 30%);   	   }
.variteksti {	text-align:center;  margin: 22px 3% 0px 3%; padding: 0px 0px 0px 0;  font-size: 100%;  font-weight:bold;  color: rgb(255,145,9);  line-height:155%;   }
.pampulaiso {	margin: 33px 0 22px 0; padding: 0px 0px 0px 9%;  font-style:italic; font-size: 144%;  color: rgb(255,145,9);   line-height:155%;
			background-image: url(kuvat/pallooranssi.png);  background-size: 16px; background-position: 0 0.4em;  background-repeat: no-repeat;    }

.boxi21 .pampula {	margin: 0 0 23px 0; }
.boxi21 .pampula {	margin: 0 0 23px 0; }
.boxi22 p {			margin: 0 0 7px 0;  padding:0; font-size: 100%; 	 }
.boxi22 .pampula {	margin: 0 0 7px 0;  font-size: 100%; }


.boxialue3 {	display: flex; justify-content:space-between;	}
.boxi3 {		width:30%;  margin-bottom:33px; 	}
.boxiteksti3 {	width:100%;  text-align:center; font-size:99%;  padding: 0.5em;   	}

	
/*    Yksityiskohdat   */

.kuvapilari {	margin: 0px 0 22px 7%;  width:30%;  float:right;  }
.pilarikuva {	width:100%;  margin-bottom:33px; 	}

.yhteysalue1 {	padding-top:88px;  padding-bottom:66px;   background-color: rgb(222,222,222);     }
.yhteysalue2 {	padding-top:0;  background-color: rgb(222,222,222);     }

.yhteyskuva {	width:222px;  margin: 0 5% 33px 0;   float:left;  	}
.yhteysele {	width:48%;  margin:0 0 0 4%; display:table;  float:left;     }
.yhteysotsikko {	padding-top:11px; font-size:155%;    }
.yhteystieto {	padding:7px 0;    font-size:111%;  }
.karttaele {	margin: 18px 0 44px 0;  width:48%;  height:222px;  background-image: url(kuvat/karttakuva.png); background-size:cover; 	 float:left;    }






@media screen and (max-width: 1500px) 	{	/*	------------------------------------------------------------------------------------------------------------------------	*/

.aluevakio {	padding-left:7%;  padding-right:7%;    }
.boxi2 {		width:48%;	   }


						 	}	/*	----------    */




@media screen and (max-width : 1100px)	{	/*	------------------------------------------------------------------------------------------------------------------------	*/


.navilohko {	width:333px;  margin: 0px;  float:none; position:absolute;    }
ul {			position:static;  display:none; }
li {			margin-left:0;  margin-right:0px;	float:right;}
li a {		padding: 2em 1em;  height:auto;  border-width: 0 0 1px 0;  border-color: rgb(155,155,155);  border-style:solid;   }
li:hover ul a {	height:auto;  	}

.show-menu {	text-decoration:none;  background-color:hsl(30,92%,50%); color:rgb(255,255,255); font-size:222%;   padding: 0.1em 0.2em 0.1em 0.28em;  
		border-radius:9px;  border:1px rgb(255,255,255) solid;  display:block;  float:right;    }
.show-menu:hover {	background-color:hsl(20,85%,29%);   }
ul li, li a {  	width:100%;  text-align:center;  }

.riviotsikko {	text-align:center;  }

.boxialue2 {	flex-direction:column;	}
.boxi2 {		width:100%;   margin:33px 0; padding-left:11%;      	   }
.boxialue3 {	flex-direction:column;	}
.boxi3 {		width:100%; 		}

.yhteysele {	width:56%;   }
.karttaele {	width:40%;    }


						 	}	/*	----------    */





@media screen and (max-width : 800px)	{	/*	------------------------------------------------------------------------------------------------------------------------	*/

/*    logo            */

.logolohko { 	padding: 22px 44px;  margin: 5em auto 0 auto;  float:none;      }
.logokuva { 	width: 100%;   	  }


.aluevakio {	padding:33px 2%;  }
.ingressiele {	padding:44px 22px;     }
.ingressiteksti {	padding: 11px 3%;    }

h1 {	font-size: 166%;     }
h2 {	padding: 0.7em 1em 5% 0.7em;     }


.kuvapilari {	margin: 0px 0 0px 0;  width:100%;  max-width:100%; float:none;  }
.boxi2 {		padding:1em 4% 1em 11%;    	   }
.pampula {		margin: 22px 2% 22px 6%; padding: 0px 0px 0px 9%;   }
.referenssi {	margin: 0px 3% 11px 5%; padding: 0px 0px 0px 5%;    }

.yhteysele {	width:100%;  padding-left:10%;  margin:0 0 0 0;   float:none;     }
.karttaele {	margin: 44px 0 44px 0;  width:100%;  float:none;    }


						 	}	/*	----------    */



/*	kestotietoa            */

.alue00 {		padding-top:0;  padding-bottom:0;     }
.alue10 {		padding-bottom:0;     }
.alue01 {		padding-top:0;     }

.levee100 {		width:100%;  }
.ulkoreunavasen {	padding-left: 6%;    }
.ulkoreunaoikea {	padding-right: 6%;   }

.erotin {		width: 100%;  height: 1px;  display: block;  }
.eimarginaalia {	margin-right: 0;   }

.vasemmalle {	text-align: left; }
.keskelle {		text-align: center; }
.oikealle {		text-align: left; }
.kuvakeskelle {	margin-left: auto;  margin-right: auto; }

.vahvennettu {	font-weight: bold;  }
.yhdessa {		white-space: nowrap;   }

.punainen { 	color: rgb(200,0,0);  } 

.rako6000 {	margin-top: 60px; }
.rako5000 {	margin-top: 50px; }
.rako4000 {	margin-top: 40px; }
.rako3000 {	margin-top: 30px; }
.rako2000 {	margin-top: 20px; }
.rako1000 {	margin-top: 10px; }

.rako000200  {	margin-bottom: 200px; }
.rako0040 {		margin-bottom: 40px; }
.rako0030 {		margin-bottom: 30px; }
.rako0020 {		margin-bottom: 20px; }

.rako4040 {	margin-top: 40px;  margin-bottom: 40px; }
.rako3030 {	margin-top: 30px;  margin-bottom: 30px; }
.rako2020 {	margin-top: 20px;  margin-bottom: 20px; }

.sisus6000 {	padding-top: 60px; }
.sisus5000 {	padding-top: 50px; }
.sisus4000 {	padding-top: 40px; }
.sisus3000 {	padding-top: 30px; }
.sisus2000 {	padding-top: 20px; }

.sisus0040 {	padding-bottom: 40px; }
.sisus0030 {	padding-bottom: 30px; }
.sisus0020 {	padding-bottom: 20px; }

.sisus6060 {	padding-top: 60px;  padding-bottom: 60px; }
.sisus5050 {	padding-top: 50px;  padding-bottom: 50px; }
.sisus4040 {	padding-top: 40px;  padding-bottom: 40px; }
.sisus3030 {	padding-top: 30px;  padding-bottom: 30px; }
.sisus2020 {	padding-top: 20px;  padding-bottom: 20px; }

.sisus6040 {	padding-top: 60px;  padding-bottom: 40px; }
.sisus5030 {	padding-top: 50px;  padding-bottom: 30px; }
.sisus4020 {	padding-top: 40px;  padding-bottom: 20px; }
.sisus3010 {	padding-top: 30px;  padding-bottom: 10px; }

.sisus2060 {	padding-top: 20px;  padding-bottom: 60px; }
.sisus2050 {	padding-top: 20px;  padding-bottom: 50px; }
.sisus2040 {	padding-top: 20px;  padding-bottom: 40px; }
.sisus2030 {	padding-top: 20px;  padding-bottom: 30px; }

.sisus6000 {	padding-top: 60px;  }
.sisus5000 {	padding-top: 50px;  }
.sisus4000 {	padding-top: 40px;  }
.sisus3000 {	padding-top: 30px;  }

.marginaali8000 { margin-left: 80px;    }
.marginaali4000 { margin-left: 40px;    }
.marginaali3000 { margin-left: 30px;    }
.marginaali2000 { margin-left: 20px;    }

.sisennys8000 { padding-left: 80px;   }
.sisennys4000 { padding-left: 40px;   }
.sisennys3000 { padding-left: 30px;    }
.sisennys2000 { padding-left: 20px;    }

.nega3000 {	margin-top: -30px; }
.nega2000 {	margin-top: -20px; }
.nega1000 {	margin-top: -10px; }
.nega0500 {	margin-top: -5px; }