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

.oranssi		{ color: rgb(255,145,0);	}
.ruskea		{ color: rgb(176,133,36);	}
.punainen		{ color: rgb(250,88,51);	}
.vihree		{ color: rgb(101,199,49);	}
.tekstialue {	background-color:hsl(111, 88%, 88%);  width:100%;  }
.spanalue {		background-color:hsl(111, 55%, 55%);   }

.perusvari {		background-color: 	rgb(33,57,115);		}
.logonvar { 		color: 			rgb(166,199,255);		}

.mustansininen {		background-color: 	rgb(0,0,156);		}
.siniharmaa {		background-color: 	rgb(57,57,185);		}
.perussininen {		background-color: 	rgb(88,88,185);		}
.harmaansininen {		background-color: 	rgb(122,122,185);		}
.harmaa {			background-color: 	rgb(166,155,185);		}
.harmaampi {		background-color: 	rgb(188,188,188);		}





/*  yleiset tekstit      */

h1 {		font-size: 222%;  padding: 0 0 33px 0; margin: 0;	text-align:center;    }
h2 {		font-size: 222%;  padding: 1em 1em 1em 10%;  color:rgb(0,0,0);   margin: 0;  background-color:rgba(255,255,255, 0.6);    }
h3 {		font-size: 155%;  padding: 30px 0 0 0; margin: 0;	 }
.johdanto {	color:rgb(255,255,255);  background-color: rgba(33,57,115 , 0.3);  text-shadow: 2px 1px 5px rgb(0,0,0);   font-size: 166%;  padding:22px 11%;  text-align: center;  margin: 0;  line-height:155%;  text-align:center;   }

p {	padding: 11px 0 11px 0;  margin: 0;  font-size: 122%;   line-height:144%;   }
.pampula {	margin: 0px 0 9px 9%; padding: 0px 0px 0px 7%;  font-size: 111%;  background-image: url(kuvat/oranssinelio-9.png);  background-position: 0 0.3em;  background-repeat: no-repeat;  }
.pkuvakapea {	margin: 0px 0 22px 30px;  width:33%;  float:right;  }
.pkuvalevea {	margin: 33px 0;  width:100%;   }






/*  vakiolinkit      */

.tekstilinkki:link {	color: rgb(49,79,149);   text-decoration: underline; }  
.tekstilinkki:visited {	color: rgb(155,155,155); text-decoration: underline; }
.tekstilinkki:hover {	color: rgb(255,145,0);   text-decoration: none; }

.navinelio { border-radius:50%;  position:fixed; bottom:4px; right:4px; border:1px white solid; height:50px; width:50px; background-image: url(kuvat/pyt.png); background-repeat: no-repeat; background-position: 50% 40%; display: block; text-decoration: none; }
.navinelio:link { 	background-color:rgb(33,57,115);  }
.navinelio:visited { 	background-color:rgb(33,57,115);  }
.navinelio:hover { 	background-color:rgb(255,145,0); } 


/*    alueet            */

.alueimage {	height:333px;  background-image:url(kuvat/imagekuva.jpg);  background-position: 20% 20%;  width:100%;   overflow:auto;    }
	.logolohko { 	background-color: rgba(33,57,115 , 0.7); padding: 55px 66px 45px 66px;   display:table; float:left;     }
	.logokuva { 	width: 333px;    	  }
	.logoteksti {	padding: 11px 0 0 44px;  color:rgb(166,199,255); text-align:center;    font-size: 110%;    word-spacing: 0.1em;  letter-spacing: 0.2em;     }

.aluevakio {	background-color:rgb(255,255,255);  	padding:66px 9%; width:90%;  margin:0 auto;  overflow:auto;   }
.aluelevee {	background-color:hsl(222, 77%, 55%);  	width:100%;   overflow:auto;   }

.kuvarivi {		border-width: 11px 0 0 0;  border-color:rgb(33,57,115);  border-style:solid;  height:333px;  width:90%;  margin:0 auto;     } 	 /*    taustakuvan korkeus vähintään 200px    */
.kuvarivi1 {	background-image: url(kuvat/kuvarivi1.jpg); background-position: 60% 20%;   } 	 
.kuvarivi5 {	background-image: url(kuvat/yhteys.jpg); background-size:100%;  background-position: 50% 10%;   } 	



/*    2-jako            */

.flexrivi2 {	 display: flex; justify-content:space-between; }
.flexbox2 {		 width:45%;     }
.flexbox21 {	background-color: rgb(233,233,233);   padding: 2em 4em; width:45%;    } 
.flexbox22 {	padding: 2em 2em;  width:45%;   } 
.pampulahuomio {	margin: 1em 5%; padding: 0px 0px 0px 17%;  color: rgb(255,145,0);  font-size: 155%;  background-image: url(kuvat/oranssinelio-13.png);  background-position: 0 0.3em;  background-repeat: no-repeat;  }

.kuvaalue {		width:100%;  margin:33px 0;  display:table;  }
.kuvariviele3 {	width:30%;  margin:33px 5% 33px 0;  float:left; 	 }
.kuvariviteksti {	padding: 7px 10% 0 10%;  text-align:center;  font-size: 99%;  word-spacing: 0.1em;  letter-spacing: 0.09em;     }






/*    navigointi       */

