.div {	border:1px red solid; 	}

body {	margin:0;  word-spacing:0.1em;  letter-spacing:0.07em;  
 	background:linear-gradient( hsl(0,0%,40%) , hsl(0,0%,100%) ); 
	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;	}


.zzliukusavypysty { background:linear-gradient( hsl(111,80%,40%) , hsl(111,80%,100%) ); }
.zzhaivevaaka { 	height:1px;  width:77%;  margin:33px auto; background:linear-gradient( 90deg, transparent , hsl(0,0%,100%) , transparent );   }
.zztausta {	background-image:url(kuvat/taustakuva.jpg);  background-size:cover;  background-position:50% 50%;  background-repeat:no-repeat;  }

.ruskea  {	background-color:hsl(30,32%,33%);	color:rgb(118,81,72); }
.sininen {	background-color:hsl(222,100%,40%);	color:rgb(0, 61, 204); }
.keltainen {	background-color:hsl(12,24%,87%);	color:rgb(255, 255, 0); }
.oranssi {	background-color:hsl(25, 100%,50%);	color:rgb(255, 106, 0); }
.vihree {		background-color:hsl(30,32%,33%);	color:rgb(0, 166, 0); }
.punainen {	background-color:hsl(0, 82%,48%);	color:rgb(222, 22, 22); }
.valkoinen {	background-color:hsl(0,0%,100%);	color:rgb(255, 255, 255); }
.musta {		background-color:hsl(0,100%,0%);	color:rgb(0, 0, 0); }

.tausta  {	background-color:hsl(30,32%,44%);	color:rgb(180,160,130); }




/*    perustekstit    -------------------------------------------------------------------------------------	*/

h1  { 		padding:55px 0 22px 0;  margin:0;  font-size:222%;  font-weight:normal;  letter-spacing:0.1em;   }
h2  { 		padding:55px 0 11px 0;  margin:0;  font-size:166%;  font-weight:normal;  letter-spacing:0.1em;   }
p {		padding:22px 0 0 0;  margin:0; font-size:122%; color:hsl(0,0%,0%);  line-height:144%;    }
.pamp {		font-size:111%;   padding:0px 0px 0px 44px;  margin:11px 0 0 0;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.3em;  background-repeat:no-repeat;    }
.ingressi {	padding:22px 0;  margin:0; font-size:155%; color:hsl(0,0%,55%);  line-height:155%;    }




/*    logo ja navigointi   -------------------------------------------------------------------------------------	*/

.sivu {		width:100%;  max-width:1300px;  margin: 0 auto;  display:table; position:relative;  }

.alueylin {	padding:0 0 0px 0;  width:100%;  display:table;  background:linear-gradient( 20deg , hsl(0,0%,100%) 44% , hsl(30,32%,77%) );	}

.logokuvalohko {	width:94%;  max-width:666px;  padding:111px 0 0 7%;  display:table;	}
.logokuva {	width:100%;  }
.logoele1 { 	width:44.133%;  margin:0 0 11px 0;  padding:0;  float:left;  display:table;  }
.logoele2 { 	width:1.333%;   margin:0 0 11px 0;  padding:0;  float:left;  display:table;  }
.logoele3 { 	width:54.533%;  margin:0 0 11px 0;  padding:0;  float:left;  display:table;  }

.puhelinnumero {	padding:22px 7% 22px 0;  width:100%;   text-align:right; font-size:133%;  color:hsl(30,32%,33%);  word-spacing:0.2em;  letter-spacing:0.1em;    }

.alueimage {	height:530px;  border-width: 0 0 2px 0;  border-color:hsl(0,0%,100%);  border-style:solid;  
		background-image:url(kuvat/imagekuva3.jpg);  background-size:cover;  background-position:50% 0;  background-repeat:no-repeat;  } 
.vaakapalkki {	background-color:hsl(30,32%,33%);  width:100%;  height:2em; 
		border-width: 0 0 2px 0;  border-color:hsl(0,0%,100%);  border-style:solid;	}




/*	---------------------------------------------------------------------------------------------	*/

.aluerunko {	width:100%;  display:flex;	background:linear-gradient( hsl(30,32%,93%) , hsl(30,32%,44%) , hsl(30,32%,73%) );  }


/*	vasen    -------------------------------------------------------------------------------------	*/

.sarakevasen {	width:18em;  float:left;  display:table;   	}
/*	.sarakevasen {	width:300px;  float:left;  display:table;   	}	*/

nav {	width:100%;  margin:0px 0 0 0%;  font-size:1.1em;  letter-spacing:0.1em;  display:table;   position:relative;    }

ul { 	width:100%; list-style-type:none;  margin:0;  padding:0;  position:absolute;    }
li { 	width:100%;   border-width:0 0 1px 0;  border-color:hsl(0,0%,100%);  border-style:solid;  display:inline-block;   	 	 }				
li a { 	padding:1em 1em 1em 2em;  display:block;  text-decoration:none;  min-width:200px;   
	background-color:hsl(30,32%,44%);  color:hsl(0,0%,100%);   }	
