.div {	border:1px red solid; 	}

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


.oralinturkoosi {	background-color:hsl(186,60%,62%);	color:rgb(101,205,217);	}
.oralinvihrea {	background-color:hsl(129,33%,60%);	color:rgb(119,187,129);	}

.sinappi {	background-color:hsl(186,60%,62%);	color:rgb(249,207,62); }




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

h1 { 	padding:66px 0 0 0;  margin:0; font-size:255%;  margin:0; color:hsl(0,0%,0%); font-weight:normal;  text-align:center; letter-spacing:0.2em;   }
.otsikkolevee { 	padding:66px 0 0 0;  margin:0; font-size:188%;  margin:0; color:hsl(0,0%,0%); font-weight:normal;  text-align:center; letter-spacing:0.2em;  }
h3 { 	padding:0 0 11px 0;  margin:0;  font-size:133%;   color:hsl(0,0%,0%);  letter-spacing:0.1em;   }
.boxiotsikko  { 	padding:0 0 11px 0;  margin:0;  font-size:144%;   color:hsl(0,0%,0%);  text-align:center; letter-spacing:0.1em;   }
p {		padding:22px 0 0 0;  margin:0; font-size:122%; color:hsl(0,0%,0%);  line-height:144%;    }
.otsikkopieni {	padding:22px 0 0 0;  margin:0; text-align:center; font-size:155%;   line-height:144%;    }
.pampula {	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;    }
.alinteksti {	padding:22px 3%;  text-align:center; 	}
.pieniteksti {	padding:11px 3%;  margin:0; font-size:99%; color:hsl(0,0%,0%);  line-height:144%;    }
.kavennettuteksti {	max-width:1200px;  margin:33px auto; 	}



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

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

.alueingressi {	padding: 0 11% 66px 11%;    width:100%;  display:flex;  justify-content:space-between;  	}
.ingrvasen  {	width:58%;   margin:66px 0 0 0;     }
.ingrteksti {	padding:0;   margin:0px 0 22px 0px;  font-size:155%;  line-height:155%;    }
.ingroikea  {	width:33%;   margin:66px 0 0 0;     }
.ingrotsikko {	padding:0;   margin:0 0 0.5em 0;  font-size:177%;  line-height:155%;    }
.ingrpamp {	padding:0 0 0 7%;  margin:0 0 11px 1%;   font-size:155%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:155%;   }




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

.logolohko { 	position:absolute;  top:30%;  width:100%;  text-align:center;  padding:0;    }
.logoteksti1 {	font-size:199%;  margin:0; padding:0.6em 3%;  word-spacing:0.12em;  letter-spacing:0.1em;
		width:100%;  color:hsl(186,60%,62%);    font-family: 'Montserrat', sans-serif;
		background: linear-gradient( 90deg, transparent, hsl(0,0%,100%) 30%, hsl(0,0%,100%) 70%, transparent ); }
.logoteksti2 {	font-size:199%;  margin:22px 0 0 0;  color:hsl(0,0%,22%);    }
.logoteksti3 {	font-size:133%;  margin:11px 0 0 0;  font-weight:normal;  padding:0;  color:hsl(0,0%,22%);    }

.imageslogan {	width:100%;  bottom:22px;  position:absolute;  font-size:155%;  text-align:center;  padding:0 3%;  color:hsl(0,0%,88%);   }
.logooral {	width:111px;  float:right;  margin:88px 3% 0 0; 	}



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

nav {		width:90%;  top:22px;  left:22px;   z-index: 111;  display:table; position:fixed;    }
ul { 		width:100%; list-style-type:none;  margin:0;  padding:0;  position:absolute;    }
li { 		display:inline-block;  float:left; text-align:center; 	 }			
li a { 		width:auto;  min-width:4em;  margin:0 1em 0 0;  height:2em;  line-height:0em; font-size:1em;  
		background-color:hsl(186,60%,62%);  color:hsl(0,0%,100%); border:1px hsl(0,0%,100%) solid; 
		border-radius:1em; text-decoration: none;  text-align:center;  display:block; 	padding: 1em 1.5em;    }	
li:hover a { 	background:hsl(186,60%,42%);   }								
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:22px;  left:22px;  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(186,60%,42%);   }
.nnk {	 	background-color:hsl(186,60%,62%);  border-radius:50%;  border:1px hsl(0,0%,77%) solid; 
		height:50px;  width:50px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }


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

.boxialue2 {	width:100%;  display:flex;  justify-content:space-between;  } 
.boxi2 {		width:45%;  margin:66px 0 0 0;  padding:0 0 0 0;  position:relative;   }
.boxiotsikko2 {	margin:0;  padding:0 0 0.5em 0; font-size:166%;  word-spacing:0.1em;  letter-spacing:0.08em; 	}
.boxiteksti2 {	padding:1em 0% 0 0%;  font-size:111%;  line-height:155%; }
.boxipamp2 {	padding:0px 0px 0px 11%;  margin:0.8em 0 0 0;  font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.6em;  background-repeat:no-repeat;  line-height:155%;   }

