.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(210,100%,50%);	color:rgb(0,126,255);	}
.linkkitausta {	background-color:hsl(210,100%,33%);	}
.konigsblau {	background-color:hsl(233,100%,27%);	color:rgb(0,15,137);	}
.innoventa {	background-color:hsl(0,0%,40%);	color:rgb(102,102,102);	}


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

h1 {	font-size:177%;  padding:11px 0 22px 0;  margin:0;  width:100%;  font-weight:normal;  word-spacing:0.14em;  letter-spacing:0.07em;  font-family: 'Quicksand', sans-serif;  }
h2 {	text-align:center; font-size:177%;  padding:11px 0 22px 0;  margin:0;  width:100%;  font-weight:normal;  word-spacing:0.14em;  letter-spacing:0.07em;  font-family: 'Quicksand', sans-serif;   }
h3 {	margin:22px 0 0 0;  padding:0;  font-size:122%;     }
p {	margin:11px 0 0 0;  padding:0;  font-size:111%;  line-height:155%;   }
.kursiivi {	margin:33px 0 0px 0;   font-style:italic;   font-size:122%; 	}
.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%;   }

.puhuttelu {	text-align:center; margin:11px 0 0 0;  padding:0;  font-size:100%;  line-height:155%;   }


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

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

.alueimage {	height:777px; padding:0 0 33px 0;  width:100%;  position:relative; 
		background-image:url(kuvat/kuva0.jpg); background-size:1920px;  
		background-position:50% -255px;  background-repeat:no-repeat;  display:table;    }





/*    logo ingressi	==============================================================================================================	*/

.logolohko { 	width:100%;  margin:33px auto 0 auto;  background:hsla(0,0%,100%, 0.6);  display:table;   }
.logokuva {	width:90%; max-width:444px; margin:55px auto;    }
.logoteksti1 {	text-align:center;  padding:22px 0 0 0;  font-size:144%;  color:hsl(210,100%,50%);  word-spacing:0.1em;  letter-spacing:0.09em;      }
.logoteksti2 {	text-align:center;  padding:9px 0 44px 0;  font-size:144%;  color:hsl(210,100%,50%);  word-spacing:0.1em;  letter-spacing:0.09em;      }
.haiveviiva { 	height:1px;  width:66%;  margin:11px auto;  background:linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }
.haiveviiva33 { 	height:1px;  width:66%;  margin:33px auto;  background:linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }
.imageslogan {	width:100%;  max-width:1444px;  margin:33px auto 0 auto;  padding:0 66px; font-size:144%;  text-align:center;    
		font-weight:bold;  color:hsl(210,100%,50%);  color:hsl(0,0%,0%);   word-spacing:0.2em;  letter-spacing:0.1em;   }

.ingressiteksti {	padding:22px 0 33px 0;   font-size:155%;  word-spacing:0.1em;  letter-spacing:0.09em;     
		line-height:166%; font-style:italic;  font-family:"Abyssinica SIL", "Liberation Serif", FreeSerif, Serif;	 }
.taustakuvaingressi {	border-radius:22px;  background-image:url(kuvat/taustakuvaingressi.jpg);  background-size:cover;  background-position:50% 50%;  min-height:222px;  }



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

nav {	width:49.5em;  left:calc(50% - 24.75em);  bottom:12em;  position:absolute;  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:2.9em 0 0.5em 0;  width:7em;  min-width:4em;  margin:0 2em;  height:7em; border-radius:50%; font-size:150%;
	color:hsl(0,0%,100%);  background:hsl(210,100%,33%); text-align:center;  line-height:1em;  text-decoration:none;  }

li:hover a { 		background-color:hsl(210,100%,50%);  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:9px;  right:9px;  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(210,100%,50%);   }
.nnk {	 	background-color:hsl(210,100%,33%);  border-radius:50%;  border:1px hsl(0,0%,100%) solid;  
		height:50px;  width:50px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



.tekstilinkki:link {	color:hsl(210,100%,50%);   text-decoration:underline; }  
.tekstilinkki:visited {	color:hsl(210,100%,50%); text-decoration:underline; }
.tekstilinkki:hover {	color:hsl(346,81%,79%);   text-decoration:none; }




/*    boxit	==============================================================================================================	*/

.boxialue2 {	margin:66px 0 0 0; width:100%;  display:flex; justify-content:space-between;  flex-wrap:wrap;	}
.boxi2 {		width:45%;       }
.boxi2 .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%;   }
.boxikapee {	width:30%;	}
.boxilevee {	width:60%;	}

.materiaalilohko {	margin:0;  padding: 22px 0;  width:100%;  display:flex;  justify-content:space-around;  }
.materiaali {	width:25%;  max-width:188px;   margin:0;   border-radius:50%;    }

.kuultoalue {	position:absolute;  bottom:22px;  width:100%;   }
.taustakuva2 {	border-radius:22px;  position:relative;  background-image:url(kuvat/taustakuva2.jpg);  background-size:cover;  background-position:50% 0%;   min-height:555px;  }
.kuultootsikko {  	font-size:144%;  margin:0;  padding:0.7em 2em;  text-align:center;
		color:hsl(0,0%,100%);  background-color:hsla(210,100%,50%, 0.7);  width:100%;  text-align:center;  font-weight:normal;	}








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

