.div {	border:1px red solid;	}

body {	background-position:20% 0%;  margin: 0; color: rgb(0,0,0);  word-spacing: 0.1em;  letter-spacing: 0.07em;  
	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(220,100%,33%);	color:rgb(0,56,168);	}
.perusvari2 {	background-color:hsl(220,100%,31%);	color:rgb(0,53,158);	}
.taustatumma {	background-color:hsl(220,100%,22%);	}
.taustavaalea {	background-color:hsl(220,100%,88%);	}
.taustahaalea {	background-color:hsl(220,100%,95%);	}

.tekstitausta {		padding:11px 2% 22px 3%;  background-color:hsl(0,0%,100%); 	}
.tekstitaustakapea {	padding:33px 1% 22px 2%;  background-color:hsl(0,0%,100%); 	}
.tekstitaustahaalea {	padding:11px 2% 22px 3%;  background-color:hsl(220,100%,95%); 	}
.tekstitaustailmava {	padding:44px 3% 33px 5%;  background-color:hsl(0,0%,100%); 	}


h1 {		margin:0;  padding:99px 3% 0 3%;  text-align:center; font-size:222%;  font-weight:normal;  	}
.emulaatioh1 {	margin:0;  padding:99px 3% 0 3%;  text-align:center; font-size:222%;  font-weight:normal;  	}
h2 {		margin:0;  padding:22px 0 11px 0;  margin:0;  font-size:155%;    font-family: 'Oswald', sans-serif;		}
.leveeotsikko {	margin:0;  padding:99px 3% 0 3%;  text-align:center; font-size:155%; 	}
h3 {		margin:0;  padding:22px 0 5px 0;  font-size:122%;    	}
p {		margin:0;  padding:11px 0 11px 0;  font-size:122%;  line-height:155%;	}
.vahvateksti {	margin:66px auto 33px auto;  padding:0 5%;  font-size:222%;  line-height:166%;	
		text-align:center;  width:100%; max-width:999px;  font-family: 'Oswald', sans-serif;	}
.leveeteksti {	margin:33px auto 11px auto;  padding:0;  font-size:155%;  font-style:italic; 
		width:100%;  text-align:center; max-width:999px;  line-height:155%;	}
.pampula {	margin:7px 0 7px 0; padding:0 0 0 33px;  font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position: 0 0.5em;  background-repeat: no-repeat;  line-height:144%;  }



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

.sivualue {	border-width:0; background-color:hsl(0,0%,96%);  width:100%;  max-width:1920px;  display:table;	}
.aluevakio {	padding:0 7%;  width:100%;  margin:0 auto;  display:block;  	}



/*    ============================================================================================================================	*/
/*    ============================================================================================================================	*/
/*    ============================================================================================================================	*/
/*    image a	==============================================================================================================	*/

.alueimage {	width:100%;  padding:0 3%;  display:flex;  justify-content:space-around;  flex-wrap:wrap;   
		background-image:url(kuvat/kuva0.jpg);  background-size:1920px;  background-position:55% 55%;  width:100%;  	 }
.indexb  { 	   }
.logolohko { 	width:100%;  margin:111px 0 0 0;  padding:22px 2%;  background-color:hsl(0,0%,100%);    }
.logokuva { 	width:70%;  max-width:333px;  margin:33px auto 0 auto;     }
.logoteksti {	padding:11px 0 0 0;  margin:0;  font-size:144%;  font-weight:bold;  text-align:center;  line-height:155%; color:hsl(220,100%,31%); word-spacing:0.3em;  letter-spacing: 0.1em; 	}

.indexb1 {	width:600px;    }
.indexb2 {	width:calc(40% - 400px);  background-image:url(kuvat/indexb2.jpg);  background-size:cover;  background-position:66% 0;   min-height:555px;  }
.indexb3 {	width:calc(40% - 400px);  background-image:url(kuvat/indexb3.jpg);  background-size:cover;  background-position:55% 0;   min-height:555px;  }



.imageslogan {	padding:0;  max-width:555px; font-size:188%;  font-style:italic;  color:hsl(0,0%,100%);  
		position:absolute;  bottom:111px;  left:8%;  line-height:155%;  text-shadow:1px 1px hsl(220,100%,60%);  }

.linkkialue {		width:100%;  text-align:center;  font-weight:bold;  font-size:122%;   display:table; 	}
.linkkinappi {		width:30%;  margin:1em 0.1em;   display:inline-block;    }
.linkkiteksti:link { 	color:hsl(0,0%,100%);       }
.linkkiteksti:visited { 	color:hsl(0,0%,100%);      }
.linkkiteksti:hover { 	color:hsl(0,0%,100%);  background-color:hsl(220,100%,88%);      }
.linkkiteksti {	 	padding: 0.5em 0em;  border-radius:0em;  text-align: center;  display: block;   
			background-color:hsl(220,100%,31%);  text-decoration: none; }


.nnkele {	 	bottom:11px;  right:11px;  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(220,100%,22%);  }
.nnk {	 	background-color:hsl(220,100%,31%);  height:40px;  width:60px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }


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





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

.tekstilinkki:link {	color: rgb(49,79,149);   text-decoration: underline; }  
.tekstilinkki:visited {	color: rgb(155,155,155); text-decoration: underline; }
.tekstilinkki:hover {	color: rgb(255,145,0);   text-decoration: none; }




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

