.div {	border:1px red solid; 	}

body {	margin:0;  word-spacing:0.1em;  letter-spacing:0.07em;   background-color:hsl(92,86%,96%);
	font-family: "Lucida Sans", Tahoma, "Palatino Linotype", "Liberation Sans", "DejaVu Sans", "Bitstream Vera Sans", Arial, Helvetica, "sans-serif";   }
/*
	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;	}



.perusvarivihree {		color:hsl(92,86%,37%);	background-color:rgb(91,178,13);		}


h2 {		margin:33px 0 22px 0; padding:0;  font-size:222%;     }
p {		margin:15px 0 0 0;   padding:0;  font-size:133%;  line-height:155%;   }
.pampula {	margin:5px 0 0 5%;  padding:0 0 0 33px;  background-position:0 12px;  
		font-size:122%;  background-size:0.4em;  background-image:url(kuvat/pallomusta.png);  background-repeat: no-repeat;  line-height:155%;   }


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

.sivualue {	border-width:11px 0;  border-color:hsl(0,0%,0%);  border-style:solid;  width:100%;  max-width:1920px;   display:table;  }
.aluevakio {	width:100%;  max-width:1700px;  margin-left:auto;  margin-right:auto;  padding-left:3%;  padding-right:3%;  display:table;  }



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

.alueimage {	width:100%;  background-image:url(kuvat/kuvatausta.jpg);  background-size:1920px;  display:table;  	}
.logolohko {	margin:0px 0 0 9%;  padding:66px 0 55px 99px;  width:80%;  max-width:666px;  float:left;  background-color:hsla(0,0%,100%, 0.3); 	}
.logokuva {		}
.logo1 {		width:39%; 	}
.logo2 {		width:70%;  margin-top:11px;  }
.logoteksti {	margin:22px 0 0 0;  font-size:199%;  word-spacing:0.2em;  letter-spacing:0.1em;  	}
.imageslogan {	margin:99px 7% 33px 0;  padding:0;  text-align:right;  color:hsl(0,0%,99%);  text-shadow:2px 1px hsl(0,0%,0%);  font-style:italic;  font-size:222%;  
		width:12em; float:right;  line-height:155%;  display:table;  }



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

.boxialue2 {	margin:0 auto; width:90%;  display:flex;  justify-content:space-around; flex-wrap:wrap;  	}
.boxi2 {		width:46%;  margin:66px 0 0 0;  padding:44px 5%;  border-radius:0px;      }




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

.alueyhteys {	margin:111px auto 0 auto;  width:100%; background-image:url(kuvat/kuvatausta.jpg);  background-size:1920px;  display:flex;  flex-wrap:wrap;  }
.yhteysboxi1 {	width:45%;  	}
.yhteysboxi2 {	width:55%;  padding:0px 0 0px 0;  }


.yhtele {		margin:0;   padding:33px 5% 11px 5%;  width:100%;  background-color:hsla(0,0%,100%, 0.3); text-align:center;  display:table;  }

.yhtotsikko {	margin:0;  padding: 0;  color:hsl(0,0%,0%);  font-size:177%; 	}
.yhtteksti {	margin:17px 0 0 0;  color:hsl(0,0%,0%);  font-size:133%;   	}
.yhthaive {	background:linear-gradient( 90deg, transparent , hsla(0,0%,0%, 0.5) , transparent );  margin:22px auto;  height:1px;  width:77%;  max-width:333px; }
.yhtposti {	margin:13px 0;  color:hsl(0,0%,0%);  font-size:133%;   	}

.yboxi1 {		width:50%;   padding:22px 5% 22px 15%; display:table;  float:left; 	}
.yboxi2 {		width:50%;   padding:22px 5% 44px 1%; display:table;  float:left; 	}


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

.taustakuva1 {	min-height:555px;  background-position:20% 0%;   background-size:cover;  background-image:url(kuvat/kuva1.jpg);    }
.taustakuva2 {	min-height:555px;  background-position:25% 0%;  background-size:cover;  background-image:url(kuvat/kuva2.jpg);    }
.oikeaensin {		}

.nnkele {	 	bottom:24px;  left: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/nnk0.png);  background-color:hsl(92,86%,77%);  }
.nnk {	 	background-color:hsl(92,86%,37%);  height:50px;  width:50px;  border-radius:0px; background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }




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









@media screen and (max-width : 1300px)	{	

.logokuva {		}
.imageslogan {	margin:0;  padding:33px 3% 55px 14%;  text-align:left;  width:100%;  max-width:100%;  float:none;    }


.boxi2 {		width:80%;  margin:33px auto 0 auto;   padding:44px 5%;   }
.oikeaensin { 	flex-direction:column-reverse; }


.yhteysboxi1 {	width:100%;  	}
.yhteysboxi2 {	width:100%;    }



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









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


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

.logolohko {	margin:0 auto;  padding:55px 0 55px 15%;  width:80%;  max-width:80%;  float:none; 	}
.logoteksti {	font-size:166%;  	}
.imageslogan {	margin:0;  padding:33px 3% 55px 3%;  text-align:center;  font-size:177%;      }

h2 {		margin:0px 0 22px 0;  font-size:133%;     }

.yboxi1 {		width:40%;   padding:22px 0% 22px 0%;  	}
.yboxi2 {		width:60%;   padding:22px 0% 44px 0%; 	}


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










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


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

.logolohko {	margin:0 auto;  padding:55px 0 55px 15%;  width:100%;  max-width:100%;	}
.yhtele {		padding:33px 2% 30px 5%;  width:100%;  }

.boxi2 {		width:96%;  margin:33px auto 0 auto;   padding:44px 0%;   }
.yboxi1 {		width:100%;   padding:22px 0% 22px 0%;   float:none;  text-align:center; 	}
.yboxi2 {		width:100%;   padding:22px 0% 44px 0%;   float:none;  text-align:center; 	}

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







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

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

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