.div {	border:1px red solid; 	}

body {	margin:0;  word-spacing:0.1em;  letter-spacing:0.07em;  
font-family: Arial, Helvetica, Tahoma, "Liberation Sans", "DejaVu Sans", "Bitstream Vera Sans", "sans-serif";   }
.kursiivifonttienvarasto { 	font-family:"Abyssinica SIL", "Liberation Serif", FreeSerif, Serif;	 }

td { 	padding:0;  vertical-align:top;  }
table { 	border-collapse:collapse;  empty-cells:show;}
img {	border:0;  display:block; }
* {	box-sizing:border-box; 	}
html {	scroll-behavior:smooth;	}

.tietoboxi {	width:100%;  margin:44px 0; 	padding:22px 5%;   background-color:hsl(0,0%,100%); }
.tietoteksti {	padding:22px 0 0 0;  margin:0;  font-size:111%;  line-height:155%;  color:hsl(0,0%,0%);  	}


h1 {		padding:66px 3% 0 0; margin:0;  font-size:222%;  font-weight:normal;       }
h2 {		padding:0;  margin:33px 0 0 0;  font-size:144%;    }
h3 {		padding:0;  margin:22px 0 0 0;  font-size:122%;     }
p {		padding:22px 0 0 0;  margin:0;  font-size:111%;  line-height:155%;   }
.pamp {		padding:0px 0px 0px 33px;  margin:5px 0 5px 1%;   font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:155%;   }

.apuotsikko {	padding-top:33px; 	}
.leveeotsikko {	text-align:center; font-size:177%;  padding:77px 3% 0 7%;  margin:0;  width:100%;  
		font-weight:normal;  word-spacing:0.14em;  letter-spacing:0.07em;  display:table;   }

.leveeotsikkoylin {	margin-top:0;     }
.alateksti {	background-color:hsl(0,0%,100%); padding:11px 5%;  margin:0;  font-size:94%;  line-height:144%;   }



/*    alueet    .......................................................................................................................................................        */

.sivualue {		width:100%;  display:table; 	}
.aluevakio {	padding-left:9%;  padding-right:9%;  background-color:hsl(0,0%,100%);  width:100%;  display:table;  }
.aluelevee {	padding-left:3%;  padding-right:3%;  background-color:hsl(0,0%,100%);  width:100%;  display:table;  }
.alueimage {	height:555px; padding:0 0 33px 0;  width:100%;  position:relative; 
		background-image:url(kuvat/kuva0.jpg); background-size:1920px;  
		background-position:50% 55%;  background-repeat:no-repeat;  display:table;    }
.taustavaalea {	background-color:hsla(222,100%,40%, 0.2);     padding-bottom:33px; 	}


.alueingressi {	padding:66px 9% 77px 9%;  width:100%;  display:table;   	}
.ingressibxv  {	width:55%;   padding-bottom:11px; float:left;    }
.ingressiteksti {	padding:0;   margin:22px 0 0px 0px;  font-size:155%;  zzcolor:hsl(222,100%,40%);   line-height:166%;    }
.ingrpamp {	padding:0px 0px 0px 11%;  margin:16px 0 0px 1%;   font-size:144%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:155%;   }
.ingressibxo  {	width:35%;   margin:11px 0 0 0;  float:right;   }





/*    logo   .......................................................................................................................................................        */

.logolohko { 	width:600px;  margin:55px 0 0 10%;  padding:0;  border-radius:22px;  background:hsla(0,0%,30%, 0.8);  display:table;   }
.logokuva {	width:80%; max-width:444px; margin:44px auto 0 auto;    }
.logoteksti {	margin:33px 0 0 0;  padding:11px 2%; text-align:center;  border-radius:0 0 22px 22px;  font-size:222%;  word-spacing:0.1em;  letter-spacing:0.09em;  
		font-family: 'Quicksand', sans-serif;   background:hsla(0,100%,100%, 0.8);   }
.haiveviiva { 	height:1px;  width:77%;  margin:66px auto 0 auto;  background:linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }
.imageslogan {	width:100%;  margin:66px 0 0 0;  padding:0 66px; font-size:188%;  text-align:center;    
		text-shadow:1px 1px hsl(0,0,0); color:hsl(0, 100%, 100%);  word-spacing:0.2em;  letter-spacing:0.1em;   }




/*    navigointi    .......................................................................................................................................................        */



