.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;	 }
.logofontti1 { font-family: 'Comfortaa', cursive; }
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;	}




.tummay {		color:hsl(196,100%,50%);	background-color:rgb(0,168,231);		}
.tummaa {		color:hsl(197,100%,29%);	background-color:rgb(0,105,147);		}
.vaaleay {	color:hsl(200,88%,78%);	background-color:rgb(148,214,248);		}
.vaaleaa {	color:hsl(200,89%,67%);	background-color:rgb(96,196,246);		}

.perusvihree	{	background-color:hsl(111,80%,50%);	}
.hovervihree	{	background-color:hsl(111,80%,88%);	}
.tummanvihree	{	background-color:hsl(111,80%,22%);	}
.haaleavihree	{	background-color:hsl(111,80%,88%);	}





/*    perustekstit    */

h1  {		padding:22px 3%;  margin:0 0 33px 0;  font-size:222%;  text-align:center;  font-weight:normal;  
		color:hsl(0,0%,100%); background-color:hsl(111,80%,22%); font-family: 'Montserrat', sans-serif; }
h2 {		padding:22px 3%;  margin:0 0 33px 0;  font-size:222%;  text-align:center;  font-weight:normal;  
		color:hsl(0,0%,100%); background-color:hsl(111,80%,22%); font-family: 'Montserrat', sans-serif; }
h3 {		padding:0;  margin:55px 0 11px 0;  font-size:111%;  font-family: 'Montserrat', sans-serif;  }
p {		padding:17px 0 0 0;  margin:0;  font-size:111%;  line-height:145%;  width:100%;   }
.pamp {	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%;   }
.apuotsikko {	padding:0 0 22px 0;  margin:0;  font-size:122%;  font-style:italic; line-height:155%;  width:100%;   }
.ymargh3p {	margin-top:calc(1.22em + 11px); 	}
.ymargh30p {	margin-top:22px; 	}


/*    alueet    .......................................................................................................................................................        */

.sivu {		width:100%;  display:table; 	}
.sivulohkovarilla {	padding-top:66px;  padding-bottom:66px; background-color:hsl(111,80%,88%); width:100%;  display:table; 	}
.sivulohkovalkea {	padding-top:66px;  padding-bottom:66px; background-color:hsl(0,0%,100%); width:100%;  display:table; 	}
.taustavalkea {	background-color:hsl(0,0%,100%);  	}
.taustavari {	background-color:hsl(111,80%,88%);  	}
.aluevakio {	padding-left:9%;  padding-right:9%;  background-color:hsl(0,0%,100%);  width:100%;  display:table;  }

.alueimage {	width:100%;  position:relative;  background-repeat:no-repeat;  display:table;   
		background-image:url(kuvat/imagekuva.jpg);  background-size:1920px;  background-position:50% -222px;  }



.imagekuulto {	width:100%;  display:table; 
		background:linear-gradient( 120deg, hsla(0,0%,100%, 0.8) 777px, transparent 777px ); 	   }

.alueingressi {	padding:0 9% 33px 9%;  width:100%;  display:table;   	}
.ingrbxv  {	width:45%;   margin:0px 0 0 0;  float:left;    }
.ingrt {		padding:0;   margin:0 0 22px 0px;  font-size:145%;  line-height:155%;    }
.ingrbxo  {	width:45%;   margin:0px 0 0 0;  float:right;   }
.ingrpamp {	padding:0px 0px 0px 11%;  margin:0 0 17px 0;   font-size:133%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:145%;   }




/*    logo   .......................................................................................................................................................        */

.logolohko { 	width:80%;  max-width:27em;  position:absolute; top:77px;  left:3%;  display:table;   }
.tekstilogo {	font-weight:bold; font-size:333%;  margin:44px 0 0 0;  text-align:center;  color:hsl(111,80%,22%);   font-family: 'Megrim', cursive;
text-shadow: 1px 1px 0 hsl(0,0%,100%),
1px -1px 0 hsl(0,0%,100%),
-1px 1px 0 hsl(0,0%,100%),
-1px -1px 0 hsl(0,0%,100%),
1px 0px 0 hsl(0,0%,100%),
0px 1px 0 hsl(0,0%,100%),
-1px 0px 0 hsl(0,0%,100%),
0px -1px 0 hsl(0,0%,100%); }

.puhelinnumero {	font-size:1.5em;  position:absolute;  left:5%;  top:0.2em;  width:11em;  background-color:hsl(111,80%,77%); 
		text-align:center;  border:1px hsl(111,80%,50%) solid;  border-radius:1em;  color:hsl(0,0%,0%);  
		padding:0.3em 0 0.1em 0;  word-spacing:0.1em;  letter-spacing:0.12em;  z-index:2222;    }
