.div {	border:1px red solid; 	}

body {	margin: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";   }
.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;	}

.perusvari	{	background-color:hsl(97,74%,34%);	color:rgb(71,150,22);	}
.haalea		{	background-color:hsl(97,74%,88%);	}



/*    perustekstit	==============================================================================================================	*/

h1 {	margin:66px 3% 0 3%; padding:0;  font-size:222%;  font-weight:normal;       }
h2 {	text-align:center; font-size:177%;  padding:77px 3% 0 3%;  margin:0;  width:100%;  font-weight:normal;  word-spacing:0.14em;  letter-spacing:0.07em;  display:table;   }
h3 {	margin:22px 0 0 0;  padding:0;  font-size:122%;     }
p {	margin:22px 0 0 0;  padding:0;  font-size:122%;  line-height:155%;   }
.pampula {	padding:0px 0px 0px 33px;  margin:5px 0 5px 1%;   font-size:122%;  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; 	}





/*    alueet	==============================================================================================================	*/

.sivualue {	width:100%;  display:table; 	}
.aluelevee {	width:100%;  display:table; 	}
.aluevakio {	width:100%;   padding-left:7%;  padding-right:7%;  display:table;  }




/*    logo imageosa 	==============================================================================================================	*/

.alueimage {	padding:0 0 44px 0;  width:100%;  position:relative; display:table;  
		background-image:url(kuvat/kuva0.jpg); background-size:cover;   background-position:50% 0%;    }
.imageboxi1 {	width:480px;   margin:0 0 0 5%;  float:left;  display:table;	}
.imageboxi2 {	width:560px;  background-color:hsla(0,0%,0%, 0.7); float:right; margin:77px 5% 44px 0;  padding:33px 3%;  	}
.imageotsikko {	font-size:155%; color:hsl(0,0%,100%);  font-weight:bold;  margin:0;  padding:0 0 22px 0; 	}
.imagepampula {	padding:0px 0px 0px 33px;  margin:5px 0 0 1%;   font-size:133%;  background-image:url(kuvat/pallovalkea.png);  
		background-size:0.4em;  background-position:0 0.56em;  color:hsl(0,0%,100%);  font-weight:bold;
		background-repeat:no-repeat;  line-height:155%;   }
.imageteksti {	font-size:133%;  color:hsl(0,0%,100%);  font-weight:bold;  margin:22px 0 0 0;  padding:0;  	}
.imageslogan {	margin:22px 0 0 0;  padding:5%;  width:100%;  float:left; text-align:center; font-size:133%;  color:hsl(0,0%,100%);   font-size:155%;  font-weight:bold;   font-style:italic;   }


.logolohko { 	width:480px;  margin:77px 0 0 0;  background-color:hsl(0,0%,100%);  display:table;   }
.logokuva {	width:70%;  max-width:333px;  margin:77px auto 0 auto;    }
.haiveviivalogo { 	height:1px;  width:55%;  margin:22px auto;  background:linear-gradient( 90deg, transparent , hsl(97,74%,34%) , transparent );   }
.logoteksti {	text-align:center;  padding:0 0 55px 0;  font-size:144%;  color:hsl(97,74%,34%);  word-spacing:0.1em;  letter-spacing:0.09em;      }

.kielilinkkilohko {		color:hsl(220,100%,20%);  font-size:99%;  font-weight:bold;   position:absolute;  top:22px;  right:3%;  padding:0 1em;  }
.kielilinkki:link {		text-decoration: none; }  
.kielilinkki:visited {	text-decoration: none; }
.kielilinkki:hover {	text-decoration: underline; }
.kielilinkki {	 	color:hsl(0,0%,100%);  white-space:nowrap; }




/*    navigointi	==============================================================================================================	*/

nav {	width:480px;  margin:33px 0;    height:2em;  z-index:111;  display:table;     }
ul { 	list-style-type:none;  margin:0;  padding:0;    position:absolute;    }
li { 	display:inline-block;  float:left;	 }			
li a { 	display:block;  padding:0.5em 0;  width:140px; min-width:100px;  margin:0 10px;  height:2em;
	color:hsl(0,0%,100%);  background:hsl(97,74%,34%);  text-align:center;  line-height:1em;  text-decoration:none; }	
li:hover a { 		background:hsl(97,74%,60%);  color:hsl(0,0%,100%);  }									
li ul { 			display:none; }											
li ul li { 		display:block;  float:none; }								
ul li a:hover + .hidden, .hidden:hover { 	display:block; }						
.nnvlink { 		display:none; }	
input[type=checkbox]{     	display:none;    -webkit-appearance:none; }				
input[type=checkbox]:checked ~ #menu{     display:block; }		