.aluenavi {	background-color:hsl(37,93%,54%);  position:relative;  width:100%;  font-size:1.4em;  height:2.8em;   display:table;   }
nav {		width:40em;  margin:0 auto; z-index: 111;  display:table;     }
ul { 		0em;  list-style-type:none;  margin:0;  padding:0;  position:absolute;    }
li { 		display:inline-block;  float:left;	 }			
li a { 		width:10em;  min-width:9em;  margin:0;  border-radius:1.4em; 
		height:2.8em;  line-height:2.8em;  background:hsl(37,93%,54%);  color:hsl(0,0%,100%);
		text-decoration:none;  text-align:center;  display:block;    }	
li:hover a { 	background:hsl(37,93%,80%);  color:hsl(0,0%,30%);  }								
li ul { 		display: none; 	}											
ul li a:hover + .hidden, .hidden:hover { 	display: block; }
.aktiivi {	background:hsl(37,93%,80%);  color:hsl(0,0%,30%); 	}

							
.nnvlink { 			display:none;	 }										
input[type=checkbox]{     		display:none;    -webkit-appearance:none; }				
input[type=checkbox]:checked ~ #menu{  	display:block;	 }




.zlinkkinappi {		width:10em;  margin:1em auto;  }
.zlinkkiteksti:link { 	color:hsl(0,0%,100%);      }
.zlinkkiteksti:visited { 	color:hsl(0,0%,100%);     }
.zlinkkiteksti:hover { 	color:hsl(0,0%,100%);  background-color:hsl(222,100%,66%);      }
.zlinkkiteksti {	 	padding: 0.5em 0em;  border-radius:0em;  text-align: center;  display: block;   
			background-color:hsl(222,100%,40%);  text-decoration: none; }
	