li:hover a { 	background-color:hsl(30,32%,33%);  color:hsl(0,0%,100%);  }								
li:hover ul a { 	background-color:hsl(12,24%,29%);  color:hsl(0,0%,100%);     }	
li:hover ul a:hover { 	background-color:hsl(30,32%,33%);  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/nnkoy255.png);   }
.nnk:visited { 	background-image:url(kuvat/nnkoy255.png);     }
.nnk:hover { 	background-image:url(kuvat/nnkoy255.png);  background-color:hsl(30,32%,33%);    }
.nnk {	 	background-color:hsl(30,32%,44%);  border-radius:50%; height:50px;  width:50px;  border:1px hsl(0,0%,100%) solid;  
		background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



/*	keski    -------------------------------------------------------------------------------------	*/

.sarakekeski  {	width:calc(100% - 22em);  padding:33px 3% 111px 5%;  background-color:hsl(0,0%,100%); float:left;  display:table;   }
/*	.sarakekeski  {	width:calc(100% - 600px);  padding:33px 1% 111px 3%;  background-color:hsl(0,0%,100%); float:left;  display:table;   }	*/

.tekstilinkki:link {	color:hsl(30,32%,22%);  text-decoration: underline; }  
.tekstilinkki:visited {	color:hsl(30,32%,22%);  text-decoration: underline; }
.tekstilinkki:hover {	color:hsl(30,32%,11%);  text-decoration: none; }



/*    alueet   -------------------------------------------------------------------------------------	*/

.yhteysteksti {	font-size:111%;  padding:3px 0 3px 5%;  margin:0;  	}
.yhteysteksti2 {	margin-top:0.5em; 	}

.alinalue { 	padding:11px 3%; text-align:center;  width:100%; display:table; }
.alinteksti {	font-size:99%;  color:hsl(0,0%,100%); white-space:nowrap; line-height:177%; 	}
.yhdessa { 	white-space:nowrap; } 

.aluevakio {	padding:33px 7%;  position:relative;  width:100%;  display:table; }
.aluelevee {	padding:33px 0;  width:100%;  display:table; }




/*    harvinaiset   -------------------------------------------------------------------------------------	*/

.haiveviiva {	width:66%;   background:linear-gradient(90deg, transparent, hsl(0,0%,50%), transparent );   
		margin:0 auto 0 auto; height:1px;  display:table;    }
.tietosuojaseloste  {	padding:44px 0 0 0;  margin:0; font-size:99%; color:hsl(0,0%,0%);     }
.asianajotoimisto {	margin:66px 0 33px 0;  padding:420px 20px 20px 20px;  width:100%;  height:620px; 
		background-image:url(kuvat/asianajotoimisto3.jpg);  background-size:1300px;  background-position:50% 0;  background-repeat:no-repeat;  }
.kartta {		   }









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

.sivu {		max-width:1200px;   }

.sarakevasen {	width:0px;   	}
.sarakekeski  {	width:calc(100% - 250px);  padding:33px 1% 111px 3%; }

nav {		margin:0;  position:absolute;  top:4px;  left:4px;  }
ul { 		position:static;  display:none;	 }			
li a { 		margin-top:0; padding: 2em 1em 2em 1em;  text-align:center;    }	
li ul li a { 	padding: 2em 1em 2em 1em;    }	

.nnv {	 	background-image: url(kuvat/nnv255.png); background-color:hsl(30,32%,44%); 
		height:50px;  width:50px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%; 
		float:left; display:block;  text-decoration:none; border-width:0 0 1px 0;  border-color:hsl(0,0%,100%);  border-style:solid;  }
.nnv:link {	       }
.nnv:visited {	       }
.nnv:hover {	background-image: url(kuvat/nnv255.png);  background-color:hsl(30,32%,33%);     }

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


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







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

.sivu {		max-width:900px;   }
.puhelinnumero {	padding:22px 0 33px 0;  text-align:center;      }

.sarakekeski  {	width:100%;  }
.kuvaele {	width:160px;  float:right;  margin:0px 0 22px 33px;  	}

p { 		font-size:111%;  }
.pamp	 {	font-size:111%;    }

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


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









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

.sivu {		max-width:600px;   }
.logokuvalohko {	width:94%;  max-width:333px;  margin-left:auto;  margin-right:auto;  padding:111px 0 0 0;  display:table;	}
.logokuva {	width:100%;  }
.logoele1 { 	width:81.3%;    }
.logoele2 { 	display:none;  }
.logoele3 { 	width:100%;   }

.kuvaele {	width:160px;  float:none;  margin:33px auto;  	}

p { 		font-size:111%;  }
.ingressi {	font-size:133%;    }
.pamp {		font-size:111%;  padding:0px 0px 0px 33px;    }

nav {		height:40px; width:100%;  max-width:100%;  top:0px;  left:0px;   }
ul {		margin-top:0; position:static;  display:none; }
.nnv {	 	height:4em; width:100%;   }

.alinalue { 	padding:11px 1% 33px 1%; text-align:center;  width:100%; display:table; }


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





/*	vakiomääritteitä	*/


.vasemmalle {	text-align:left; }
.keskelle {	text-align:center; }
.oikealle {	text-align:right; }
.kuvakeskelle {	margin-left:auto;  margin-right:auto; }
.valkea {		color:hsl(0,0%,100%); 	}
.levee100 {	width:100%; }