.nnkele {	 	bottom:4px;  left: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/nnkoy255.png);  background-color:hsl(97,74%,60%);   }
.nnk {	 	background-color:hsl(97,74%,34%);    
		height:50px;  width:50px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



.tekstilinkki:link {	color:hsl(97,74%,34%);   text-decoration:underline; }  
.tekstilinkki:visited {	color:hsl(97,74%,34%); 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%;       }
.kuvateksti2 {	margin:7px 5% 17px 5%; font-size:88%;  text-align:center; 	}

.boxialue3 {	margin:66px 0 0 0;  width:100%;  display:flex; justify-content:space-between; flex-wrap:wrap;  }
.boxi3 {		width:30%;        }
.boxi31 {		width:36%;        }
.boxi32 {		width:26%;        }
.boxi33 {		width:26%;        }
.boxiotsikko3 {	margin:22px 0 0 0;  font-size:122%;     }
.pampula3 {	padding:0px 0px 0px 22px;  margin:15px 0 4px 0;   font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.3em;  background-position:0 0.6em;  background-repeat:no-repeat;  line-height:155%;   }
.boxikehys {	padding:11px 3% 22px 7%;  border-width:2px;  border-color:hsl(97,74%,34%);  border-style:solid;  border-radius:22px;  	}


.boxialue4 {	margin:66px 0 0 0;  width:100%;  display:flex; justify-content:space-between; flex-wrap:wrap; 	}
.boxi4 {		width:20%; margin:22px 0;        }

.boxialue123  {	margin:66px 0 0 0; width:100%; display:flex; justify-content:space-between;  flex-wrap:wrap;	}
.boxi123kapea  {	width:30%;     font-size:100%;    }
.boxi123levea  {	width:60%;  margin:0 5% 0 0;  padding:33px 5%;     }
.otsikko123 {	font-size:155%; color:hsl(0,0%,100%);  font-weight:bold;  margin:0;  padding:0 0 22px 0; 	}
.teksti123  {	font-size:133%; color:hsl(0,0%,100%);  font-weight:bold;  margin:0;  padding:0 0 22px 0; 	}
.tekstitausta {	background-color:hsl(297,74%,34%);  padding:0.2em 1em;	}

.pampula123 {	padding:0px 0px 0px 33px;  margin:5px 0 0 1%;   font-size:122%;  background-image:url(kuvat/pallovalkea.png);  
		background-size:0.4em;  background-position:0 0.56em;  color:hsl(0,0%,100%);  font-weight:bold;
		background-repeat:no-repeat;  line-height:155%;   }



/*    yhteydet	==============================================================================================================	*/

.alueyhteys {	margin:66px 0 0 0;  padding:66px 5%;  width:100%;  display:flex; justify-content:space-between; flex-wrap:wrap;  }
.yboxi {		       }
.yboxi1 {		width:30%;        }
.yboxi2 {		width:27%;        }
.yboxi3 {		width:38%; background-color:hsl(0,0%,100%);  text-align:center;  padding:0 3% 27px 3%;       }
.ytieto {		margin:2px 0 0 0;  padding:0;  font-size:122%;  line-height:145%;   }
.yotsikko {	font-size:177%;  color:hsl(97,74%,34%);  padding:27px 0 22px 0; 	}
.yrako  {		margin-top:0.7em;	}
.ytunnus {	margin-top:0.9em;  font-size:88%;	}
.taustay  {	background-image:url(kuvat/asko.jpg);  background-size:cover;  background-position:65% 0;   min-height:222px;     }
.yhaiveviiva { 	height:1px;  width:55%;  margin:11px auto;  background:linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }

.aluealin {	padding:1px 66px 22px 66px;  width:100%;  background-color:hsl(97,74%,34%);   display:table;  }
.alalause {	text-align:center;  font-size:133%;  font-style:italic; color:hsl(97,74%,88%);    }



/*    harvinaiset 	==============================================================================================================	*/

.haiveviiva { 	height:1px;  width:55%;  margin:66px auto 0 auto;  background:linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }

.taustakuva1  {	background-image:url(kuvat/taustakuva1.jpg);  background-size:cover;  background-position:0 0;   min-height:222px;     }
.taustavalkea {	background-color:hsl(0,0%,100%); 	}
.taustahaalea {	background-color:hsl(97,74%,88%);    }




/*	========================================================================================================================	*/
/*	========================================================================================================================	*/









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


/*    logo imageosa 	==============================================================================================================	*/

.alueimage {	position:relative;    }
.imageboxi1 {	width:480px;   margin:0 auto;  float:none; 	}
.imageboxi2 {	width:80%;  max-width:800px;  float:none;  margin:33px auto; padding:33px 5%;    	}




nav {		margin:0; left:4px;  top:4px;  width:90%;  
		position:absolute;  max-width:333px;  background:transparent;  height:auto;  }
ul {		position:static;  display:none; }
li {		margin:0;	float:right; }
ul li a {		padding:2em 1em;  margin:0; height:auto; border-width:1px 0 0 0;  border-color:hsla(0,100%,100%, 0.5);  border-style:solid;   }
li:hover a {	  	}
ul li, li a {  	width:100%;  text-align:center;  }
ul li ul li a {	padding:2em 1em;  margin:0; height:auto;  width:100%;   }



.nnv:link {	background-image:url(kuvat/nnv255.png);       }
.nnv:visited {	background-image:url(kuvat/nnv255.png);        }
.nnv:hover {	background-image:url(kuvat/nnv255.png);   background-color:hsl(97,74%,60%);    }
.nnv {	 	float:left;  
		background-image:url(kuvat/nnv255.png); background-color:hsl(97,74%,34%); 
		height:50px;  width:50px;  background-size:30px;  margin-bottom:0px;   
		background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



.boxi2 {		width:48%;       }
.boxi3 {		width:31%;        }

.boxi31 {		width:36%;        }
.boxi32 {		width:26%;        }
.boxi33 {		width:26%;        }

.yboxi1 {		width:40%;        }
.yboxi2 {		width:40%;         }
.yboxi3 {		width:100%;    margin:55px auto 0 auto; padding:0 3% 27px 3%;       }		



 	}	
/*	========================================================================================================================	*/
/*	========================================================================================================================	*/




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

.aluevakio {	padding-left:5%;  padding-right:5%;  }
.boxialue2 {	margin:33px 0 0 0; 	}
.boxi2 {		width:100%;   margin-top:33px;    }
.boxialue3 {	margin:33px 0 0 0; 	}
.boxi3 {		width:100%; margin-top:33px;   	}
.boxialue4 {	margin:33px 0 0 0; 	}
.boxi4 {		width:48%;  margin-top:33px;       }
.boxi123kapea  {	width:100%;       }
.boxi123levea  {	width:100%;  margin:0;      }

.alueyhteys {	margin:33px 0 0 0;  padding:0 3%;   	}
.yboxi1 {		width:100%;        }
.yboxi2 {		width:100%;  margin:55px auto 0 auto;        }
.yboxi3 {		width:100%; margin:55px auto 0 auto; padding:0 3% 27px 3%;       }

.tausta1  {	margin-top:22px; min-height:222px;     }
.taustay  {	background-size:contain; min-height:333px;  background-repeat:no-repeat;  background-position:50% 0;   }

 	}
