.div {	border:1px red solid;	}

body {	background-color:hsl(0,0%,93%);  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";   
	background-image:url(kuvat/sivualue.jpg);  background-size:cover;   }
td { 	padding: 0;  vertical-align: top;  }
table { 	border-collapse: collapse;  empty-cells: show;}
img {	border: 0; display: block; }
* {	box-sizing:border-box; 	}

.perusvari {	color:hsl(120,100%,30%);	}


p {		padding:22px 0 0 0;  margin:0;  font-size:111%;  line-height:155%;	}
.pampula {	padding:0 0 0 33px;  margin:11px 0 0 1%; 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%;  }


.sivualue {	padding:44px; width:100%;  max-width:1920px;  display:table;  	}
.pilari1 {	width:444px;   float:left;  display:table;	}
.pilari2 {	width:calc(95% - 444px);  float:right;  background-color:hsl(0,0%,100%);  display:table;	}


.logolohko { 	padding:33px 11px;  margin:0 0 0 0;  width:100%;  background-color:hsla(120,100%,88%, 0.6);  display:table;  
 		background:linear-gradient( hsl(120,100%,44%) , hsl(120,100%,88%) , hsl(120,100%,44%) ); }
.logokuva { 	width:80%;  max-width:333px; margin:11px auto;     }
.logoteksti {	margin:11px 0;  font-size:177%; text-align:center;  }

.yhteyslohko  { 	padding:55px 11px 11px 11px;  margin:0 0 0 0;  text-align:center; width:100%;  background-color:hsl(120,100%,88%);   display:table;    }
.yhteysotsikko {	font-size:2em;  margin:0 0 1em 0;  font-weight:bold;  	}
.yhteysteksti {	font-size:1.2em;  margin:0.5em 0;  	}
.avoinna {	margin-top:3em; 	}
.ytunnus {	font-size:88%; margin-top:0.9em; 	}

.karttalohko {	width:100%;  height:222px; margin:33px 0 0 0;   background-color:hsl(120,100%,88%); 	}
.katulohko {	padding:11px 22px; 	background-color:hsl(120,100%,88%);  }



.alueimage  {	background-image:url(kuvat/imagekuva.jpg);  background-size:1300px;  background-position:40% 50%;   min-height:666px;  }
.imagetekstilohko {	padding:222px 5% 0 0;  width:50%;  float:right;  display:table; 	}
h1 {		padding:0;  margin:0;   font-weight:normal; font-size:188%;  line-height:155%;	}
.imageteksti  {	padding:44px 0 0 0;  margin:0;  font-size:144%;  line-height:155%; 	}
.alueingressi {	margin:0px auto 0 auto;  width:90%;   display:flex;  justify-content:space-between;  flex-wrap:wrap;   	}
.ingrvasen {	padding:33px 0 0 0;  width:67%;   	}
.ingrteksti {	padding:0 0 0 0;  margin:0;  font-size:122%;  line-height:155%;	}
.ingroikea  {	padding:55px 0 0 0;  width:30%; }
.ingrpamp {	padding:0 0 0 33px;  margin:0 0 22px 1%; font-size:133%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position: 0 0.5em;  background-repeat: no-repeat;  line-height:144%;  }

.boxialue3 {	margin:44px auto;  width:90%; display:flex;  justify-content:space-between;  flex-wrap:wrap;   } 
.boxi3 {		width:30%;     }

.aluealin {	margin:66px 0 0 0;  padding:2em 5%;  height:44px;  background-color:hsl(120,100%,30%);  width:100%;  display:table;
		font-size: 122%;  color:hsl(0,0%,100%);  font-weight:bold;  text-align:center; 	}






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

.sivualue {	padding:44px 3%; width:100%;  max-width:1920px;  display:table;  	}
.pilari1 {	width:100%;  float:none;	}
.pilari2 {	width:100%;  float:none;   }

.logolohko { 	padding:33px 11px;  margin:0 0 0 0;  width:100%;   }
.yhteyslohko  { 	margin:11px 0 0 0;  width:100%; }
.yhteysele1 {	width:50%;  margin-bottom:44px; float:left; 	}
.yhteysele2 {	width:50%;  margin-bottom:44px; float:left; 	}
.avoinna {	margin-top:0.5em; 	}
.karttalohko {	margin:33px 0 0 0;   width:100%;  float:none;  	}

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





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

.ingrvasen  {	padding:55px 0 0 0;  width:100%; }
.ingroikea  {	padding:55px 0 0 0;  width:100%; }
.boxi3 {		width:100%; margin:11px 0;     }
						 	}	/*	----------    */






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

.yhteysele1 {	width:100%;  margin-bottom:44px; float:none; 	}
.yhteysele2 {	width:100%;  margin-bottom:44px; float:none; 	}

.alueimage  {	background-position:100% 0;   min-height:auto;  }
.imagetekstilohko {	padding:333px 5% 77px 5%;  width:100%;  float:none;   	}
h1 {		font-size:144%;  	}
.imageteksti  {	font-size:122%;  	}
.ingrvasen  {	padding:55px 0 0 0;  width:100%; }
.ingroikea  {	padding:55px 0 0 0;  width:100%; }
						 	}	/*	----------    */






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

.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/taustakuva.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%;  }
.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	*/	
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/