.kuultoalue {	width:100%;  position:relative; 	}
.boxikuva2 {	width:100%;	}
.kuultootsikko2 {	margin:0;  padding:1em 1em;  font-size:166%;  text-align:center;  background-color:hsla(0,100%,100%, 0.8);  width:100%;  position:absolute;  top:0;  word-spacing:0.1em;  letter-spacing:0.08em; 	}


.boxialue3 {	width:100%;  display:flex;  justify-content:space-between;  } 
.boxi3 {		width:30%;  margin:66px 0 0 0;  padding:0 0 0 0;  position:relative;   }
.boxikuva3 {	width:100%;	}
.boxiotsikko3 {	margin:0;  padding:22px 0 0 0; font-size:144%;  text-align:center; }
.boxiteksti3 {	padding:1em 0% 0 0%;  font-size:111%;  line-height:155%; }
.boxipamp3 {	padding:0px 0px 0px 11%;  margin:0.8em 0 0 0;  font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.6em;  background-repeat:no-repeat;  line-height:155%;   }

.kuultoalue { 	width:100%; position:relative; }
.kuultootsikko {  	margin:0;  padding: 1em 1em;  background-color:hsla(60,100%,50%, 0.5);   position:absolute; width:100%; text-align:center;
		font-size:133%;  bottom:0;  color:hsl(0,0%,100%);  letter-spacing:0.1em;  font-weight:normal;  text-transform:uppercase;  }
.boxikuva3 {	width:100%;  border-radius:55px 55px 0 0; 	}

.boxialue4 {	width:102%;  margin-left:-1%; display:flex;  justify-content:space-between;  flex-wrap:wrap;  } 
.boxi4 {		width:23%;  margin:66px 1% 0 1%;  padding:0 0 0 0;   }
.boxikuva4 {	width:100%;	}
.boxiotsikko4 {	margin:0;  padding:1em 11% 1em 0; font-size:122%;  text-align:center; word-spacing:0.1em;  letter-spacing:0.08em; 	}
.boxiteksti4 {	padding:0.3em 0%;  font-size:111%;  line-height:155%; }
.boxipamp4 {	padding:0px 0px 0px 44px;  margin:0.3em 0;  font-size:111%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.6em;  background-repeat:no-repeat;  line-height:155%;   }

.rivialue4 {	width:100%; display:flex;  justify-content:space-between;  flex-wrap:wrap;  } 
.riviboxi4 {	width:23%;  margin:66px 0 0 0;    }
.rivikuva4 {	width:100%;	}



/*    erikoisboxit	==============================================================================================================	*/

.boxialuesuhde {	width:100%;  display:flex;  justify-content:space-between;  } 
.boxikapee {	width:30%;  margin:66px 0 0 0;   }
.boxilevee {	width:65%;  margin:66px 0 0 0;   }




/*    capi	==============================================================================================================	*/

.capiylin {  	background-image:url(kuvat/capiylin.jpg);  height:555px; position:relative;  background-position:50% 0; 
		background-attachment:fixed;  background-repeat:no-repeat;  background-size:1920px;  } 

.capi2 { 		background-image:url(kuvat/capi2.jpg);  height:555px;  position:relative;  background-position:center; 
		background-attachment:fixed;  background-repeat:no-repeat;   background-size:1920px;  }

.capi3 { 		background-image:url(kuvat/capi3.jpg);  height:555px;  position:relative;  background-position:center; 
		background-position:50% 50%;  background-attachment:fixed;  background-repeat:no-repeat;  background-size:1920px;  }

.capiyhteys { 	background-image:url(kuvat/capiyhteys.jpg);  height:555px;  position:relative;  background-position:center; 
		background-attachment:fixed;  background-repeat:no-repeat;   background-size:1920px;  }


.capialin {  	background-image:url(kuvat/capialin.jpg);  height:555px; position:relative;  
		background-position:50% 100%;  background-attachment:fixed;  background-repeat:no-repeat;   background-size:1920px;  }


.caption { 	position:absolute; left:0; bottom:14%; width:100%; text-align:center; color:hsl(0,0%,100%); }
.slogan {		font-size:188%;  width:100%; padding:0.5em 3em; color:hsl(0,0%,100%);  font-style:italic;  
		background:linear-gradient(90deg, transparent , hsl(186,60%,62%) , transparent );
		word-spacing:0.12em;  letter-spacing:0.1em;  font-family:"Abyssinica SIL", "Liberation Serif", FreeSerif, Serif; 	}




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

.yhteysalue {	margin:66px 0 0 0;   width:100%;  display:flex; justify-content:space-around; 	}
.yhteysboxi {	width:30%;  padding: 0 0 22px 0;  border-radius:22px;  background-color:hsl(186,60%,92%);   }

