.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:"Abyssinica SIL", "Liberation Serif", FreeSerif, Serif; 
*/
font-family: Arial, Helvetica, Tahoma, "Liberation Sans", "DejaVu Sans", "sans-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;	}



.oranssilogo {	background-color:hsl(27,100%,50%); 	background-color:rgb(255,114,2); }
.harmaaviiva{ 	background-color:hsl(248,5%,34%); 	background-color:rgb(83,82,90);  }
.sininen {	background-color:hsl(198,98%,52%);	background-color:rgb(14,182,252); }

	.oranssipalkki { background-color:hsl(28,100%,50%); background-color:rgb(255,117,0); }
	.oranssiteksti { background-color:hsl(34,87%,54%); background-color:rgb(240,150,34); }
	.oranssihaal { background-color:hsl(46,97%,78%); background-color:rgb(253,228,144); }


h1 {	padding:0 0 33px 0; margin:0;  font-size:222%;  font-weight:normal;  line-height:177%;    font-family:Jura;      }
h2 {	padding:99px 0 0 0;  margin:0;  text-align:center;  font-weight:normal;  font-size:333%; font-family:Jura;    }
.valkeaotsikko {	padding:22px 0 0 0;  margin:0;  color:hsl(0,0%,100%);  text-align:left;  font-weight:normal;  font-size:222%;  font-family:Jura;  }
h3 {	padding:0;  margin:55px 0 11px 0;  font-size:166%;  font-family:Jura;  }
p {	padding:22px 0 0 0;  margin:0;  font-size:133%;  line-height:177%;   }
.pampula {	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%;   }

.valkeateksti {	padding:22px 0 0 0;  margin:0;  font-size:133%;  line-height:177%;  color:hsl(0,0%,100%);    }
.leveeteksti {	padding:99px 15% 0 15%;  margin:0;  text-align:center;   font-weight:normal;  font-style:italic; font-size:155%;    }



.sivualue {	padding:0 0 0 0;  width:100%;  max-width:1920px;  display:table; 	}
.ylinalue {	position:relative; 	}
.alueimage {	width:100%;  display:flex;  flex-wrap:wrap;  border-width:33px 0 0 0;  border-color:hsl(27,100%,50%);  border-style:solid;  }



.logolohko { 	width:28%;  padding:99px 3% 0 3%;  background-color:hsl(0,0%,100%);    }
.logokuva {	width:90%;  max-width:444px;  margin:0 auto;      }
.haivelogo1 {	height:2px;  width:77%;  margin:33px auto 0 auto;  background: linear-gradient( 90deg, transparent , hsl(27,100%,50%) , transparent );   }  
.logoteksti {	font-size:177%;  margin:0; padding:33px 0 0px 0;  color:hsl(0,0%,0%);  text-align:center;   word-spacing:0.1em;  letter-spacing: 0.09em;      }
.haivelogo2 {	height:2px;  width:77%;  margin:33px auto 33px auto;  background: linear-gradient( 90deg, transparent , hsl(27,100%,50%) , transparent );   }  
.imagekuvalohko {	width:72%;    	}



.aluenavi {	position:absolute;  bottom:33px;  right:55px;   font-size:1em;  height:3em;   display:table;   }
nav {		width:48em;  margin:0 auto; z-index: 111;  display:table;     }
ul { 		width:100%;  list-style-type:none;  margin:0;  padding:0;  position:absolute;    }
li { 		display:inline-block;  float:left;	 }			
li a { 		width:14em;  min-width:9em;  margin:0 1em; border-radius:1.5em;  
		height:3em;  line-height:3em; color:hsl(0,0%,0%);  background-color:hsl(27,100%,50%);  
		background:linear-gradient( hsl(27,100%,50%) , hsl(27,100%,66%) , hsl(27,100%,50%)   );
		border-width:0;  border-color:hsl(27,100%,20%);  border-style:solid; 
		text-decoration:none;  text-align:center;  display:block;     }	
li:hover a { 	background:hsl(27,100%,66%);  color:hsl(0,0%,0%);  }								
li ul { 		display: 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:21px;  right: 7px;  position: fixed;   }
.nnk:link { 	background-image: url(kuvat/nnk255.png);   }
.nnk:visited { 	background-image: url(kuvat/nnk255.png);     }
.nnk:hover { 	background-image: url(kuvat/nnk0.png); background-color: hsl(27,100%,66%);    }
.nnk {	 	background-color:hsl(27,100%,50%);   height:50px;  width:50px;  background-size:22px;  background-repeat:no-repeat;  background-position:50% 45%;  display:block;  text-decoration:none; 
		border:1px hsl(0,0%,100%) solid;  border-radius:50%;  }




