.div {	border:1px red solid; 	}

body { 	margin:0;  word-spacing:0.2em;  letter-spacing:0.1em; font-family: Arial, Helvetica, Tahoma, "Liberation Sans", "DejaVu Sans", "Bitstream Vera Sans", "sans-serif";  }
	.groteskifontit {	font-family: Arial, Helvetica, Tahoma, "Liberation Sans", "DejaVu Sans", "Bitstream Vera Sans", "sans-serif";   }
	.antiikvafontit {font-family:Cormorant, "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;	}

.sininen { 		background-color: hsl(240,100%,88%); }
.punainen {		background-color:hsl(1,100%,49%);	color:rgb(249, 3, 0);   	}
.vaaleansininen {	background-color:hsl(240,100%,88%);	color:rgb(144,144,255);	}



.sivualue {	width:100%;  max-width:1920px;  margin: 0 auto;  padding:10px;  display:table;  background-color:hsl(0,0%,100%); 	}

.sinettiele {	width:200px; margin: 0 0 0 5%;  float:left;    }
h1 {			float:left;  width:calc(90% - 400px);  margin:33px 0;  padding:25px 5% 0 5%;  font-size:222%;  text-align:center;  font-weight:normal;    }
.ketjuele {	width:200px;  float:right;  margin: 66px 5% 0 0;	padding:0 0 0 0; 	}

.ketjuele2 {	width:70px;  margin:33px auto -33px auto;   	}




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

.alueylin {	margin:0;  padding: 55px 0;  width:100%;   display:table;   }
.aluelevee {	width:100%;  display:table; 	}
.aluevakio {	padding: 0 9%;  width:100%;  display:table;  }


.alueimage {	margin:55px 0 0 0;  padding:0;  width:100%;  height:999px;  display:table;  
		background-image:url(kuvat/imagekuva.png); background-size:1920px;  background-position:70% 50%;  background-repeat:no-repeat;     }
.vorverksamhet0 {	margin:55px 0 0 0;  padding:0;  width:100%;  height:666px;  display:table;  
		background-image:url(kuvat/vorverksamhet0.jpg); background-size:1920px;  background-position:50% 10%;  background-repeat:no-repeat;     }
.medlemmarnaberattar0 {	margin:55px 0 0 0;  padding:0;  width:100%;  height:666px;  display:table;  
		background-image:url(kuvat/medlemmarnaberattar0.jpg); background-size:1920px;  background-position:50% 45%;  background-repeat:no-repeat;     }
.frogorochsvar0 {	margin:55px 0 0 0;  padding:0;  width:100%;  height:666px;  display:table;  
		background-image:url(kuvat/frogorochsvar0.jpg); background-size:1920px;  background-position:50% 50%;  background-repeat:no-repeat;     }
.attblimedlem0  {	margin:55px 0 0 0;  padding:0;  width:100%;  height:666px;  display:table;  
		background-image:url(kuvat/attblimedlem0.jpg);  background-size:1920px;  background-position:50% 50%;  background-repeat:no-repeat;     }  




h2 {		margin:22px 0 0 0;  padding:0 5%;    font-size:177%;  text-align:center;  zzfont-family: Cinzel, serif;  font-weight:normal;  }
h3 {		margin:22px 0 0 0;  padding:0 5%;    font-size:177%;  zzfont-family: Cinzel, serif;  font-weight:normal;      }
p {		margin:0;  padding:11px 5% 11px 5%;   font-size:144%;  line-height:166%; 	}
.kursiivi {	font-style:italic;	}
.pampula {	margin:1px 1% 1px 9%;  padding:0px 5% 0px 7%;  font-size:133%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position:0 0.56em;  background-repeat:no-repeat;  line-height:155%;   }




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


.linkkilohko {			width:100%;  margin:22px auto;  font-size:1em;  display:table;  text-align:center; font-family: Arial, Helvetica; }
.linkkiteksti:link { 	color:hsl(0,0%,0%);  text-decoration:none;    }
.linkkiteksti:visited { 	color:hsl(0,0%,0%);  text-decoration:none;   }
.linkkiteksti:hover { 	color:hsl(240,100%,55%); text-decoration:none;       }
.linkkiteksti {	 	margin: 11px 0.3em;  padding: 0.3em 0.8em;  border-radius:0.9em;  text-align: center;  
					text-decoration: none;  white-space:nowrap;  }
.aktiivi {			background-color:hsl(240,100%,88%); color:hsl(0,0%,100%);	
					margin: 11px 0.3em;  padding: 0.3em 0.8em;  border-radius:0.9em;  text-align: center;  
					text-decoration: none;  white-space:nowrap;  }



.ynappi {	 	bottom:40px;  left:10px;  position:fixed;  border:2px hsl(240,100%,55%) solid;  font-size:0.8em; 
			text-align:center; text-decoration:none;  background-color:hsl(0,0%,100%);  
		 	margin:0 auto;  padding:0.4em 1em 0.3em 1em;  font-size:0.7em; text-align:center; display:inline-block;
			text-decoration:none;   border:2px hsl(240,100%,55%) solid;  border-radius:0.9em;  line-height:100%;  }	
.ynappi:hover{	background-color:hsl(240,100%,88%);  color:hsl(0,0%,100%); 	 	}			



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

.irtonappula:link { 	color:hsl(0,0%,0%); background-color:hsl(0,0%,100%);  text-decoration:none; }
.irtonappula:visited { 	color:hsl(0,0%,0%); background-color:hsl(0,0%,100%);  text-decoration:none; }
.irtonappula:hover { 	color:hsl(0,0%,0%); background-color:hsl(0,0%,100%); text-decoration:none; }
.irtonappula { 		min-width:5em;  height:1.7em;  margin:0 auto; border-radius:0;  text-decoration:none;
			padding:0.0em 1em 0.7em 1em;  font-size:1.0em; text-align:center; display:inline-block; } 

.raaminappula:link { 	color:hsl(0,0%,0%); background-color:hsl(0,0%,100%);  text-decoration:none; }
.raaminappula:visited { 	color:hsl(0,0%,0%); background-color:hsl(0,0%,100%);  text-decoration:none; }
.raaminappula:hover { 	color:hsl(0,0%,0%); text-decoration:none;  background-color:hsl(240,100%,88%); color:hsl(0,0%,100%);  }
.raaminappula { 		min-width:5em;  height:1.4em;  margin:0 0; border-radius:0;  text-decoration:none;  
			padding:0.0em 1em 0.8em 1em;  font-size:1.0em; text-align:center; display:inline-block;
			border:2px hsl(240,100%,55%) solid;  border-radius:0.9em;  line-height:133%;  }			

			
			

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


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


.boxialue3 {	margin:66px 0 0 0;  width:100%;  display:flex; justify-content:space-between; flex-wrap:wrap;  }
.boxi31 {		width:35%;         }
.boxi32 {		width:30%;   background-image:url(kuvat/frogorochsvar2.jpg);   
			background-position:40% 0%;  background-size:cover;  background-repeat: no-repeat;     }
.boxi33 {		width:35%;        }

.boxirako1 {	margin-top:1em;	}
.boxirako2 {	margin-top:1em;	}
.boxirako3 {	margin-top:1em;	}
.boxirako4 {	margin-top:5em;	}
.boxirako5 {	margin-top:5em;	}


.tekstiboxi {	padding:33px 0%;	}
.tekstiboxikorkea {	padding:33px 0% 111px 0%; 	}






/*	sivukohtainen räätälöinti  .....................................................................................................................................	*/


/*	index		*/
.alueingressi {	padding:66px 7% 77px 7%;  width:100%;  display:table;  	}
.ingressiteksti {	padding:0;  margin:22px 0 0px 0px;  font-size:155%;  line-height:166%;    }
.indextausta1  {	width:30%;    } 
.indextausta2  {	width:20%;  background-image:url(kuvat/indextausta2.jpg);  min-height:444px; 
		background-position:40% 0%;  background-size:cover;  background-repeat: no-repeat;  } 
.indextausta3  {	width:40%;  background-image:url(kuvat/indextausta3.jpg);  min-height:444px; 
		background-position:20% 40%;  background-size:cover; background-repeat: no-repeat;  } 

/*	vorverksamhet		*/
.vorverksamhet1 {	background-image:url(kuvat/vorverksamhet1.jpg);  background-position:30% 40%;  min-height:444px;  background-size:cover;  background-size:cover; background-repeat: no-repeat;   }
.vorverksamhet2 {	background-image:url(kuvat/vorverksamhet2.jpg);  background-position:45% 50%;  min-height:444px;  background-size:cover;  background-size:cover; background-repeat: no-repeat;   }


/*	medlemmarnaberattar - intressantinnehall	*/
.medlemmarnaberattar1 {	background-image:url(kuvat/medlemmarnaberattar1.jpg);  min-height:444px;  
			background-position:50% 50%;  background-size:cover;  background-size:cover; background-repeat: no-repeat;  } 
.medlemmarnaberattar2 {	background-image:url(kuvat/medlemmarnaberattar2.jpg);  min-height:444px;  
			background-position:50% 60%;  background-size:cover;  background-size:cover; background-repeat: no-repeat;  } 
.medlemmarnaberattar3 {	background-image:url(kuvat/medlemmarnaberattar3.jpg);  min-height:444px;  
			background-position:50% 100%;  background-size:cover;  background-size:cover; background-repeat: no-repeat;  } 
.medlemmarnaberattar4 {	background-image:url(kuvat/medlemmarnaberattar4.jpg);  min-height:444px;  
			background-position:50% 10%;  background-size:cover;  background-size:cover; background-repeat: no-repeat;  } 
.medlemmarnaberattar5 {	background-image:url(kuvat/medlemmarnaberattar5.jpg);  min-height:444px;  
			background-position:50% 10%;  background-size:cover;  background-size:cover; background-repeat: no-repeat;  } 



/*	frogorochsvar	*/
.frogorochsvar1  {	background-image:url(kuvat/frogorochsvar1.png);  min-height:333px; background-repeat:repeat; 
		background-position:0% 0;   } 



/*	attblimedlem	*/

.boxikapee  {	width:300px; margin: 99px 0 0 0;   }    
.boxilevee  {	width:calc(97% - 300px);  }
.attblimedlem1  {	background-image:url(kuvat/attblimedlem1.jpg);  width:300px;
		background-position:50% 0%;  background-size:contain;  background-repeat: no-repeat;  }    
.yhteysboxi {	width:100%;  margin: 33px 0 0 0; display:table; 	}





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

.kuva {		text-align:right;  padding:1px 2% 11px 2%;  font-size:99%;  font-variant:small-caps; font-family: Arial, Helvetica;	}
.irtolause {	text-align:center;  margin:33px auto;  width:70%;  padding: 7px 2em; }

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

.alapalkki {	margin:77px 0 0 0;  height:22px;  background-color:hsl(240,100%,88%); }

.valkeakeskelle {	margin:22px 5% 0 5%;  padding:11px 5%;  font-size:166%;  background-color:hsla(0,0%,100% , 0.8);  text-align:center;   }
.vasenteksti {	margin:22px 0 0 0; 	}
form {		font-size:122%;  margin:22px 0 22px 88px;   	}





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

	.logoele {	width:240px;  float:left;  margin: 0px 0 0 5%;  padding:33px 0 0 0; 	}
.sinettiele {	width:200px; margin:25px auto 0 auto;  float:none;   }
h1 {			float:none;  width:90%;  margin:33px auto;   padding:25px 0 0 0;  }
.ketjuele {	float:none;  margin: 66px auto 0 auto;  	}


.aluevakio {	padding: 0 5%;    }

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

.alueingressi {	padding:77px 3% 88px 3%;  width:100%;  display:table;   	}

.logolohko { 	margin:77px auto 0 auto;     }

.boxikapee  {	width:100%;  max-width:333px;  padding:22px 5%; margin:0 auto;  float:none; height:666px;   }    
.boxilevee  {	width:100%;  padding:22px 5%;  }
.yhteysboxi {	padding:22px 5%;	}


.zzboxialue3 {	margin:66px 0 0 0;  width:100%;  display:flex; justify-content:space-between; flex-wrap:wrap;  }
.boxi31 {		width:100%;         }
.boxi32 {		width:50%;  margin:0 auto;   min-height:500px;     }
.boxi33 {		width:100%;        }

.boxirako1 {	margin-top:1em;	}
.boxirako2 {	margin-top:1em;	}
.boxirako3 {	margin-top:1em;	}
.boxirako4 {	margin-top:1em;	}
.boxirako5 {	margin-top:1em;	}


form {		font-size:122%;  margin:22px 0 22px 44px;   	}

.irtolause {	width:100%;  }

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




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

.sivualue {	position:relative; 	}
.logoele {	width:160px; 	}
.sinettiele {	width:200px;   }
.ketjuele {	width:140px; 	}

.alueimage {	height:444px;  background-position:50% 50%;  }
.alueimage2 {	margin:55px 0 0 0;  padding:0;  width:100%;  height:444px;  display:table;  
		background-image:url(kuvat/imagekuva.jpg); background-size:1920px;  background-position:50% 50%;  background-repeat:no-repeat;     }


nav {		width:50px;  padding:0;  position:absolute;  top:0px;  left:0px;    }
ul {		max-width:300px;   display:none;   position:absolute;  top:66px;   }
li {		margin:0;	float:left; }
ul li a {		width:300px;  padding:1em 1em;  margin:0;  height:auto;  border-width:1px 0 0 0;    }
li:hover a {	  	}
ul li, li a {  	width:100%;  text-align:center;  }

.nnv:link {	background-image: url(kuvat/nnv0.png);       }
.nnv:visited {	background-image: url(kuvat/nnv0.png);        }
.nnv:hover {	background-image: url(kuvat/nnv0.png);  background-color:hsl(60,100%,50%);     }
.nnv {	 	float:left;   
		background-image: url(kuvat/nnv0.png); background-color:hsl(0,0%,100%); 
		height:50px;  width:50px;  background-size:30px;  margin-bottom:0px;   
		background-repeat:no-repeat;  background-position:50% 50%;  
		display:block;  text-decoration:none;  }
      
.aluevakio {	padding: 0 3%; }
.alueingressi {	  	}
.rako1 {		padding:77px 3% 0px 3%;  }
.ingressiteksti {	font-size:133%;     }
.ingrpamp {	font-size:122%;  }

.boxi2 {		width:100%;       }
.boxi3 {		width:100%;  	}


.indextausta1  {	width:100%;  margin-top:-33px;    } 
.rako2 {			padding:0; 	}
.indextausta2  {	width:40%;  margin:33px 30% 0 30%;   background-position:20% 0;   } 
.indextausta3  {	width:100%;  margin-top:33px;     } 

.oikeaensin {	flex-direction:column-reverse; 	}
.tekstiboxikorkea {	padding:33px 0% 33px 0%; 	}

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








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

h1 {		margin:44px auto 22px auto;  font-size:155%;    }
h3 {		padding:11px 0;    font-size:155%;        }
p {		margin:0;  padding:11px 0;  font-size:133%;	}

.alueylin {	padding:0;  }


.logoele {	width:70%;  max-width:200px;  margin:22px auto 0 auto;  padding:0; float:none; 	}
.sinettiele {	width:200px;  position:static;  margin: 22px auto 0 auto;   }
.ketjuele {	width:70%;  max-width:180px;  margin: 1px auto 0 auto;  padding:22px 0 0 0;  float:none;	}

.logolohko { 	max-width:100%;  width:98%;  margin-left:auto;  margin-right:auto;    }
.logokuva {	width:90%; max-width:333px;     }
.imageslogan {	font-size:144%;  }

.indextausta2  {	width:60%;  margin:33px 20% 0 20%;    } 

.nnv {	 	height:50px;  width:50px;  margin:0;    }

form {		font-size:122%;  margin:22px 0 22px 0px;   	}

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











/*	kestotietoa yyy           --------------------------------------------------------------------------------------------   */


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

.ypadmaxi { 	padding-top:111px; }
.ypadiso { 	padding-top:66px; }
.ypadpieni { 	padding-top:33px; }
.ypadmini { 	padding-top:11px; }
.ypadnolla { 	padding-top:0; }

.apadmaxi { 	padding-bottom:111px; }
.apadiso { 	padding-bottom:66px; }
.apadpieni { 	padding-bottom:33px; }
.apadmini { 	padding-bottom:11px; }
.apadnolla { 	padding-bottom:0; }

.ymargmaxi { 	margin-top:111px; }
.ymargiso { 	margin-top:66px; }
.ymargpieni { 	margin-top:33px; }
.ymargmini { 	margin-top:11px; }
.ymargnolla { 	margin-top:0; }

.amargmaxi { 	margin-bottom:111px; }
.amargiso { 	margin-bottom:66px; }
.amargpieni { 	margin-bottom:33px; }
.amargmini { 	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; }
.valkea {		color:hsl(0,0%,100%); 	}
.levee100 {	width:100%; }


.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/kuva.jpg);  background-size:cover;  background-position:0 0;   min-height:555px;  }


.sininen {	background-color:hsl(208,100%,33%);	color:rgb(0, 61, 204); }
.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(222,100%,40%);	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); }

.yhdessa {	white-space:nowrap;	}
.fontti {    	font-family:'Alfa Slab One'; 	}
.levee100 {	width:100%;  }
.erotin {		width:100%;  height:1px;  display:block;  }
.eimarginaalia {	margin-right:0;   }