nav {	 width:31em;  position:absolute;  display:table;  top:9px;  right:4%;     }
ul {			list-style-type:none;  margin:0;  padding:0;  position: absolute;  }
li {			margin-left:1em;  width:11em; display:inline-block;  float:left;	}
li a {		border: 1px rgb(255,255,255) solid;   background-color:rgb(33,57,115); color:rgb(255,255,255);  text-align:center; padding: 0 0;  font-size:105%;  letter-spacing: 0.1em;  height:50px;  line-height:50px;  text-decoration:none;  display:block;  box-sizing: border-box;  }
li:hover a {	background-color:rgb(255,145,0); color:rgb(255,255,255);  }
li:hover ul a {		background-color:rgb(111,111,111);  color:rgb(255,255,255);  font-size:95%;  letter-spacing: 0.1em;  height:40px;  line-height:40px;  border-width: 0 0 1px 0;  border-color: rgb(155,155,155);  border-style:dotted; 	}
li:hover ul a:hover {	background-color:rgb(255,145,0);  color:rgb(255,255,255);  	}
li ul {		display:none;  }
li ul li {		display:block;  float:none;  }
li ul li a {	min-width:9em;  padding: 0 20px;  }
ul li a:hover + .hidden, .hidden:hover {	display:block; }
.show-menu {					text-decoration:none;  background-color:rgb(44,44,44);  color:rgb(255,255,255);  height:1.4em;  padding: 30px 1em 0px 1em;  display:none;   }
input[type=checkbox]{				display:none;  -webkit-appearance: none; }
input[type=checkbox]:checked ~ #menu{	display:block;  }






/*	kuvaelementit		*/
/*	yksilöidyt alueet		*/

.omakuva {			width:177px;  float:left; 	}
.yhteystietolohko {	width:calc(95% - 177px);  float:left;  margin-left:5%;  	}
.yhteysalue {	background-color: rgb(222,222,222);    }
.yhteysalue13 {	overflow:auto;   }
.yhteysotsikko {	font-size:155%;  margin-top:33px;   }
.yhteystieto {	padding:5px 0;    font-size:111%;  }
.yhteysalue23 {	margin:44px 0 0 0%;  	width:100%;  height:333px;   }


.aluealin {		padding:1.5em; background-color:rgb(33,57,115); text-align: center;     }
.alinteksti {	font-size:155%;  font-style:italic;  text-align: center;  color: rgb(190,205,255);    }






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

.aluevakio {	padding:66px 5%; width:100%;  }
.kuvarivi {		width:100%;     } 	
nav {		width:28em;  right:0%;   }
li {		width:9em;   }
.pampula {	margin: 0px 5% 11px 0%;  }

							}	








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


/*	navigointi			*/
li ul li a {	width:auto;  min-width:100px;  padding: 0 20px;  }
nav {	width:auto;  top: 4px;  right:11px;      }
ul {			position:static;  display:none; }
li {			margin-left:0;  	}
li a {		float:right; width:13em;  text-align:center; padding: 20px 1em;  height:90px;  line-height:50px;     }
li:hover ul a {	height:60px;  line-height:40px;	}
ul li		 {  	margin-top:0.4em;   width:100%;    }
.show-menu {	float:right;  background-color:rgb(33,57,115);;  color:rgb(255,255,255);  font-size:1.7em;  height:auto;  padding:0.18em 0.2em 0.18em 0.27em;  
			border-width: 1px;  border-color: rgb(190,205,255);  border-style:solid;  display:block;   }
.show-menu:hover {	background-color:rgb(255,145,0); 	}

.alueimage {	background-position: 40% 0%;   }
.aluevakio {	padding:66px 5%; width:100%;  }

/*  	yleiset tekstit     	*/
/*	vakiolinkit			*/
/*	alueet			*/

.flexbox21 {	background-color: rgb(233,233,233);   padding: 2em 2em; width:50%;    } 
.flexbox22 {	padding: 2em 2em;  width:50%;   } 

.kuvarivi {		width:100%;     } 	 /*    taustakuvan korkeus vähintään 200px    */


/*    2-jako      	      */
.flexrivi2 { 	flex-direction:column; } 
.flexbox2 {	margin-top:1em;  width: 100%;     }
.flexbox21 {	padding: 2em 3em;  width:100%;    } 
.flexbox22 {	padding: 2em 3em;  width:100%;   } 
/*    3-jako      	      */
/*    4-jako      	      */
/*	logo				*/







.logolohko { 	width: 100%;  height:200px;  padding: 66px 50px 0 50px;  margin: 2em 0 0 0;   float:none;    }
.logokuva { 	margin:0 auto;     	  }
.logoteksti {	padding: 17px 0 0 44px;  text-align:center;    }

/*	kuvaelementit		*/
/*	yksilöidyt alueet		*/
.ohjelma {	width:100%; float:none; }
.kuvaus {	width:100%; padding: 0 0 2em 4em;  float:none;  }

						 	}








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


/*  	yleiset tekstit     	*/
.logolohko { 	padding: 66px 0px 0 0px;     }
.pkuvakapea {	margin: 0px 0 22px 00px;  width:100%;  float:none;  }
.aluevakio {	padding:66px 3%; width:100%;    }

.flexbox21 {	padding: 2em 1em;    } 
.flexbox22 {	padding: 3em 1em;    } 

.kuvariviele3 {	width:100%;  max-width: 555px;  margin:33px auto;  float:none; 	 }

.omakuva {			width:177px;  float:none; 	}
.yhteystietolohko {	width:100%;  float:none;  margin-left:0;  	}


						 	}	






/*	kestotietoa              */

.erotin {		width:100%;  display:table; }
.side {		width:100%;  display:table; 	}
.levee100 {		width:100%;  }
.eikellu {	clear:both; }
.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(255,145,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; }

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

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

.sisus110110 {	padding-top: 110px;  padding-bottom: 110px; }
.sisus9090 {	padding-top: 90px;  padding-bottom: 90px; }
.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; }