.alueingressi {	width:100%;  display:flex;  flex-wrap:wrap;    }
.ingressivasen {	margin:0;  padding: 55px 5% 22px 9%;  width:65%;   background-color:hsl(27,100%,88%);   }
.ingressiteksti  {	padding:0 0 33px 0;  margin:0;  font-size:155%;  line-height:166%;   }
.ingressiotsikko {	padding:0 0 33px 0;  margin:0;  font-size:199%;  font-family:Jura; 	}
.ingressioikea {	margin:0;  padding:33px 5% 0px 5%;  width:35%;  background-color:hsl(27,100%,77%);   }
.slogan {		width:100%;  max-width:22em;  margin:22px 0% 33px 0%;  padding: 2em 1em; text-align:center;  font-size:166%;  font-style:italic; 	font-family:"Abyssinica SIL", "Liberation Serif", FreeSerif, Serif; 
		word-spacing:0.2em;  letter-spacing:0.1em;  color:hsl(0,0%,0%);   border:2px hsl(0,0%,100%) solid;  border-radius:22px;  }



/*	oooooooooooooooooooooooooooooooooooooooooooooooooo	*/

.aluevakio {	width:100%;  padding-left:9%;  padding-right:9%;  display:table; 	}

.boxialue2 { 	width:100%; margin:77px 0 0 0; display:flex; justify-content:space-between;   flex-wrap:wrap;  }
.boxi2 { 		width:47%; margin:0px 0 0 0; } 
.boxikapee {	width:40%;	}
.boxilevee {	width:55%; 	}

.boxikuva2 { 	width:100%;  border-radius:33px;  } 
.boxipilari2 {	 	}

.boxialue12 { 	width:100%; margin:99px 0 0 0; display:flex;  flex-wrap:wrap;   }
.boxi121 { 	width:67%; margin:0 0 0 0; background-image:url(kuvat/taustakuva12.jpg);  background-size:cover;  background-position:50% 100%;  min-height:444px;  } 
.boxi122 { 	width:33%; margin:0 0 0 0; padding: 33px 5% 44px 5%;  background-color:hsl(0,0%,0%); }
.teksti12  {	padding:22px 0 0 0;  margin:0;  font-size:133%; color:hsl(0,0%,100%);   line-height:155%;   }


.boxialue3 { 	width:100%; margin:77px 0 0 0; display:flex; justify-content:space-between;   flex-wrap:wrap;  }
.boxi3 { 		width:30%; margin:0px 0 0 0; } 
.boxikuva3 { 	width:100%;  border-radius:33px;  } 



.yhteysalue2 {	width:100%;  margin:111px 0 0 0;  padding:0;  background-color:hsl(27,100%,88%);    display:flex;  justify-content:space-between;  flex-wrap:wrap; 	}

.yhteysboxi1 {	margin-top:0;  width:36em; padding:66px 22px 44px 5%; 	}
.yhteysotsikko {	font-size:155%;  font-weight:bold; padding:0 0 22px 0;  margin:0;    	}
.yhteysteksti {	font-size:133%;  padding:5px 0 0px 0;  margin:0;   	}
.yhteysrako {	margin-top:1em; 	}

.yhteysboxi2 {	margin-top:0;  padding:22px;  width:calc(100% - 36em);  background-image:url(kuvat/kuvay.jpg);  background-size:cover;  background-position:20% 50%;  min-height:555px; 	}
.karttaele {	width:333px;   float:right; 	}


.aluealin {	font-size:155%;   padding:22px 55px;  text-align:center;   
		background:linear-gradient( hsl(27,100%,50%) , hsl(27,100%,66%)  );   color:hsl(0,0%,100%);	}



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

.taustakuva1 {	background-image:url(kuvat/taustakuva1.jpg);  background-size:cover;  background-position:50% 50%;   min-height:444px;  }
.taustakuva2 {	background-image:url(kuvat/taustakuva2.jpg);  background-size:cover;  background-position:50% 50%;   min-height:444px;  }
.haiveviivaalue { 	height:2px;  width:77%;  margin:99px auto 0px auto;  background: linear-gradient( 90deg, transparent , hsl(27,100%,50%) , transparent );   }









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

.alueimage {	display:table;  }

.logolohko { 	width:100%;  max-width:100%;  margin:0;  padding:55px 3% 0 3%;     }
.imagekuvalohko {	width:100%;    	}



.aluenavi {	background-color:transparent; width:444px;  margin:0; position:absolute;  top:44px;  right:11px;      }
nav {		width:22em; float:right;   }
ul { 		width:22em;  position:static;  display:none;	 }			
ul li, li a {  	width:100%;  box-sizing:content-box;   }			
li a { 		padding:1em 0px;  margin:3px 0;  border-width:1px 0 0 0;  border-color:rgb(102,128,188);  border-style:solid;  
		border-radius:2.5em; }	