.imageslogan {	width:555px;  margin:400px 5% 66px 0;  font-size:188%;  text-align:right; float:right;   
		color:hsl(0,0%,80%);  text-shadow: 1px 1px 0 hsl(0,0%,0%);  word-spacing:0.2em;  letter-spacing:0.1em;   }

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





/*    .......................................................................................................................................................        */

		

.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(111,80%,88%);  }
.nnk {	 	background-color:hsl(111,80%,50%);  height:50px;  width:50px;  border: 1px hsl(111,80%,50%) solid;  border-radius:5px;  
		background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }

.tekstilinkki:link {	color:hsl(25,100%,50%);   text-decoration:underline; }  
.tekstilinkki:visited {	color:hsl(25,100%,50%); text-decoration:underline; }
.tekstilinkki:hover {	color:hsl(300,80%,20%);   text-decoration:none; }

.linkkinappi {	  	width:15em;  margin:22px auto;  text-align:center;  display:block;     }
.linkkiteksti:link { 	color:hsl(0,0%,100%);  background:hsl(111,80%,50%);     }
.linkkiteksti:visited { color:hsl(0,0%,100%);  background:hsl(111,80%,50%);      }
.linkkiteksti:hover { 	color:hsl(0,100%,100%);  background:hsl(111,80%,22%);    }
.linkkiteksti {		padding:0.6em 0.5em 0.4em 0.5em;  border-radius:1em;  text-decoration:none;  display:block;   }



/*    boxit    .......................................................................................................................................................        */


.raamilohko {	width:82%;  margin:44px auto 0 auto;  padding:33px 3% 33px 3%;  border:2px hsl(111,80%,22%) solid;  border-radius:33px;
		background-color:hsl(0,0%,100%); 	}
.sivulohkovalkea .raamilohko {  background-color:hsl(111,80%,88%); 	}
.sivulohkovarilla .raamilohko { background-color:hsl(0,0%,100%);  	}

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

.boxialue23 {	width:100%;  margin:0;  padding:0 0 33px 0;  display:flex; justify-content:space-between;   	}
.boxi13 {		margin:44px 0 0 0; width:33%;       }
.boxi23 {		margin:44px 0 0 0; width:60%;   	}

.boxialue3 {	padding:0;  width:100%;  display:flex; justify-content:space-between; 	}
.boxi3 {		margin:44px 0 0 0;  width:30%;        }
.boxikuva3 {	width:100%;   	}
.pienih3 {	padding:0;  margin:0px 0 11px 0;  font-size:111%;  font-family: 'Montserrat', sans-serif;  }

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


.aluealin {	margin-top:111px; padding:33px 66px;  width:100%;  background-color:hsl(111,80%,50%);  display:table;  }
.alalause {	text-align:center;  font-size:133%;   color:hsl(0,0%,100%);     }



/*    harvinaiset    .......................................................................................................................................................        */

.haiveviivalogo { 	height:1px;  width:77%;  margin:33px auto 0 auto;  background:linear-gradient( 90deg, transparent , hsl(0,0%,22%) , transparent );   }
.haiveviiva4422 { 	float:left; height:1px;  width:50%;  margin:44px 25% 22px 25%;  background:linear-gradient( 90deg, transparent , hsl(0,0%,44%) , transparent );   }
.erotinviiva    { 	height:3px;  width:100%;  margin:44px 0 22px 0;  background-color:hsl(111,80%,22%);  }

.apuotsikko {	padding-top:33px; 	}
.leveeotsikko {	text-align:center; font-size:177%;  padding:77px 9% 0 9%;  margin:0;  width:100%;  
		word-spacing:0.14em;  letter-spacing:0.07em;  display:table;   }
.leveeotsikkoylin {	text-align:center; font-size:177%;  padding:11px 9% 0 9%;  margin:0;  width:100%;  
		word-spacing:0.14em;  letter-spacing:0.07em;  display:table;   }
.leveeteksti  {	text-align:center; font-size:122%;  padding:11px 9% 0 9%;  margin:0;  width:100%;  
		line-height:155%;  word-spacing:0.14em;  letter-spacing:0.07em;  display:table;   }
.alateksti {	background-color:hsl(0,0%,100%); padding:11px 5%;  margin:0;  font-size:94%;  line-height:144%;   }

.ilmoittautuminen {	margin:22px 0;  padding:1em 3%; border:1px hsl(111,80%,22%) solid;  text-align:center; 	}