.boxialue2 {	margin:99px 0 0 0;  width:100%;  display:flex;  justify-content:space-between;  flex-wrap:wrap;  } 
.boxi2 {		width:50%;     }
.boxi2levee {	width:calc(100% - 222px);  background-image:url(kuvat/boxi2levee.jpg);  background-size:cover;  background-position:50% 70%;   min-height:444px;  }
.boxi2kapee {	width:222px; 	}

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

.boxialuekuvake3 {	margin:99px 0 0 0;  width:100%;  display:flex;  justify-content:space-around;  flex-wrap:wrap;  } 
.boxikuvake {	width:20%; 	}
.leveekuvake {	width:100%;  margin:0 auto;    }

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

.kuvateksti {	padding:17px 3% 11px 3%;  margin:0;  font-size:99%;  line-height:155%;	}



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

.yhteysalue {	padding:44px 13%;  width:100%;  margin:111px auto 0 auto;  display:flex;  justify-content:space-between;  flex-wrap:wrap;
 		background:linear-gradient( hsl(0,0%,0%) , hsl(0,0%,33%) );       }  

.yhteysboxi {	color:hsl(0,0%,100%);  	}
.yhteysboxi1 {	width:calc(45% - 111px);  padding:22px 5% 22px 3%;   	}
.yhteysboxi2 {	width:calc(45% - 111px);  padding:22px 5% 22px 0;   	}
.yhteysboxik {	width:222px;  padding:0;   	}

.yhteysotsikko {	font-size:155%;  margin:11px 0;  font-weight:bold;  	}
.yhteysteksti {	font-size:133%;  margin:7px 0;  	}
.yhteysrako {	margin-top:1em; 	}
.karttateksti {	font-size:99%;  margin:0;  	}





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

.taustailmavahaalea {	padding:44px 3% 22px 5%;  background-color:hsl(220,100%,88%);	}
.tausta1 {		background-image:url(kuvat/tausta1.jpg);  background-size:cover;  background-position:0 0;   min-height:555px;  }





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

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

.logokuva { 	width:70%;  max-width:333px;  margin:33px auto 0 auto;     }
.logoteksti {	text-align:center;  	}

.indexb2 {	width:calc(40% - 300px);  background-image:url(kuvat/indexb2.jpg);  background-size:cover;  background-position:66% 0;   min-height:555px;  }
.indexb3 {	width:calc(40% - 300px);  background-image:url(kuvat/indexb3.jpg);  background-size:cover;  background-position:55% 0;   min-height:555px;  }


.yhteysalue {	padding:44px 3%;      } 


	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	






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

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

.logolohko { 	margin:33px 0 0 0;   }
.logokuva { 	width:70%;  max-width:333px;  margin:33px auto 0 auto;     }


.indexb1 {	width:100%;    }
.indexb2 {	width:40%;  background-position:66% 50%;   min-height:333px;  }
.indexb3 {	width:40%;  background-position:55% 25%;   min-height:333px;  }

.boxikuvake {	width:30%; 	}

.imageslogana {	width:333px;  font-size:144%;  bottom:33px;     }

.oikeaensin1200 { 	flex-direction:column-reverse; }

.boxialue4 {	margin:99px 0 0 0;  width:100%;  display:flex;  justify-content:space-between;  flex-wrap:wrap;  } 
.boxi4 {		width:48%;   margin: 0 0 55px 0;    }



.yhteysboxi {	width:45%;    	}
.yhteysboxi1 {	padding:22px 1% 22px 5%;   	}
.yhteysboxi2 {	padding:22px 5% 22px 0%;   	}
.yhteysboxik {	width:100%;  margin-top:33px; 	}

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






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

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

.logolohkoa { 	margin:22px auto 22px auto;  padding:22px 1;  float:none;     }
.aluevakio {	padding-left:3%;  padding-right:3%;  }

.vahvateksti {	font-size:155%; 	}

.boxi2 {		width:100%; 	}
.boxi4 {		width:44%;  padding-bottom:33px;  }

.boxikuvake {	width:90%;  max-width:444px;  margin:22px auto;  	}

.oikeaensin900 {	flex-direction:column-reverse; 	}



.yhteysboxi {	width:100%;    	}
.yhteysboxi1 {	padding:22px 3% 22px 13%;   	}
.yhteysboxi2 {	padding:22px 3% 22px 13%;   	}


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







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

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

.alueimage {	padding:0; }   
.oikeaensin600 {	flex-direction:column-reverse; 	}
.boxi4 {		width:100%;   }

.yhteysboxi {	width:100%;    	}
.yhteysboxi1 {	padding:22px 3% 22px 3%;   	}
.yhteysboxi2 {	padding:22px 3% 22px 3%;   	}


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






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

/*	kestotietoa	*/

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

.ypad99 { 	padding-top:99px; }
.ypad66o { 	padding-top:66px; }
.ypad33 { 	padding-top:33px; }
.ypad11 { 	padding-top:11px; }
.ypad0 {	 	padding-top:0; }
.apad66 { 	padding-bottom:66px; }
.apad33 { 	padding-bottom:33px; }
.apad11 { 	padding-bottom:11px; }
.apad0 { 		padding-bottom:0; }

.ymarg99 { 	margin-top:99px; }
.ymarg66 { 	margin-top:66px; }
.ymarg33 { 	margin-top:33px; }
.ymarg11 { 	margin-top:11px; }
.ymarg0 { 	margin-top:0; }
.amarg66 { 	margin-bottom:66px; }
.amarg33 { 	margin-bottom:33px; }
.amarg11 { 	margin-bottom:11px; }
.amarg0 { 	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)	{	
	}	
/*	========================================================================================================================	*/
/*	========================================================================================================================	*/