.div {	border:1px red solid; 	}

body {	margin:0;  word-spacing:0.1em;  letter-spacing:0.07em;  font-family: 'Cormorant', 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(240,100%,22%);	color:rgb(0,0,112);  	}
.oranssi	{	background-color:hsl(4,96%,36%);	color:rgb(255,126,41);	 }
.punainentumma {	background-color: hsl(4,96%,36%);	color:rgb(182,16,43); }
.punainenkirkas {	background-color: hsl(349,100%,42%);	color:rgb(212,0,40); }
.taustavaalea {	background-color:hsl(4,96%,39%);	}
.taustatumma {	background-color:hsl(4,96%,35%);  	}
.tekstivalkea {	color:hsl(0,0%,100%); }



/*    perustekstit	==============================================================================================================	*/

h1 {	text-align:center; font-size:177%;  padding:77px 3% 0 3%;  margin:0;  width:100%;  word-spacing:0.14em;  letter-spacing:0.07em;  display:table;  }
h2 {	text-align:center; font-size:177%;  padding:77px 3% 0 3%;  margin:0;  width:100%;  word-spacing:0.14em;  letter-spacing:0.07em;  display:table;   }
h3 {	margin:22px 0 0 0;  padding:0;  font-size:122%;     }
p {	margin:15px 0 4px 0;  padding:0;  font-size:111%;  line-height:155%;   }
.pampula {	padding:0px 0px 0px 33px;  margin:5px 0 5px 1%;   font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:155%;   }




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

.sivualue {	width:100%;  display:table; 	}
.aluevakio {	width:100%;  padding-left:9%;  padding-right:9%;  display:table;  }

.alueimage {	padding:99px 0 333px 0;  width:100%;  background-image:url(kuvat/kuva0.jpg);  background-size:cover;  background-position:0% 0px;  background-repeat:no-repeat;  	}   




/*    logo ingressi	==============================================================================================================	*/

.logolohko { 	width:80%;  margin:0 auto;  padding:33px 0 33px 0; background-color:hsla(0,0%,100% , 0.8); display:table;    }
.logokuva {	border-width:33px 55px;  width:500px; max-width:90%;  margin:0 auto 11px auto;    }
.logoteksti {	text-align:center;  margin:0;  padding:1px 5%;  font-size:122%;  color:hsl(0,0%,0%);  word-spacing:0.1em;  letter-spacing:0.09em;  line-height:133%;      }
.imageslogan {	width:100%;  padding:33px 5% 44px 5%;  font-size:177%;  text-align:center;    
		text-shadow:2px 1px hsl(0,0%,0%);  color:hsl(0,0%,100%);   font-style:italic;  word-spacing:0.2em;  letter-spacing:0.1em; }



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

nav {	width:36em;  left:calc(50% - 18em);  top:33px;  position:absolute;  height:2em;  z-index:111;  display:table;     }
ul { 	list-style-type:none;  margin:0;  padding:0;  position:absolute;    }
li { 	display:inline-block;  float:left;	 }			
li a { 	display:block;  padding:0.5em 0;  width:11em; min-width:6em;  margin:0 0.5em;  height:2em;  border-radius:7px;
	color:hsl(0,0%,100%); background:hsl(4,96%,36%);  text-align:center;  line-height:1em;  text-decoration:none;   }