li:hover ul a { 	background:rgb(237,126,43);  color:rgb(0,0,0); }	

.nnv {	 	background-image: url(kuvat/nnv255.png);  background-color:hsl(27,100%,50%);   
		height:50px;  width:50px;  background-size:22px;  background-repeat:no-repeat;  background-position:50% 50%; 
		float:right; margin-bottom:4px;  display:block;  text-decoration:none;  border:1px rgb(255,255,255) solid; border-radius:50%;  }
.nnv:link {	       }
.nnv:visited {	       }
.nnv:hover {	background-image: url(kuvat/nnv255.png);  background-color:hsl(27,100%,46%);      }

.ingressivasen {	margin:0;  padding:55px 7% 11px 7%;  width:100%;   }
.ingressioikea {	margin:0;  padding:44px 7% 33px 7%;  width:100%;   }
.slogan {		width:100%;  max-width:66%;   font-size:144%;  margin:1px auto 1px auto;  padding: 1em 1em; }


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

.boxi121 { 	width:100%;    } 
.boxi122 { 	width:100%;  }


.yhteysboxi1 {	width:28em; 	}
.yhteysboxi2 {	width:calc(100% - 28em);	}



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









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

.logokuva {	margin:7px auto 0 auto;      }
.logoteksti {	font-size:144%;      }
.ingressiteksti  {	font-size:133%;   }
.slogan {		width:100%;  max-width:100%;  }

h2 {	font-size:222%;    }
h3 {	font-size:144%;  }
p {	font-size:122%;   }

.valkeaotsikko {	font-size:188%;    }
.leveeteksti {	padding:99px 5% 0 5%;  font-size:144%;    }


.boxialue2 { 	flex-direction:column; }
.boxi2 { 		width:100%;  max-width:666px;  margin-left:auto;  margin-right:auto;  } 

.boxialue3 { 	flex-direction:column; }
.boxi3 { 		width:100%;  max-width:666px;  margin-left:auto;  margin-right:auto;  } 

.yhteysalue2 {	flex-direction:column; 	}
.yhteysboxi1 {	width:100%; max-width:100%; padding: 33px 22px 33px 22%;  	}
.yhteysboxi2 {	width:100%; padding:0 0 222px 0;  height:333px; 	}
.karttaele {	width:100%;   float:none; 	}

.pilari900 {	margin-top:0;   	}
.rako900 {	margin-top:33px;   	}
.oikeaensin {	flex-direction:column-reverse; 	}
.haive900	 {	height:2px;  width:77%;  margin:55px auto 33px auto;  background: linear-gradient( 90deg, transparent , hsl(27,100%,50%) , transparent );   } 

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








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

.aluenavi {	max-width:80%;  width:calc(80% - 16px);  right:8px;        }
nav {		width:100%;   }
ul { 		width:22em;  margin-top:4.2em;  margin-right:0px;  margin-left:auto; 	 }
	
.ingressipampula {	padding:0px 0px 0px 22px;  margin:5px 22px 5px 33px;   font-size: 133%;    }
.ingressipampula {	width:90%;  padding:0px 0px 0px 9%;  margin:5px 0 5px 5%;   font-size: 122%;    }		

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

.yhteysboxi1 {	padding-left:5%;  	}
				}	/*	----------------------------------------------------------------------	*/








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

/*	kestotietoa	*/


.taustavalkea {		background-color:hsl(0,0%,100%);    }
.tekstivalkea {		color:hsl(0,0%,100%);    }
 .taustasininenhaalea {	background-color:hsla(198,98%,52%, 0.2);    }


.ypadiso { 	padding-top:66px; }
.ypadpieni { 	padding-top:33px; }
.ypadnolla { 	padding-top:0; }
.apadsuurin { 	padding-bottom:99px; }
.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; }

.haiveviivamalli { 	height:1px;  width:77%;  margin:33px auto; background: linear-gradient( 90deg, transparent , hsl(0,0%,100%) , transparent );   }
.liukupystymalli { 	background:linear-gradient( hsl(111,80%,40%) , hsl(111,80%,100%) ); }
.taustakuvamalli {	background-image:url(kuvat/kuva.jpg);  background-size:cover;  background-position:0 0;   min-height:555px;  }

.levee100 {	width:100%; }
.yhdessa {	white-space: nowrap;   }
.fontti {    	font-family:'Alfa Slab One'; 	}
.levee100 {	width:100%;  }
.eimarginaalia {	margin-right:0;   }










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

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