.div {	border:1px red solid;	}

body {	margin:0;  word-spacing:0.1em;  letter-spacing:0.07em;  background-image:url(kuvat/kuva04.jpg);  background-size:cover;  background-attachment:fixed;
/*
	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;	}


.perusvari {	background-color: hsl(240,60%,30%);	}
.perusvarikeski {	background-color: hsl(240,60%,70%); 	}
.piriste {	background-color: hsl(52,100%,50%);	}
.sinappi {	background-color:hsl(52,100%,50%);	}



h1 {	padding:33px 5% 33px 5%; margin:111px 0 0 0; font-size:222%;  font-weight:normal;  text-align:center;  color:hsl(0,0%,100%); background-color: hsl(240,60%,30%);  font-family: 'Archivo Black', sans-serif;   }
h2 {	padding:1em 0 0 0;  margin:33px 0 0 0;  font-size:144%;    }
h3 {	padding:0;  margin:22px 0 11px 0;  font-size:122%;     }
p {	padding:22px 0 0 0;  margin:0;  font-size:111%;  line-height:155%;   }
.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%;   }
.leveeotsikko {	padding:33px 5% 33px 5%;  margin:111px 0 0 0; font-size:222%;  font-weight:normal;  text-align:center;  color:hsl(0,0%,100%); background-color: hsl(240,60%,30%);  font-family: 'Archivo Black', sans-serif;   }


.sivualue {	padding:0 0 0 0;  width:100%;  display:table; 	}
.alueimage {	position:relative;  background-image:url(kuvat/kuva0.jpg);  background-size:1920px;  background-position:10% 0px;   width:100%;  display:table; 	}
.sisakuvapysty {	height:555px; margin:44px 5% 77px 0;  float:right; display:block; 	}
.sisakuvavaaka {	width:777px;  height:auto;  max-width:80%;  margin:77px 10% 44px 10%;  display:none;  	}




.logolohko { 	width:444px;  margin: 0 0 55px 0;  padding:99px 7% 55px 7%;  float:left; display:table;    }
.logokuva {	width:444px;  margin: 0 auto;      }
.logoteksti {	font-size:222%;  margin:11px 0 0 0;  color:hsl(240,60%,30%); text-align:center;  font-weight:bold;  text-shadow:1px 1px hsl(0,0%,70%);   word-spacing:0.1em;  letter-spacing: 0.09em;      }
.haivelogo {	width:80%;  margin:17px auto 17px auto;  height:2px;  
		background: linear-gradient( 90deg, transparent , hsl(0,0%,80%) , transparent );  }
.haiveviiva1 {	width:70%;  margin:33px auto 0px auto;  height:1px;  background: linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent ); 	}
.haiveviiva2 {	width:70%;  margin:99px auto -44px auto;  height:1px;  background: linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent ); 	}
.haiveviiva3 {	width:70%;  margin:66px auto 44px auto;  height:1px;  background: linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent ); 	}

	.sloganimage {	width:12em;  margin:77px 3% 0 0;  padding: 0.5em 1em;  float:right; text-align:center;  font-size:188%;  
		word-spacing:0,2em;  letter-spacing:0.1em;  color:hsl(0,0%,100%);  background-color:hsla(0,0%,100%, 0.7); text-shadow:1px 2px hsl(0,0%,22%);   
		border:2px hsl(0,0%,100%) solid;  border-radius:22px;  }



.aluenavi {	position:absolute;  bottom:11px;  width:100%;  font-size:1.2em;  height:3em;   display:table;   }
nav {		width:39.5em;  margin:0 auto; z-index: 111;  display:table;     }
ul { 		list-style-type:none;  margin:0;  padding:0;  position:absolute;    }
li { 		display:inline-block;  float:left;	 }			
li a { 		width:13em;  min-width:9em;  margin:0 1px;  font-weight:bold; 
		height:3em;  line-height:3em; color:hsl(0,0%,100%);  
		background:linear-gradient( hsl(240,60%,30%) , hsl(240,60%,60%) );
		text-decoration:none;  text-align:center;  display:block;     }	
li:hover a { 	background:hsl(52,100%,50%);   color:hsl(0,0%,100%);  }								
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: 4px;  right: 4px;  position: fixed;   }
.nnk:link { 	background-image: url(kuvat/nnk255.png);   }
.nnk:visited { 	background-image: url(kuvat/nnk255.png);     }
.nnk:hover { 	background-image: url(kuvat/nnk255.png); background-color: hsl(52,100%,50%); }
.nnk {	 	background-color:hsl(240,60%,30%);  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:5px;  }


.alueingressi {	width:100%;  background-color: hsl(240,60%,70%);  display:flex;  flex-wrap:wrap;    }
.ingressivasen {	margin:0;  padding: 55px 5% 22px 9%;  width:65%;    }
.ingressiteksti  {	padding:0 0 33px 0;  margin:0;  font-size:155%;  font-weight:bold;  line-height:166%;  color:hsl(0,0%,100%);   word-spacing:0.1em;  letter-spacing:0.07em; }
.ingressioikea {	margin:33px auto;  padding:33px 5% 22px 5%;  width:30%;    }
.ingressipampula {	padding:0px 0px 0px 44px;  margin:0 0 15px 0;   font-size: 177%;  color:hsl(0,0%,0%);  font-weight:bold; 
		background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position: 0 0.56em;  
		background-repeat: no-repeat;  line-height:155%;    }


/*	oooooooooooooooooooooooooooooooooooooooooooooooooo	*/

.aluevakio {	width:100%;  padding: 0 9%;  display:table; 	}

.kuvateksti {	padding:11px 3%;  text-align:center;  font-size:100%;  }
.kuvateksti2 {	padding:11px 3%;  text-align:center;  font-size:100%;  background-color:hsla(240,60%,70% , 0.4); }



.boxialuea {	width:100%;  margin:66px 0 0 0;  display:table;  position:relative; 	}
.boxiav  {	width:80%;   background-image:url(kuvat/kuva21.jpg);  background-size:cover;  background-position:0 0;   min-height:555px;  }
.boxiao {		width:600px;  padding:11px 2% 22px 4%; position:absolute;  top:55px;  right:0%;  }
.boxialueb {	width:100%;  margin:66px 0 0 0;  display:table;  position:relative; 	}
.boxibv  {	width:600px;  padding:11px 2% 22px 4%;  position:absolute;  top:55px;  left:0%;   }
.boxibo  {	width:80%;  float:right;  background-image:url(kuvat/kuva22.jpg);  background-size:cover;  background-position:0 70%;   min-height:555px; }

.boxiteksti1  {	padding:22px 0 0 0;  margin:0;  font-size:111%;  line-height:155%; 	}


.boxialue2 { 	width:100%; margin:33px 0 0 0; display:flex; justify-content:space-between; }
.boxi2 { 		width:45%; margin:33px 0 0 0; } 
.boxikuva2 { 	width:100%;    } 
.boxipilari2 {	 	}
.kuvaboxi2 {		}

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



.alueyhteys {	width:100%;  margin:66px 0 0 0;  padding:55px 4%;  background-image:url(kuvat/yhteystausta.jpg);   background-size:1920px;  
		background-position:0 50%; display:flex;  justify-content:space-around; flex-wrap:wrap;  } 

.yhteysboxi1 {	margin:22px 0;  padding: 33px 0; width:45%;  	}
.yhteysotsikko {	font-size:155%;  padding:0px 5% 22px 9%;  margin:0;  color:hsl(240,60%,30%);  font-family: 'Alfa Slab One', cursive;	}
.yhteysteksti {	font-size:133%;  padding:5px 5% 0px 9%;  margin:0;  	}
.yhteysrako {	margin-top:1em; 	}

.yhteysboxi2 {	margin:22px 0;  width:25%;  height:222px; 	}

.aluealin {	padding:1.5em 5%;  margin:0;  text-align:center;  font-size:144%;  font-weight:bold;  color:hsl(0,0%,100%);  background:linear-gradient( hsl(240,60%,30%) , hsl(240,60%,50%) ); 	}






/*    galleria    .......................................................................................................................................................        */

.ggbody, html {	height:100%;  margin:0;  }
.gg {	width:100%;  height:100%;  position:relative;    }
.gg100 {	background-image:url(gg/gg100.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg110 {	background-image:url(gg/gg110.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg120 {	background-image:url(gg/gg120.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg130 {	background-image:url(gg/gg130.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg140 {	background-image:url(gg/gg140.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg150 {	background-image:url(gg/gg150.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg160 {	background-image:url(gg/gg160.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg170 {	background-image:url(gg/gg170.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg180 {	background-image:url(gg/gg180.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg190 {	background-image:url(gg/gg190.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }
.gg200 {	background-image:url(gg/gg200.jpg); background-position: 50% 50%;  background-size:cover;  background-position:50% 50%;      }


.ggsivualue {	width:100%;  max-width:1920px;  	}
.gglogoele {	width:300px;  margin:22px; padding:22px;  background-color:hsl(0,0%,100%);  float:left;    }
.gglogokuva {	width:80%;  max-width:333px;  margin:0 auto;	}

.gglinkkiele {	width:230px;  margin:33px 0;  padding: 0 10px;  float:left;  background-color:transparent;   	}
.gglinkkinappi {	width:50px;  margin: 0 10px;  zzbackground-color:hsl(0,0%,88%);  float:left;   	}

.ggtakaisin:link { 		background-image:url(kuvat/nnkkv255.png);   }
.ggtakaisin:visited { 	background-image:url(kuvat/nnkkv255.png);     }
.ggtakaisin:hover { 	background-image:url(kuvat/nnkkv255.png);  background-color:hsl(240,100%,50%);  }
.ggtakaisin {		height:50px;  width:50px;  border-radius:50%;  background-size:25px;  background-position:42% 50%; background-color:hsl(40,100%,50%);   background-repeat:no-repeat;  display:block;  text-decoration:none; }    

.ggedellinen:link { 	background-image:url(kuvat/nnkv255.png);   }
.ggedellinen:visited { 	background-image:url(kuvat/nnkv255.png);     }
.ggedellinen:hover { 	background-image:url(kuvat/nnkv255.png);  background-color:hsl(240,100%,50%);  }
.ggedellinen {		height:50px;  width:50px;  border-radius:50%;  background-size:25px;  background-position:41% 50%; background-color:hsl(40,100%,50%); background-repeat:no-repeat;  display:block;  text-decoration:none;   }

.ggseuraava:link { 		background-image:url(kuvat/nnko255.png);   }
.ggseuraava:visited { 	background-image:url(kuvat/nnko255.png);     }
.ggseuraava:hover { 	background-image:url(kuvat/nnko255.png);  background-color:hsl(240,100%,50%);  }
.ggseuraava {		height:50px;  width:50px;  border-radius:50%;  background-size:25px;  background-position:59% 50%; background-color:hsl(40,100%,50%); background-repeat:no-repeat;  display:block;  text-decoration:none;  }

.ggtekstiele {	float:right;  width:555px;  background-color:hsla(0,0%,33%, 0.7);  margin:0;  padding:22px 5%;  }
.ggpaaotsikko {	padding:33px 0 0 0; margin:0;  font-size:166%;  font-weight:bold; color:hsl(20,0%,100%);  text-align:left;    }
.ggapuotsikko {	padding:33px 0 0 0; margin:0;  font-size:144%;  font-weight:bold; color:hsl(20,0%,100%);  text-align:left;    }
.ggp {		padding:19px 0 0 0;  margin:0;  font-size:122%; font-weight:bold;  color:hsl(20,0%,100%);   line-height:155%;   }
.ggpampula  {	padding:0px 0px 0px 33px;  margin:3px 0 3px 1%;  font-size: 111%; font-weight:bold;  color:hsl(20,0%,100%);   background-image:url(kuvat/pallovalkea.png);  background-size:0.4em;  background-position: 0 0.56em;  background-repeat: no-repeat;  line-height:155%;   }
.ggraamit {	margin:1em 0 0 0;  padding:19px 2% 19px 5%; border:2px hsl(0,50%,50%) solid;  background-color:hsl(0,0%,0%);	}
	



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


.sisakuvapysty {	display:none; 	}
.sisakuvavaaka {	display:block; }



.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%;  box-sizing:content-box;   }			
li a { 		padding:1em 0px;  margin:3px 0;   }	


.nnv {	 	background-image: url(kuvat/nnv255.png);  background-color:hsl(240,60%,30%);
		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 hsl(0,0%,100%) solid; border-radius:5px;  }
.nnv:link {	       }
.nnv:visited {	       }
.nnv:hover {	background-image: url(kuvat/nnv255.png);  background-color:hsl(52,100%,50%);      }

.ingressivasen {	margin:0;  padding:55px 7% 11px 7%;  width:100%;   }
.ingressioikea {	margin:0;  padding:44px 7% 33px 7%;  width:100%;   }
.ingressipampula {	margin:5px 33px; display:inline-block;   }

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

.boxialuea {	width:100%;  margin:33px 0 0 0;  display:table;  position:static; 	}
.boxiav  {	width:100%;  height:555px;  }
.boxiao  {	width:100%;  margin: 0 0 0 0;  padding:11px 2% 22px 5%;   position:static;  }
.boxialueb {	width:100%;  margin:66px 0 0 0;  display:flex;  position:static; flex-direction:column-reverse; 	}
.boxibv  {	width:100%; padding:11px 2% 22px 5%;  position:static;   }
.boxibo  {	width:100%;  float:none;  }

.boxiteksti1  {	padding:22px 0 0 0;  margin:0;  font-size:111%;  line-height:155%; 	}

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



/*    ggleria    .......................................................................................................................................................        */

.gglogoele {	width:100%;  margin:0;  padding:22px;	  }
.ggtekstiele {	margin:666px 0 0 0; width:100%;   	}

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









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

.ingressipampula {	width:90%;  padding:0px 0px 0px 9%;  margin:5px 0 5px 10%;     }

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

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


.alueyhteys {	padding:55px 2%;  } 
.yhteysboxi1 {	width:100%;       }
.yhteysboxi2 {	width:100%;       }
	

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




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

.sloganimage {	margin:33px auto 55px auto;  float:none;  width:80%;  max-width:444px;  }


.logolohko { 	width:100%;  padding:99px 7% 55px 7%;    }
.logokuva {	width:80%; margin: 0 auto;      }
.logoteksti {	font-size:188%;        }



.aluenavi {	max-width:100%;  width:calc(100% - 8px);  top:4px;  right:4px;        }
nav {		width:100%;   }
ul { 		width:calc(100% + 8px);  margin-left:-4px; 	 }
	
.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:3%;  padding-right:3%; 	}

.yhteysotsikko {	padding:0px 3% 22px 5%;  	}
.yhteysteksti {	padding:5px 3% 0px 5%; 	}
.yhteysboxi1 {	padding-left:5%;  	}
				}	/*	----------------------------------------------------------------------	*/








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

/*	kestotietoa	*/

.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; }

.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)	{	
	}	
/*	========================================================================================================================	*/
/*	========================================================================================================================	*/