.yhteystausta {	background-color:hsla(210,100%,50%, 0.2);  width:100%;  display:table; 	}
.alueyhteys {	padding:66px 6%;  width:100%;  max-width:1600px;  margin-left:auto;  margin-right:auto;  padding-left:3%;  padding-right:3%; 
		display:flex;  justify-content:space-between;  flex-wrap:wrap; 	}

.yhteysboxivasen {	width:450px; 	}
.yhteysotsikko {	color:hsl(0,0%,10%);  font-size:122%;  font-weight:bold; margin:0;  padding:7px 0 0 0;   word-spacing:0.14em;  letter-spacing:0.07em;    }
.yhteystieto {	color:hsl(0,0%,10%);  font-size:100%;  margin:0;  padding:7px 0 0 0;   word-spacing:0.14em;  letter-spacing:0.07em;    }
.yhteysrako {	margin-top:19px;	}

.yhteysboxikartta {	width:calc(100% - 450px);  height:500px; margin:0;  padding:20px;  
		background-image:url(kuvat/taustakuvayhteys.jpg);  background-size:cover;  background-position:0% 60%;   min-height:333px;    }
.karttaele {	height:300px; width:300px; float:left; 	}



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

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

.aluekuvagalleria {		width:100%;  padding: 77px 7%; 	}
.keskitetytkuvat { 		width:100%; text-align:center; display:table;  }
.keskitettykuvaele {	display:inline-block; margin:2.18ex 2ex;   /*  margin:0.18ex 0;  */	}
.keskitettykuvaele img {	height:333px;  	}
.leveeteksti {		text-align:center;  margin:55px 0;  font-size:133%; 	}
.taustavari {		margin:55px 0 22px 0;  padding-bottom:55px;  background-color:hsla(210,100%,50%, 0.2);	}



.aluekuvagalleria {		width:100%;  padding: 44px 7% 0 7%; display:table; 	}
.kuvalohko { 		width:100%;  display:flex;  flex-wrap:wrap;  }
.kuvaele {		width:30%;  margin:22px 1.6%;    	}
.kuvaele img {			}
.kuvalohko p {		margin:0;  padding:5px 5% 0 5%;  text-align:center; font-size:99%;   }


.aluealin {	padding:33px 66px;  width:100%;  background-color:hsl(210,100%,50%);  display:table;  position:relative; }
.alalause {	text-align:center;  font-size:133%;  color:hsl(0,0%,100%);     }
.puumerkki {	position:absolute; font-size:88%;  padding:0;  margin:0;  left:3%;  bottom:11px;    }
.puumerkkilinkki:link {	color:hsl(210,100%,51%);  text-decoration:none; }  
.puumerkkilinkki:visited{	color:hsl(210,100%,51%);  text-decoration:none; }
.puumerkkilinkki:hover {	color:hsl(346,81%,79%);  text-decoration:underline; }


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






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

.imageslogan {	width:100%;  margin:55px 0 0 0;  padding:0 66px; text-align:center;  }
.boxi2 {		width:48%;       }
.yhteysboxiraami {	width:100%;  margin:55px 0 0 0px;     }

	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	






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

.alueingressi {	padding:77px 3% 88px 3%;    	}
.ingressivasen p {	font-size:133%;     }
.pampula {	font-size:122%;  }

nav {	width:31.5em;  left:calc(50% - 15.75em);  bottom:12em;  position:absolute;  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:2.5em 0 0.5em 0;  width:6em;  min-width:4em;  margin:0 0.5em;  height:6em; border-radius:50%; font-size:150%;
	color:hsl(0,0%,100%);  background:hsl(210,100%,33%); text-align:center;  line-height:1em;  text-decoration:none;  }


.boxialue2 {	margin:33px 0 0 0; 	}
.boxi2 {		width:100%;   margin-top:33px;    }


.alueyhteys {	padding:66px 3%;   	}
.yhteysboxivasen {	padding:0 3% 0 3%;  margin:0 auto;  width:100%;  max-width:444px;  }
.yhteystekstilohko{	padding:0;  width:100%;     }
.yhteysboxikartta {	width:100%;  margin:66px 0 0 0;     }


.kuvaele {	width:47%;  margin:22px 1.5%;   	}
.kuvaele img {		}

	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	








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

.leveeotsikko {	font-size:144%;  padding:66px 3% 0 7%;    }

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

.logolohko { 	max-width:100%;  width:100%;     }
.logokuva {	max-width:333px;     }
.imageslogan {	font-size:144%;  }



.kuvaele {	width:100%;  max-width:666px;  margin:22px auto;   	}

.yhteysboxiraami {	margin-top:22px;  width:100%;  }
.yhteysboxikartta {	width:100%;  margin:66px 0 0 0;     }

.puumerkki {	left:3%;  bottom:5px;    }

	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	










/*	kestotietoa yyy   kerään tähän kaikki kestoteidot ja käytän pohjana	*/
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/

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

.ypad66 { 	padding-top:66px; }
.ypad33 { 	padding-top:33px; }
.ypadnolla { 	padding-top:0; }
.apad66 { 	padding-bottom:66px; }
.apad33 { 	padding-bottom:33px; }
.apadnolla { 	padding-bottom:0; }

.ymarg66 { 	margin-top:66px; }
.ymarg33 { 	margin-top:33px; }
.ymargnolla { 	margin-top:0; }
.amarg66 { 	margin-bottom:66px; }
.amarg33 { 	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/taustakuva.jpg);  background-size:cover;  background-position:0 0;   min-height:333px;  }

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








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

@media screen and (max-width :111px)	{	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/