li:first-child a { 	border-left:0; 	}	
li:hover a { 		background:hsl(349,100%,42%); color:hsl(0,0%,100%);  }									
li ul { 			display:none; }											
li ul li { 		display:block;  float: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(349,100%,42%);   }
.nnk {	 	background-color:hsl(4,96%,36%); border-radius:7px;  border:1px hsl(0,0%,100%) solid;
		height:50px;  width:50px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



.tekstilinkki:link {	color:hsl(240,100%,22%);   text-decoration:underline; }  
.tekstilinkki:visited {	color:hsl(240,100%,22%); text-decoration:underline; }
.tekstilinkki:hover {	color:hsl(4,96%,36%);  text-decoration:none; }




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

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

.kuultoalue {	position:absolute;  bottom:11px;  width:100%;   }
.taustakuva1 {	position:relative;  background-image:url(kuvat/taustakuva1.jpg);  background-size:cover;  background-position:90% 0px;  min-height:444px;  }
.taustakuva2 {	position:relative;  background-image:url(kuvat/taustakuva2.jpg);  background-size:cover;  background-position:50% 0%;   min-height:444px;  }
.kuultootsikko {  	font-size:100%;  margin:0;  padding:0.7em 1em;  text-align:center;
		background-color:hsla(0,0%,100% , 0.7);  color:hsl(0,0%,0%);  width:100%;  text-align:center;  font-weight:normal;	}


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

.alueyhteys {	color:hsl(0,0%,100%);  width:100%;  margin:0;  padding:33px 33px 33px 55px;   display:flex;  justify-content:space-between;  flex-wrap:wrap; } 

.yhteysboxi1 {	margin:22px 0;  padding:0;  width:20em;  	}
.yhteysboxi2 {	margin:22px 0;  padding:0;  width:28em;  	}
.yhteysboxi3 {	margin:22px 0;  width:calc(94% - 48em);   background-image:url(kuvat/yhteys1.jpg);  background-size:cover;  background-position:50% 0;  min-height:333px;  	}

.yhteysotsikko {	font-size:144%;  font-weight:bold;  margin:0 0 11px 0;  padding:0 0 11px 0;  }
.yhteysvahva {	font-size:111%;  font-style:italic;  	}
.yhteysteksti {	font-size:100%;  padding:0 0 0 0;  margin:0;  	}
.yhteysrako {	margin-top:1em; 	}
.luotettavakumppani {	margin:22px 0 0 0;  width:144px; 	}

.henkilokuva {	width:177px;  max-width:80%;  margin:33px;  float:right;  border:7px hsl(4,0%,100%) solid;	}

.boxipad {	padding:33px 3% 33px 5%; 	}




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

.haiveviiva { 	height:1px;  width:55%;  margin:0 auto; background: linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }

.alateksti {	background-color:hsl(0,0%,100%); padding:11px 5%;  margin:0;  font-size:94%;  line-height:144%;   }

.aluekuvagalleria {		width:100%;  padding: 44px 7% 0 7%; display:table; 	}
.kuvalohko { 		width:100%;  display:flex;  flex-wrap:wrap;  }
.kuvaele {	width:30%;  margin:22px 1.66%;  border-radius:11px;  	}
.kuvaele img {	border-radius:11px;  	}
.kuvaelekorkea {	width:30%;  margin:22px 1.66%;  border-radius:11px;  	}

.kuvateksti {	margin:0;  padding:5px 5% 0 5%;  text-align:center; font-size:99%;   }

.taustavarivaalea {	background-color:hsl(4,96%,39%);	}
.taustavaritumma {	background-color:hsl(4,96%,35%);  color:hsla(0,0%,100% , 0.9); 	}

.aluealin {	padding:33px 66px;  width:100%;  background-color:hsl(0,0%,100%);  display:table;  position:relative; }
.alalause {	text-align:center;  font-size:133%;  font-style:italic;  color:hsl(4,96%,35%);    }
.kuvanumero {	font-size:2em;    display:inline;  display:none;	}

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






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

.imageslogan {	width:100%;  margin:55px 0;  padding:0 66px; text-align:center;  }

nav {		left:auto; right:4px;  top:4px;  width:90%;  
		position:absolute;  max-width:333px;  background:transparent;  height:auto;  }
ul {		position:static;  display:none; }
li {		margin:0;	float:right; }
ul li a {		padding:2em 1em;  margin:0; height:auto;  border-width:1px 0 0 0;  border-color:hsl(349,100%,42%);  border-style:solid;   }
li:hover a {	  	}
ul li, li a {  	width:100%;  text-align:center;  }
ul li ul li a {	padding:2em 1em;  margin:0; height:auto;  width:100%;   }


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


.boxi2 {		width:48%;       }
.kuvaele {	width:46%;  margin:22px 2%;   max-width:666px;   	}	
.kuvaelekorkea {	width:30%;  margin:22px 1.66%;  border-radius:11px;  	}


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

.yhteysboxi1 {	width:41%;       }
.yhteysboxi2 {	width:54%;       }
.yhteysboxi3 {	width:100%;       }

	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	






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

.alueingressi {	padding:77px 3% 88px 3%;    	}
.ingressivasen p {	font-size:133%;     }
.pampula {	font-size:122%;  }


.boxialue2 {	margin:33px 0 0 0; 	}
.boxi2 {		width:100%;   margin-top:33px;    }




.yhteysboxi1 {	width:100%;  padding-left:11%;       }
.yhteysboxi2 {	width:100%;  margin-top:0;   padding-left:11%;      }
.yhteysboxi3 {	width:100%;       }
.yhteysotsikko2 {	display:none; 	}

.kuvaele {	width:100%;  max-width:666px;   margin:22px auto;    	}	

	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	








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

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

.leveeotsikko {	font-size:144%;  padding:66px 3% 0 7%;    }

.alueimage2 {	padding:0 0 33px 0;   width:100%;      }

.logolohko { 	width:100%;   }

nav {		height:40px; width:calc(100% - 6px);  max-width:100%;  top:3px;  right:3px;   }
ul {		margin-top:0; position:static;  display:none; }
.nnv {	 	height:4em; width:100%;  margin-bottom:0px;   }

.aluekuvagalleria {	padding: 44px 5% 0 5%; display:table; 	}
.kuvaele {	width:100%;  margin:22px auto;   display:table;  	}	
.kuvaelekorkea {	width:100%;  max-width:666px;  margin:22px auto;   display:table;  	}	


.yhteysboxi1 {	padding-left:3%;       }
.yhteysboxi2 {	padding-left:3%;      }


	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	










/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/

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

.ypad66 { 	padding-top:66px; }
.ypad33 { 	padding-top:33px; }
.ypad0	 { 	padding-top:0; }
.apad66 { 	padding-bottom:66px; }
.apad33 { 	padding-bottom:33px; }
.apad0	 { 	padding-bottom:0; }

.ymarg66 { 	margin-top:66px; }
.ymarg33 { 	margin-top:33px; }
.ymarg0 { 	margin-top:0; }
.amarg66 { 	margin-bottom:66px; }
.amarg33 { 	margin-bottom:33px; }
.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/taustakuva.jpg);  background-size:cover;  background-position:0 0;   min-height:555px;  }

.levee100 {	width:100%; }
.yhdessa {	white-space: nowrap;   }
.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	*/	
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/