.div {	border:1px red solid; 	}

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


.sininen {	background-color:hsl(208, 100%, 49%);	color:rgb(0,133,249);  }
.sininentumma {	background-color:hsl(208, 100%, 29%);	}
.sininenvaalea {	background-color:hsl(208, 100%, 69%);	}
.sininenlikivalkea{	background-color:hsl(208, 100%, 97%);	}

.tarkkalogo {	background-color:hsl(208,100%,48.8%);	}
.sininen {	background-color:rgb(0,133,249);	}
.harmaa {		background-color:rgb(179,179,179);	}
.punainen {	background-color:rgb(222,22,22);	}


.sivualue {	width:100%;  max-width:1920px;  display:table; 	}
.aluelevee {	padding:0 3% 88px 3%;	}
.aluevakio {	padding:0 7% 88px 7%;	}
.alueylin {	width:100%;  height:244px;  display:table; position:relative;  }		

.logolohko { 	width:94%;  max-width:333px;  position:absolute;  top:55px;  left:10%;  display:table;  }
.logokuva {	width:100%;  	}
.logoteksti {	font-size:166%;  width:333px;  margin:11px auto 0 auto;  color:hsl(0,0%,0%);  text-align:center; word-spacing:0.2em;  letter-spacing:0.1em;    }
.luotettavaele {	width:100%;  margin:33px 33px 0 0;   display:table;  }
.luotettavakuva {	width:222px;  float:right;      }


nav {		width:100%;  position:absolute;  top:211px;  z-index: 111;  display:table;     }
ul { 		width:66em;  list-style-type:none;  margin:0;  padding:0;  position:absolute; right:7%;    }
li { 		display:inline-block;  float:left;	 }			
li a { 		min-width:6em;  padding:0.5em 2em;  margin:0 0.5em;  text-align:center;  
		height:2em;  font-weight:bold;  background:hsl(208, 100%, 49%);  color:hsl(0, 0%, 100%);  
		text-decoration:none;  text-align:center;  display:block;    }	