.nnkele {	 	bottom:4px;  right:4px;  position:fixed;   }
.nnk:link { 	background-image:url(kuvat/nnkoy255.png);   }
.nnk:visited { 	background-image:url(kuvat/nnkoy255.png);     }
.nnk:hover { 	background-image:url(kuvat/nnkoy0.png);  background-color:hsl(37,93%,80%);  color:hsl(0,0%,30%);   }
.nnk {	 	background-color:hsl(37,93%,50%);   border:1px hsl(37,93%,90%) solid;  
		height:60px;  width:60px;  background-size:40px;  border-radius:50%;   background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



.tekstilinkki:link {	color:hsl(222,100%,40%);   text-decoration:underline; }  
.tekstilinkki:visited {	color:hsl(222,100%,40%); text-decoration:underline; }
.tekstilinkki:hover {	color:hsl(300,80%,20%);   text-decoration:none; }




/*    boxit    .......................................................................................................................................................        */

.boxialue2 {	margin:66px 0 0 0; width:100%;  display:flex; justify-content:space-between;  flex-wrap:wrap;	}
.boxi2 {		width:45%;       }
.boxikuva2 {	width:100%;      	}
.pamp2 {	padding:0px 0px 0px 33px;  margin:5px 0 5px 1%;   font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:155%;   }



.boxialuew {	margin:0px 0 0 0;  padding-bottom:77px;  width:100%;  display:flex;  flex-wrap:wrap;	}
.boxiw {		width:30%;  margin:33px 1.66% 33px 1.66%;  padding-bottom:22px; border-radius:12px;  border:4px hsl(37,93%,54%) solid; 	
		background-color:hsl(37,93%,94%);  zzbackground-color:hsl(0,0%,94%);   position:relative;   }
.wkuva {		width:100%;  border-radius: 8px 8px 0 0;	}
.wotsikko  {	margin:0;  padding:22px 3% 0 5%;  font-size:166%;     }
.wteksti{		margin:0;  padding:11px 3% 0 5%;  font-size:122%;  line-height:155%;   }
.wpampula {	padding:0px 33px;  margin:5px 0 5px 7%;   font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:155%;   }
.wlinkkinappi { 	width:10em;  position:absolute;  right:11px;  bottom:11px;    }
.wlinkkiteksti:link { 	color:hsl(0,0%,100%);   border:1px hsl(37,93%,54%) solid;    }
.wlinkkiteksti:visited { 	color:hsl(0,0%,100%);   border:1px hsl(37,93%,54%) solid;     }
.wlinkkiteksti:hover { 	color:hsl(37,93%,54%);  background-color:hsl(37,93%,96%);  background-color:hsl(0,0%,100%);   border:1px hsl(37,93%,54%) solid;      }
.wlinkkiteksti {	 	padding: 0.5em 0em;  border-radius:0em;  text-align: center;  display: block;   
			background-color:hsl(37,93%,54%);  text-decoration: none;   border:1px hsl(37,93%,54%) solid;  }


/*    yhteydet    .......................................................................................................................................................        */

.alueyhteys {	padding:66px 7%;  background-color:hsla(222,100%,40%, 0.2);  display:flex;  justify-content:space-between;  flex-wrap:wrap; 	}

.yhteystekstilohko {	width:22em;  margin:0;  padding:0 3% 0 0%;  display:table;    }
.yhteysboxi1 {	 	}
.yhteysboxi2 {	margin-top:22px;  	}
.yhteystieto {	color:hsl(0,0%,10%);  font-size:111%;  margin:0;  padding:11px 0 0 0;   word-spacing:0.14em;  letter-spacing:0.07em;    }
.yhteysrako {	margin-top:22px;	}

.yhteyskartta {	width:calc(100% - 22em);  margin:0 0 0 0; padding:22px 33px; background-image:url(kuvat/kuvayhteys.jpg);  background-position:50% 66%;  background-size:cover;     }
.karttaele {	width:300px; float:right; 	}
.iframeele {	    }
.karttateksti {	padding:11px 22px;  	}

.aluealin {	padding:33px 66px;  width:100%;  background-color:hsl(37,93%,54%);  display:table;  }
.alalause {	text-align:center;  font-size:133%;  font-style:italic;  color:hsl(0,0%,30%);   font-family: 'Quicksand', sans-serif;     }


/*    harvinaiset    .......................................................................................................................................................        */

.floatnappi {	float:right; }
.pilarirakonolla {		}
.pilarirakopieni {		}
.pilarirakoiso {		}





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

.aluevakio {	padding-left:3%;  padding-right:3%;  }

.alueimage {	height:444px;  }
.imageslogan {	width:100%;  margin:55px 0 0 0;  padding:0 66px; text-align:center; float:none;   }

.alueingressi {	padding:77px 3% 88px 3%;  width:100%;  display:table;   	}
.ingressibxv  {	width:100%;   float:none;    }
.ingressiteksti {	   }
.ingressibxo {	width:100%;  float:none;    }

.logolohko { 	margin:77px auto 0 auto;     }


.aluenavi {	background-color:transparent; width:444px;  margin:0; position:absolute;  top:11px;  right:4px;      }
nav {		width:20em; float:right;   }
ul { 		width:20em;  position:static;  display:none;	 }			
ul li, li a {  	width:100%;   }			
li a { 		padding:0 0 1.4em 0;  margin:0 0 2px 0;   }	
li:hover ul a { 	background:rgb(237,126,43);  color:rgb(0,0,0); }	

.nnv {	 	background-image: url(kuvat/nnv255.png); background-color:hsl(37,93%,54%);
		height:40px;  width:80px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%; 
		float:right; display:block;  text-decoration:none;  border-radius:20px;  
		border:1px hsl(37,93%,54%) solid; 
			/*  nappi on siisti reunoiltaan kun siinä on napin värinen border, eikä taustan värinen*/
		margin-bottom:11px;  } /*	rako linkkinapin ja linkkien välissä	*/
.nnv:link {	       }
.nnv:visited {	       }
.nnv:hover {	background-image: url(kuvat/nnv255.png);  background-color:hsl(37,93%,80%); 
		border:1px hsl(37,93%,80%) solid;     }
			/*  nappi on siisti reunoiltaan kun siinä on napin värinen border, eikä taustan värinen*/

.boxi2 {		width:48%;       }
.boxi3 {		width:31%;        }
.boxi4 {		width:21%; margin:22px 0;        }	

		
.yhteysboxi1 {	padding:0 3%;  width:50%; float:left;  display:table; 	}
.yhteysboxi2 {	padding:0 3%;  margin:0; width:50%; float:right;  display:table;	}
.yhteystekstilohko {	padding:0;  width:100%;     }
.yhteyskartta {	width:100%;  margin:66px 0 0 0;     }

.boxiw {		width:48%;  margin:33px 1% 33px 1%;      }

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





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

.aluevakio {	padding-left:3%;  padding-right:3%;  }
.alueimage {	height:333px;  border-width:0 0  22px 0;  border-color:hsl(37,93%,54%);   border-style:solid;   }
.alueingressi {	padding:77px 3% 88px 3%;    	}
.ingressiteksti {	font-size:133%;     }
.ingrpamp {	font-size:122%;  }

.boxi2 {		width:100%;       }
.boxi3 {		width:100%;  	}
.boxi4 {		width:48%;       }



.alueyhteys {	padding:66px 3%;   	}
.yhteysboxi1 {	padding:11px 3% 11px 15%;  width:100%; float:none;   	}
.yhteysboxi2 {	padding:11px 3% 11px 15%;  width:100%; float:none; 	}


.pilarirakonolla {	margin-top:0;	}
.pilarirakopieni {	margin-top:44px;	}
.pilarirakoiso {	margin-top:66px;	}

.boxiw {		width:96%;  max-width:666px;  margin:33px auto 33px auto;      }

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








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


.alueimage {	padding:0 0 33px 0;      }


.logolohko { 	max-width:90%;  width:98%;  margin-left:auto;  margin-right:auto;    }
.logokuva {	width:90%; max-width:333px;  margin:77px auto 0 auto;   }
.imageslogan {	font-size:144%;  }

.aluenavi {	max-width:100%;  width:calc(100% - 40px);  top:4px;  right:20px;        } 


nav {		width:100%;   }
ul { 		width:100%;  margin-left:0px; 	 }


.leveeotsikko {	font-size:144%;  padding:66px 3% 0 7%;    }
.kuultoh3	 {  	font-size:122%;   padding:0.5em 1em;  	}



.boxi4 {		width:100%;       }
.isoteksti {	font-size:111%;    }

.yhteysboxi1 {	padding:11px 3% 11px 0%;    	}
.yhteysboxi2 {	padding:11px 3% 11px 0%;   	}
.karttaele {	width:90%; float:none;  margin:22px auto;	}


      


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











/*	kestotietoa yyy           --------------------------------------------------------------------------------------------   */

.vaaleaotsikko {	color:hsl(0,0%,100%);    }

.ypadmaxi { 	padding-top:111px; }
.ypadiso { 	padding-top:66px; }
.ypadpieni { 	padding-top:33px; }
.ypadnolla { 	padding-top:0; }

.apadmaxi { 	padding-bottom:111px; }
.apadiso { 	padding-bottom:66px; }
.apadpieni { 	padding-bottom:33px; }
.apadnolla { 	padding-bottom:0; }

.ymargmaxi { 	margin-top:111px; }
.ymargiso { 	margin-top:66px; }
.ymargpieni { 	margin-top:33px; }
.ymargnolla { 	margin-top:0; }

.amargmaxi { 	margin-bottom:111px; }
.amargiso { 	margin-bottom:66px; }
.amargpieni { 	margin-bottom:33px; }
.amargnolla { 	margin-bottom:0; }

.vasemmalle {	text-align:left; }
.keskelle {	text-align:center; }
.oikealle {	text-align:right; }
.kuvakeskelle {	margin-left:auto;  margin-right:auto; }
.valkea {		color:hsl(0,0%,100%); 	}
.levee100 {	width:100%; }





.liukupystymalli { 	background:linear-gradient( hsl(111,80%,40%) , hsl(111,80%,100%) ); }
.taustakuvamalli {	background-image:url(kuvat/taustakuva.jpg);  background-size:cover;  background-position:0 0;   min-height:555px;  }

.sininen {	background-color:hsl(208,100%,33%);	color:rgb(0, 61, 204); }
.keltainen {	background-color:hsl(60,100%,50%);	color:rgb(255, 255, 0); }
.oranssi {	background-color:hsl(25,100%,50%);	color:rgb(255, 106, 0); }
.vihree {		background-color:hsl(222,100%,40%);	color:rgb(0, 166, 0); }
.punainen {	background-color:hsl(0,82%,48);	color:rgb(222, 22, 22); }
.valkoinen {	background-color:hsl(0,100%,100%);	color:rgb(255, 255, 255); }
.musta {		background-color:hsl(0,100%,0%);	color:rgb(0, 0, 0); }

.fontti {    	font-family:'Alfa Slab One'; 	}
.erotin {		width:100%;  height:1px;  display:block;  }
.eimarginaalia {	margin-right:0;   }