/*	========================================================================================================================	*/
/*	========================================================================================================================	*/





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

.imageboxi1 {	width:90%;  max-width:480px;   	}
.imageboxi2 {	width:90%;     	}

.logolohko { 	width:98%;  margin-left:auto;  margin-right:auto;    }


 	}	
/*	========================================================================================================================	*/
/*	========================================================================================================================	*/










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

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

.ypadiso { 	padding-top:66px; }
.ypadpieni { 	padding-top:33px; }
.ypadnolla { 	padding-top:0; }
.apadiso { 	padding-bottom:66px; }
.apadpieni { 	padding-bottom:33px; }
.apadnolla { 	padding-bottom:0; }

.ymargiso { 	margin-top:66px; }
.ymargpieni { 	margin-top:33px; }
.ymargnolla { 	margin-top:0; }
.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(97,74%,34%);	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'; 	}
.levee100 {	width:100%;  }
.erotin {		width:100%;  height:1px;  display:block;  }
.eimarginaalia {	margin-right:0;   }


/*    perustekstit	==============================================================================================================	*/
/*    alueet	==============================================================================================================	*/
/*    logo ingressi	==============================================================================================================	*/
/*    navigointi	==============================================================================================================	*/
/*    boxit	==============================================================================================================	*/
/*    capi	==============================================================================================================	*/
/*    yhteydet	==============================================================================================================	*/
/*    harvinaiset	==============================================================================================================	*/

@media screen and (max-width :333px)	{	/*	======================================================================	*/
	}	
/*	========================================================================================================================	*/
/*	========================================================================================================================	*/