li:hover a { 	background:hsl(208, 100%, 39%);  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 {	background-image: url(kuvat/nnk255.png); background-position:50% 50%;  
	background-size:25px;  width:50px;  height:50px;  bottom:9px;  right:9px;  
	background-color:hsl(208, 100%, 49%);   border:1px hsl(0, 0%, 100%) solid; 
	background-repeat:no-repeat; display:none; position:fixed; z-index:99;   }
#nnkele:hover {  	background-color:hsl(208, 100%, 39%); background-image: url(kuvat/nnk255.png);  }
.nnk {	height:20px;  width:20px;   }





.caption { 	position:absolute; left:0; top:50%; width:100%; text-align:center; color:hsl(0, 0%, 100%); }

.imagealue {  	background-image:url(kuvat/taustakuva0.jpg);  min-height:555px; position:relative;  background-position:center; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }
.kuvaimage {	top:45%;   	}
.tuotealue1 {	position:relative;  }


.tuotetaustakuva2 {  background-image:url(kuvat/taustakuva22.jpg);  height:555px;  position:relative;  background-position:center; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }
.tuotekuva2 {	top:45%;   	}
.tuotealue2  {	position:relative;	}


.yritystaustakuva { background-image:url(kuvat/taustakuva2.jpg);  height:555px;  position:relative;  background-position:center; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }
.yrityskuva {	top:45%;   	}
.yritysalue {	position:relative;  }


.taustakuva6 {  	background-image:url(kuvat/taustakuva6.jpg);  min-height:555px;  position:relative;  background-position:center; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }
.alue6 {		top:45%;   	}

.yhteysalue  {	position:relative;	}





h1 { 		padding:0 3%;  margin:0; font-size:177%;  color:hsl(0, 0%, 0%); font-weight:normal;  text-align:center; letter-spacing:0.3em;   }
h2 { 		padding:0;  margin:0; font-size:177%;  color:hsl(0, 0%, 0%); font-weight:normal;  text-align:center; letter-spacing:0.1em;    }
.alueotsikko {	padding:66px 3% 33px 3%;  margin:0; font-size:177%;  color:hsl(0, 0%, 0%); font-weight:normal;  text-align:center; letter-spacing:0.1em;    }
.boxialueenotsikko{ margin:99px 3% 0px 3%;  padding:0; font-size:177%;  color:hsl(0, 0%, 0%); font-weight:normal;  text-align:center; letter-spacing:0.1em;   }


.slogan {		width:94%;  max-width:23em;  margin-left:auto;  margin-right:auto;  text-align:center;  
		font-size:177%; line-height:166%;
		padding:0.25em 2em 0.1em 2em;  color:hsl(208, 100%, 29%);  background-color:hsla(0, 0%, 100%, 0.7);   text-transform:uppercase;	}


h3 { 		padding:22px 0 0 0;  margin:0;  font-size:144%;  font-style:italic;  color:hsl(0, 0%, 0%); 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%;    }
.isoteksti {	padding:22px 0 0 0;  margin:0; font-size:133%; color:hsl(0, 0%, 0%);	line-height:155%;  }
.pampulaboxi {	padding:11px 5% 11px 9%; margin: 33px 0 5% 0;  width:100%;  max-width:28em; border-radius:22px;  border: 2px hsl(208, 100%, 49%) solid;	}
.isopampula {	padding:0px 0px 0px 11%;  margin:7px 0;   font-size:133%;  color:hsl(208, 100%, 49%);  background-image:url(kuvat/pallosininen.png);  background-size:0.4em;  background-position: 0 0.56em;  background-repeat: no-repeat;  line-height:155%;   }


.alinteksti {	padding:22px 66px;  text-align:center; background-color:hsl(208, 100%, 49%);  color:hsl(208, 100%, 89%);		}
.kellu {		margin:11px 0 0 22px; padding:22px 0 0 0; float:right; width:6em;   }
.kelluvasen {	margin:11px 22px 0 0; padding:22px 0 0 0; float:left; width:6em;   }


.boxialue2 {	width:100%;  display:flex;  justify-content:space-between;  } 
.boxi2 {		width:45%;  margin:66px 0 0 0;  background-color:hsl(0, 0%, 100%);   }
.boxiotsikko2 {  	margin:0;  padding:22px 5% 0 0;  border-width:4px 0 0 0; border-color:hsla(208, 100%, 49%, 0.5);  border-style:solid;  font-size:144%;  width:100%;  }


.boxialue3 {	width:100%;  display:flex;  justify-content:space-between;  } 
.boxi3 {		width:30%;  margin:66px 0 0 0;  background-color:hsl(0, 0%, 100%);   }


.yhteysalue2 {	margin:0 auto;  padding:0;  display:flex;  flex-wrap:wrap;  }
.yhteystietoboxi {	width:50%;  margin-top:66px;  padding: 44px 2% 33px 6%; background-color:hsl(208, 100%, 89%);   }
.yhteysotsikko {	width:4em; float:left; font-size:222%;  padding:22px 3% 22px 0;  margin:0;  color:hsl(208, 100%, 39%); 	}
.yhteystiedot {	width:400px; float:left; 	}
.yhteystieto1 {	font-size:122%;  padding:22px 3% 0 0;  margin:0;  font-weight:bold; 	}
.yhteystieto2 {	font-size:122%;  padding:5px 3% 0 0;  margin:0;  	}
.yhteystieto0 {	font-size:144%;  padding:44px 3% 0 0;  margin:0;  	}
.yhteysrako {	margin-top:0.7em; 	}
.kelluyhteys {		}

.yhteyskarttaboxi { width:50%;   margin-top:66px;  background-image:url(kuvat/yhteystausta.jpg);  min-height:444px; 
		background-position:100% 50%; background-repeat:no-repeat;  background-size:cover;  }







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

.aluenavi {	right:5%;   }

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




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

.alueylin {	height:200px;   }		

nav {		width:444px;  top:4px; right:4px;  }
ul { 		width:444px;  height:4em;  position:static;  display:none;	 }			
ul li, li a {  	width:444px;  box-sizing:content-box;   }			
li a { 		height:4em;  padding:3em 0 0 0;  margin:0;  border-width:0 0 1px 0;  border-color:rgb(245,245,245);  border-style:solid; }	
li:hover ul a { 	background:rgb(122,122,122);  color:hsl(0, 0%, 0%); }	

.nnv {	 	background-image: url(kuvat/nnv255.png); background-color:hsl(208, 100%, 49%);
		height:50px;  width:50px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%; 
		float:right;  margin:9px;  display:block;  text-decoration:none;   border:1px rgb(255,255,255) solid;  }
.nnv:link {	       }
.nnv:visited {	       }
.nnv:hover {	background-image: url(kuvat/nnv255.png);  background-color:hsl(208, 100%, 39%);   }

.boxialue3 {	flex-direction:column;   } 
.boxi3 {		width:100%;  max-width:666px;  margin:44px auto 0 auto;  }
.boxi31 {		 }
.boxi32 {		 }
.boxi33 {		 }

.yhteysalue2 {	flex-direction:column;    }
.yhteystietoboxi {	width:100%;  padding: 33px 2% 33px 15%;   }
.yhteyskarttaboxi { width:100%;     }




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





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

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

h1 { 	font-size:177%;  }
h2 { 	font-size:177%;  }
h3 { 	font-size:144%;    }
p { 	font-size:111%;    }
.leveeteksti {	font-size:111%; 	}
.pampula {	font-size:111%;    }
.slogan  {	font-size:133%; text-align:center; 	}	

.boxialue2 {	flex-direction:column;   } 
.boxi2 {		width:100%;  max-width:666px;  margin:44px auto 0 auto; }
.boxi21 {		 }
.boxi22 {		 }


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





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


.logolohko { 	width:90%;  max-width:300px;   position:static;  margin:55px auto 0 auto;  }
.logoteksti {	width:100%;  margin:11px 0 0 0;      }
.luotettavaele {	width:100%;  margin:11px 0 0 0;	}


nav {		width:calc(100% - 8px);  top:4px; right:4px;  }
ul { 		width:100%;  	 }			
ul li, li a {  	width:100%;     }			



h1 { 	font-size:133%;  letter-spacing:0.1em; }
h2 { 	font-size:133%;  }
h3 { 	font-size:122%;     }
.slogantausta {	padding:0.2em 1em;   }
.isoteksti {	font-size:122%;  }
.isopampula {	font-size:122%;     }


.yhteystiedot {	width:100%; 	}
.kelluyhteys {	display:none;	}
.yhteystietoboxi {	padding: 33px 2% 33px 9%;   }


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



.yhdessa {	white-space:nowrap; 	}
.valkea {		color:hsl(0, 0%, 100%); 	}
.levee100 {	width:100%; }