.div {	border:1px red solid; 	}

body {	margin:0;  word-spacing:0.1em;  letter-spacing:0.07em;  
	font-family: 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;	}


.logonvari {	background-color:hsl(180,100%,50%);		}
.mustatausta {	background-color:hsl(200,23%,3%); 	}




.sivualue {	width:100%;  max-width:1920px; display:table; }


/*    perustekstit    */

.leveeotsikko { 	margin:99px 0 0 0;   padding:22px 5%;  font-size:222%; 
		background-color:hsl(200,23%,3%);  color:hsl(180,100%,50%);  font-weight:normal;  
		text-align:center; letter-spacing:0.2em; text-transform:uppercase;   }
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.5em;  background-position:0 0.3em;  background-repeat:no-repeat;    }
h1 {		padding:66px 0 0 0;  font-size:222%;  text-align:center;  font-weight:normal;     }
h2 {		margin:0;  padding:44px 0 0px 0; font-size:222%;  font-weight:normal;       }
h3 {		margin:0;  padding:44px 0 0 0;  font-size:133%; }





/*    logo    */

.logolohko { 	position:absolute;  top:20%;  width:100%;  background-color:hsl(200,23%,3%);  }
.logokuva {	width:500px;  margin:33px auto 0 auto; 	}
.logoteksti {	font-size:199%;  margin:11px 0 0 0;  color:hsl(0,0%,77%); text-align:center; word-spacing:0.2em;  letter-spacing:0.1em;    }
.logocapiotsikko {	font-size:166%;  margin:44px 5% 0 5%;  padding:0 55px; color:hsl(0,0%,77%);  text-align:center; word-spacing:0.2em;  letter-spacing:0.1em;    }





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

nav {		width:33em;  height:55px;   margin:11px auto;  z-index: 111;  display:table;   }
ul { 		width:auto;  list-style-type:none;  margin:0;  padding:0;  position:absolute;    }
li { 		display:inline-block;  float:left; text-align:center; 	 }			
li a { 		width:10em;  min-width:4em;  margin:0 0.25em;  padding:1.2em 0;  height:2.4em;  line-height:0em; font-size:1em;  
		background:hsl(0,0%,0%);  color:hsl(0,0%,100%);  
		text-decoration: none;  text-align:center;  border:1px hsl(0,0%,100%) solid;  border-radius:11px; display:block; }	
li:hover a { 	background:hsl(180,100%,50%);  color:hsl(0,0%,0%);   }								
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;	 }


.linkkinappi {		width:10em;  margin:2em auto;   }
.linkkiteksti:link { 	color:hsl(0,0%,100%);      }
.linkkiteksti:visited { 	color:hsl(0,0%,100%);     }
.linkkiteksti:hover { 	color:hsl(0,0%,0%);  background-color:hsl(180,100%,50%);      }
.linkkiteksti {	 	padding: 0.5em 0em;  border-radius:7px;  text-align: center;  display: block;   
			background-color:hsl(180,100%,50%);  text-decoration: none; }	


.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/nnkoy0.png);  background-color:hsl(180,100%,50%);  }
.nnk {	 	background-color:hsl(0,0%,0%);  border:1px hsl(0,0%,100%) solid;  border-radius:7px; height:50px;  width:50px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }





/*    alueet    */

.alueingressi {	margin:0 0 0 0;   padding:99px 9%;  width:100%;  display:table;   	}
.ingrvasen  {	width:50%;   margin:0px 0 0 0;  float:left;    }
.ingroikea  {	width:40%;   margin:0px 0 0 0;  padding:22px 3% 33px 5%;  
		background-color:hsl(180,100%,50%);  border-radius:22px;  float:right;   }
.ingrteksti {	padding:0;   margin:0 0 11px 0px;  font-size:144%;  line-height:155%;    }
.ingrpamp {	font-size:177%;   padding:0px 0px 0px 8%;  margin:11px 0 0 0;  
		background-image:url(kuvat/pallomusta.png);  
		background-size:0.5em;  background-position:0 0.5em;  background-repeat:no-repeat;    }

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



.boxialue2 {	margin:66px 0 0 0;   width:100%;  display:flex;  justify-content:space-between;  flex-wrap:wrap;  } 
.boxi2 {		width:45%;  margin:0 0 0 0;  padding:0;      }

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

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


.tuotemerkki {		width:100%;  padding:55px; 	}
.tuotemerkkikuva {		width:220px;  margin:55px auto; 	}



.yhteysalue {	padding:333px 5% 0 5%;  width:100%;  display:flex;  flex-wrap:wrap;  justify-content:space-between;    } 
.yhteysboxi {	border-radius:22px;  }
.yhteysboxi1 {	width:477px;  padding:33px 2% 33px 5%;  background-color:hsl(200,23%,3%);	}
.yhteysboxi2 {	width:477px;  padding:33px 0 33px 0;  background-color:hsl(200,23%,3%);	}

.ylogokuva {	width:270px;  margin: 0 0 18px -2px; 	}
.yhteysteksti {	font-size:133%;  padding:1px 0 1px 0;  margin:0;  color:hsl(0,0%,100%); 	}
.yhteysrako {	margin-top:0.7em; 	}
.karttateksti {	font-size:99%;  padding:5px 5% 0px 11%;  margin:0;  	}




/*    lohkot    */