.yhteystekstialue {	height:12em;    	}
.yhteysteksti {	font-size:111%;  padding:4px 7px 4px 22px;  margin:0;  	}
.yhteysotsikko {	font-size:122%;  padding:33px 7px 7px 22px;   	}
.yhteysrako {	margin-top:0.9em;  	}
.yhteyskarttaele {	width:100%;  display:table;	}

.yhteyskuvajaana { 	background-image:url(kuvat/yhteyskuvajaana.jpg);  height:222px; background-position:50% 50%;  background-size:cover;  display:table;  width:100%;  }
.yhteyskuvacity { 	background-image:url(kuvat/yhteyskuvacity.jpg);  height:222px; background-position:40% 50%;  background-size:cover; display:table;  width:100%;  }
.yhteyskuvatoolo { 	background-image:url(kuvat/yhteyskuvatoolo.jpg);  height:222px; background-position:20% 50%;  background-size:cover; display:table;  width:100%;  }
.yhteysoral {	margin:11px auto 0 auto;  width:111px;  	}


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

.taustaohje {  	border-radius:22px; background-image:url(kuvat/taustaohje.jpg);  min-height:444px; background-position:center;  background-size:cover;  }
.taustapalvelut { 	border-radius:22px; background-image:url(kuvat/taustapalvelut.jpg);  min-height:222px; background-position:center;  background-size:cover;  }

.esitietoboxi {	padding:0 5% 22px 5%;  margin:33px 0;  width:100%;  border-radius:11px; border:3px hsl(186,60%,62%) solid; }
.esitieto {	padding:11px 0 0 0; font-size:88%;  text-align:center; 	}

.sbonus {		width:155px;  margin:22px 0 0 0; 	}





/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/

@media screen and (max-width :1155px)	{	

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

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



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

.logoteksti1 {	background:hsl(0,0%,100%);  }

.alueingressi {	padding: 0 5% 66px 5%; flex-direction:column;   	}
.ingrvasen  {	width:100%;  margin:66px 0 0 0;      }
.ingroikea {	width:100%;  margin:66px 0 0 0;      }



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

nav {		max-width:444px;  background:transparent;  height:auto;  }
ul {		margin-top:3.5em; position:static;  display:none; }
li {		margin:0;	float:right; }
ul li a {		padding:3em 1em;  margin:2px 0 0 0; height:auto; border-radius:3.5em;  border-width:1px 0 0 0;  border-color:hsla(0,100%,100%, 0.5);  border-style:solid;   }
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/nnv255.png);  background-color:hsl(186,60%,42%);  }
.nnv {	 	float:left;  border-radius:50%; border:1px hsl(0,0%,100%) solid; 
		background-image: url(kuvat/nnv255.png); background-color:hsl(186,60%,62%); 
		height:50px;  width:50px;  background-size:30px;  margin-bottom:0px;   
		background-repeat:no-repeat;  background-position:50% 50%;  
		display:block;  text-decoration:none;  }

 

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

.boxialue2 {	flex-direction:column;   } 
.boxi2 {		width:100%;  }

.boxialuesuhde {	flex-direction:column;   } 
.boxikapee {	width:100%;    }
.boxilevee {	width:100%;    }

.boxialue3 {	flex-direction:column;   } 
.boxi3 {		width:100%;  }



/*    erikoisboxit	==============================================================================================================	*/
/*    capi	==============================================================================================================	*/
/*    yhteydet	==============================================================================================================	*/

.yhteysalue  {	flex-direction:column;  margin:66px auto 0 auto; max-width:444px; 	}
.yhteystekstialue {	padding-left:11%;     	}
.yhteyskuvajaana { 	  }
.yhteyskuvacity { 	height:222px;   }
.yhteyskuvatoolo { 	height:222px;   }

.yhteysboxi {	width:100%;     }
.yhteysboxi2 {	margin:66px 0;  	}





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

.taustapalvelut { 	min-height:333px;   }


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





/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/

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

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

h1 { 	font-size:155%;  }
h2 { 	font-size:144%;  }
h3 { 	font-size:133%;  }
p { 	font-size:111%;  }
.otsikkopieni {	font-size:122%;     }



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

.logokuva {	max-width:400px;  max-width:80%;	}
.logoteksti1 {	font-size:155%;     }
.logoteksti2 {	font-size:144%;     }
.imageslogan {	font-size:144%;        }


.alueingressi {	padding-top:11px;  padding-bottom:11px;   	}
.ingressibxv  {	margin:66px 0 0 0;  ;    }
.ingressiteksti {	margin:11px 0;  font-size:122%;   }
.ingressibxo  {	width:96%;  margin:33px auto;  padding-top:11px;  padding-bottom:22px;      }




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

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




/*    boxit	==============================================================================================================	*/
/*    erikoisboxit	==============================================================================================================	*/
/*    capi	==============================================================================================================	*/

.capiylin {  	height:666px; }



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

.yhteystekstialue {	padding-left:0;     	}


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

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




/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/

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

.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;   }










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

@media screen and (max-width :333px)	{	/*	======================================================================	*/
	}	
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/