.tausta1 {	background-image:url(kuvat/kuva3.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta2 {	background-image:url(kuvat/kuva4.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta3 {	background-image:url(kuvat/kuva3b.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta4 {	background-image:url(kuvat/kuva5.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta5 {	background-image:url(kuvat/kuva1.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta6 {	background-image:url(kuvat/kuva4b.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta8 {	background-image:url(kuvat/kuva2tausta.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta7 {	background-image:url(kuvat/kuva1tausta.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta9 {	background-image:url(kuvat/kuva9.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta10 {	background-image:url(kuvat/kuva7.jpg);  background-position:50% 50%;  background-size:cover;  min-height:333px;  border-radius:7px;   }
.tausta11 {	background-image:url(kuvat/kuva2tausta.jpg);  background-position:50% 50%;  background-size:cover;  min-height:222px;  border-radius:7px;   }
.tausta12 {	background-image:url(kuvat/oppilas.jpg);  background-position:50% 0px;  background-size:cover;  min-height:444px;  border-radius:7px;   }




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

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

.imagekuulto {	background:linear-gradient( 180deg, hsla(0,0%,100%, 0.8) 311px, transparent 311px ); 	   }
.logolohko { 	margin:33px auto 0 auto;  position:static;     }
.imageslogan {	width:100%;  margin:288px 0 55px 0;  padding:0 3%; text-align:center; float:none;   }

.ingrbxv  {	width:100%;   margin:44px 0 0 0;  float:none;    }
.ingrt {		padding:0;  margin:11px 0px;    }
.ingrbxo {	width:100%;  margin:33px 0 0 0;  float:none;    }
.leveeteksti  {	font-size:111%;  padding:33px 3% 0 3%;    }
	
.raamilohko {	width:96%;  max-width:888px;  margin:44px auto 0 auto;  padding: 0 4% 33px 4%;	}
.sivulohkovalkea .raamilohko {  background-color:hsl(111,80%,88%); 	}
.sivulohkovarilla .raamilohko { background-color:hsl(0,0%,100%);  	}
.boxialue2 {	flex-direction:column;  	}
.boxi2 {		width:100%;   margin:33px auto 0 auto;     }		
.oikeaensin {	flex-direction:column-reverse; }
.pilari1300 {	margin-top:0; 	}
.ymargh3p {	margin-top:-33px; 	}

.boxialue23 {	flex-direction:column;  	}
.boxi13 {		width:100%;       }
.boxi23 {		width:100%;   	}

.boxialue3 {	flex-direction:column;  	}
.boxi3 {		width:100%;   margin:33px 0;   max-width:666px; margin-left:auto;  margin-right:auto; 	}

.boxiw {		margin:66px auto 0 auto;  width:100%;  max-width:666px;       }
		
.yhteysalue3 {	width:100%;  max-width:1600px;  margin-left:auto;  margin-right:auto; padding:0 0 55px 0;	 } 
			
.yhteysboxi1 {		}
.yhteysboxi2 {		}
.yhteysboxi3 {		}

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





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

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

.nnk {	 	height:40px;  width:40px;  background-size:25px;    }


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









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

.alueingressi {	padding:0 3% 11px 3%;    	}
.ingrbxv  {	margin:0 0 0 0;  ;    }
.ingrt {		margin:11px 0;  font-size:122%;   }
.ingrbxo  {	width:96%;  margin:0px auto;  padding-top:11px;  padding-bottom:22px;      }
.ingrpamp {	padding:0px 0px 0px 33px;  margin:0 0 22px 0;   font-size:111%;     }

.boxialue4 {	padding:0 3%;   }
.boxi4 {		margin:33px 0 0 0; width:48%;       }

.tekstilogo {	font-size:255%;  margin:44px 0 0 0;  padding: 0 3%;  text-align:center;   }
.logoteksti {	padding:7px 0;  margin:11px 0 33px 0; font-size:177%;  text-align:center;    }
.imageslogan {	font-size:144%;  margin:222px 0 55px 0;  }



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

.boxialue3 {	padding:0 0 33px 0;	}

.isoteksti {	font-size:111%;    }

.pamp1 {	padding:0px 0px 0px 9%;   margin:11px 0 0 0;   }
.pamp2 {	padding:0px 0px 0px 11%;  font-size:122%;   }
.pamp3 {	padding:0px 0px 0px 11%;  margin:11px 0 0 0;   font-size:111%;     }

.boxialue3 {	padding:0 0 55px 0;    } 


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




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





@media only screen and (min-width:100px) 	{	/*	============================================================	*/

nav {				text-decoration:none;  width:100%;  position:absolute;  top:0px;  left:0;   z-index:1000; 	}
#menu ul {  			padding:0;  }
#menu .ylintaso {  			background-color:hsl(111,80%,50%);  display:none;  }
#tm:checked + .ylintaso {  		display:block;  }
#menu input[type="checkbox"], #menu ul span.kolmioalas {  display:none;  }
#menu li, #linkisto, #menu .submenu { 	   }  /*    linkkien välinen pystyviiva   */
#linkisto {  			      }  /*    linkkien välinen pystyviiva ja alaspudotuksen alaviiva    */
#menu li {  			border-width:0 0 1px 0;  border-color:hsl(111,80%,45%);  border-style:solid;      }  /*    linkkien välinen pystyviiva ja alaspudotuksen alaviiva    */
#menu .submenu {  			border-width:1px 0 0 0;  border-color:hsl(111,80%,45%);  border-style:solid;  margin:0 1em;  } 	 /*   alin taso */
#menu .submenu li:last-child {  	border-width:0;  }
#menu li, #linkisto, #menu a {  	position:relative;  display:block;  color:hsl(0,0%,100%);   }
#linkisto, #menu a {  		padding:1em 14px 0.5em 0;  } /*  hampurilaisen sijainti  */
#menu a { 			padding:2em 1.5em; background-color:hsl(111,80%,50%);  text-decoration:none;  } /*  linkkien korkeus  */
#menu a:hover {  			color:hsl(111,80%,22%);  background-color:hsl(111,80%,88%);    }  /*   alaspudotus hover  */
#menu .submenu {  			display:none;  }
#menu input[type="checkbox"]:checked + .submenu {  display:block;  }
#menu .submenu a:hover {  		color:hsl(111,80%,22%);    }
#linkisto .kolmioalas, #menu li label.kolmioalas {   position:absolute;  right:0;  top:0;  }  /*  kolmion tausta  */
#menu label.kolmioalas, #linkisto span.kolmioalas {  padding:2em 2em;  font-size:1em;  text-align:center;   /*  kolmion koko ja padding  */
				background-color:hsla(0,0%,0%, 0.125); color:hsla(0,100%,100%, 0.75); } /*   kolmion tausta  */



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





@media only screen and (min-width:333px) 	{	/*	============================================================	*/

nav {  		width:100%;  max-width:500px;   top:33px;  left:auto;  right:0px;  } 

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

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






@media only screen and (min-width:1301px)	 {	/*	============================================================	*/

nav { 				width:100%;  max-width:100%;  top:0;  right:0;  background-color:hsl(111,80%,50%); }
#menu .ylintaso {    		float:right; display:block;     }
#linkisto,   #menu label.kolmioalas { 	display:none;  }
#menu ul span.kolmioalas {    	display:none;  }
#menu li {   		 	float:left;  border-width:0 0 0 1px;     } 
#menu .submenu li {    		float:none;  }
#menu .submenu {    		border-width:0;  margin:0;  position:absolute;  top:100%;  left:0;  z-index:3000;  } 	/* alasputoava nappula */
#menu .submenu, #menu input[type="checkbox"]:checked + .submenu {    display:none;  }
#menu .submenu li {    		border-width:1px 0 0 0;  border-color:hsl(111,80%,50%);  border-style:solid;  width:100%;  }  	/* alasputoavan alueen leveys */
#menu .submenu li:last-child {  	border-width:1px 0 0 0;  }
#menu li:hover > input[type="checkbox"] + .submenu {    display:block;  }
#menu li {	  		text-align:center;  width:14em; 	  } 
#menu .submenu li {    		text-align:left; width:14em; 	}  /*  alaspudotus tekstit vasemmalle, leveys  */	
#menu .submenu li {    		text-align:left; width:14em; 	}  /*  alaspudotus tekstit vasemmalle, leveys  */	
#menu ul {  			margin:0px;   }
#menu a { 			padding:1em 1.5em; text-decoration:none;  } /*  linkkien korkeus  */


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







/*	vakiomääritteitä	*/

.yhdessa {	white-space:nowrap;   }
.erotin {		width:100%;  height:1px;  display:block;  }

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

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

.apad66 {		padding-bottom:66px; 	}
.ypad0 {		padding-top:0; 	}


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

.fontti {    	font-family:'Alfa Slab One'; 	}

.liukusavypysty { 	background:linear-gradient( hsl(111,80%,50%) , hsl(111,80%,100%) ); }
.zzhaiveviiva { 	height:1px;  width:77%;  margin:33px auto; background:linear-gradient( 90deg, transparent , hsl(0,0%,100%) , transparent );   }
.zztaustakuva {	background-image:url(kuvat/kuvakapea33.jpg);  background-size:cover;  background-position:0 0;   min-height:555px;  }

.sininen {	background-color:hsl(240,48%,41%);	color:rgb(54, 54, 155); }
.keltainen {	background-color:hsl(60,100%,50%);	color:rgb(255, 255, 0); }
.oranssi {	background-color:hsl(25,100%,50%);	color:rgb(255, 106, 0); }
.vihree {		background-color:hsl(120,100%,33%);	color:rgb(0, 166, 0); }
.punainen {	background-color:hsl(0,82%,48%);	color:rgb(222, 22, 22); }
.valkoinen {	background-color:hsl(0,100%,100%);	color:rgb(255, 255, 255); }
.musta {		background-color:hsl(0,100%,0%);	color:rgb(0, 0, 0); }