.capiylin {  	background-image:url(kuvat/capiylin.jpg);  height:999px; position:relative;  background-position:50% 0%; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  } 
.capi2 { 		background-image:url(kuvat/capi2.jpg);  height:777px;  position:relative;  background-position:50% 100%; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }
.capi3 { 		background-image:url(kuvat/capi3.jpg);  height:777px;  position:relative;  background-position:50% 100%; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }
.capi4 { 		background-image:url(kuvat/capi4.jpg);  height:777px;  position:relative;  background-position:50% 100%; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }
.capialin { 	background-image:url(kuvat/capialin.jpg);  height:777px;  position:relative;  background-position:50% 30%; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:cover;  }

.haiveviiva { 	height:1px;  width:77%;  margin:0 auto 0 auto;  background: linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }
.slogan {		padding:44px 0;  margin:0;  font-size:133%;  text-align:center; 
		word-spacing:0.12em;  letter-spacing:0.1em;  font-family:"Abyssinica SIL", "Liberation Serif", FreeSerif, Serif; 	}








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

.sivualue {	max-width:1000px; }

.logolohko { 	top:22px;    }
.logoteksti {	margin:11px 0 22px 0; }

nav {		position:absolute;  left:auto;  right:4px;  top:4px;  width:calc(100% - 8px);    }
ul {		max-width:444px;   top:4em;  right:0;   display:none;  }
li {		margin:0;	float:right; }
ul li a {		padding:3em 1em;  margin:5px 0;  height:auto;  background-color:hsl(0,0%,0%);    }
li:hover a {	  	}
ul li, li a {  	width:100%;  text-align:center;  }


.nnv:link {	background-image: url(kuvat/nnv255.png);       }
.nnv:visited {	background-image: url(kuvat/nnv255.png);        }
.nnv:hover {	background-image: url(kuvat/nnv0.png);  background-color:hsl(180,100%,50%);     }
.nnv {	 	float:right;   
		background-image: url(kuvat/nnv255.png); background-color:hsl(0,0%,0%); 
		height:50px;  width:50px;  border:1px hsl(0,0%,100%) solid;  border-radius:7px; margin-bottom:0px;   
		background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  
		display:block;  text-decoration:none;  }


.alueingressi {	padding:77px 9%;  width:100%;  display:table;   	}
.ingrvasen  {	width:100%;   margin:33px 0 0 0;  float:none;    }
.ingroikea  {	width:100%;   margin:33px 0 0 0;  float:bone;   }
.ingrteksti {	padding:0;   margin:33px 0 11px 0px;  font-size:133%;  line-height:155%;    }

.aluevakio {	padding:0 5%;   }

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


.boxialue2 {	margin:11px 0 0 0;    } 
.boxi2 {		width:100%;  margin:55px 0 0 0;  }

.boxialue3 {	margin:11px 0 0 0;    } 
.boxi3 {		width:100%;  margin:55px 0 0 0;   }

.yhteysalue {	padding:500px 0 0 0;  width:96%;  margin:0 auto 0 auto;     } 
.yhteysboxi1 {	width:48%; margin-bottom:33px; 	}
.yhteysboxi2 {	width:48%; margin-bottom:33px;	}



.capiotsikko  {	font-size:133%; 	}	
.capiylin {  	height:666px;  background-attachment:scroll; } 
.capi2 { 		height:444px;  background-attachment:scroll; } 
.capialin { 	height:444px;  background-attachment:scroll; }


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



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

.sivualue {	max-width:800px; }

.logokuva {	width:333px;  margin:33px auto 0 auto; 	}

.aluevakio {	padding:0 3%;   }
.yhteysboxi1 {	width:100%;  	}
.yhteysboxi2 {	width:100%;  	}

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








/*	kestotietoa 	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/

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

.ypadisompi { 	padding-top:99px; }
.ypadiso { 	padding-top:66px; }
.ypadpieni { 	padding-top:33px; }
.ypadmitaton { 	padding-top:11px; }
.ypadnolla { 	padding-top:0; }
.apadisompi { 	padding-bottom:99px; }
.apadiso { 	padding-bottom:66px; }
.apadpieni { 	padding-bottom:33px; }
.apadmitaton { 	padding-bottom:11px; }
.apadnolla { 	padding-bottom:0; }

.ymargisompi { 	margin-top:99px; }
.ymargiso { 	margin-top:66px; }
.ymargpieni { 	margin-top:33px; }
.ymargmitaton { 	margin-top:11px; }
.ymargnolla { 	margin-top:0; }
.amargiso { 	margin-bottom:66px; }
.amargpieni { 	margin-bottom:33px; }
.amargmitaton { 	margin-bottom:11px; }
.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;   }








/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
/*	======================================================================	*/
/*	========================================================================================================================	*/
/*	========================================================================================================================	*/
/*    perustekstit	==============================================================================================================	*/
/*    alueet	==============================================================================================================	*/
/*    logo ingressi	==============================================================================================================	*/
/*    navigointi	==============================================================================================================	*/
/*    boxit	==============================================================================================================	*/
/*    erikoisboxit	==============================================================================================================	*/
/*    capi	==============================================================================================================	*/
/*    yhteydet	==============================================================================================================	*/
/*    harvinaiset	==============================================================================================================	*/

@media screen and (max-width :111px)	{	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	
/*	CSS: portaat 1480, 1230, 900, 700, 500-300, FF sallii tarkistuksen 450px näytöllä 	*/

/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/