.div {	border:1px red solid; 	}

body {	margin:0;  word-spacing:0.1em;  letter-spacing:0.07em;  
	background-image:url(kuvat/kuva00.jpg);  background-size:cover;   background-position: 70% 50%; background-attachment:fixed; 
font-family: Arial, Helvetica, Tahoma, "Liberation Sans", "DejaVu Sans", "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;	}


.perusvari {	color:hsl(36,100%,50%);	}

h3 {		padding: 0 11% 22px 11%;  margin: 0;  font-size: 133%;    	}
p {		padding: 11px 11%;  margin: 0;  font-size: 111%;    line-height:155%;	}
.pampula {	padding:0 0 0 7%;  margin:11px 2% 11px 11%; font-size:99%;  background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  	background-position: 0 0.5em;  background-repeat: no-repeat;  line-height:144%;  }
.copyright {	margin:33px auto;  padding:0; text-align:center;  background-color:hsl(0,0%,88%);  width:15em;  font-size:88%;	}

.sivualue {	border-color:hsl(36,100%,50%);  border-width:22px 0;  border-style:solid;  width:100%;  width:100%;  max-width:1920px;  display:table;	}
.alueimage {	width:100%;  display:table; 	}


.logontausta {	width:100%; 	}
.logolohko { 	margin:0 auto;  background-color:hsla(0,100%,100%, 0.8);  width:100%;  display:table;    }
.logokuva { 	width:80%;  max-width:444px;  margin:44px auto;     }
.sloganlohko { 	width:77%; margin:0 auto; text-align:center; padding: 33px 5%;  background: linear-gradient( 90deg, transparent , hsl(36,100%,50%, 0.7) , transparent );  }
.slogan {		color:hsl(0,100%,100%);  font-size: 200%;   font-style:italic;     }


.tekstilinkki:link {	color: hsl(222,51%,39%);   text-decoration: underline; }  
.tekstilinkki:visited {	color: hsl(222,51%,39%); text-decoration: underline; }
.tekstilinkki:hover {	color: hsl(0,82%,48%);   text-decoration: none; }

.nnkele {	 	bottom:26px;  right:4px;  position:fixed;   }
.nnk:link { 	background-image:url(kuvat/nnkoy0.png);   }
.nnk:visited { 	background-image:url(kuvat/nnkoy0.png);     }
.nnk:hover { 	background-image:url(kuvat/nnkoy255.png);  background-color:hsl(0,0%,55%);  }
.nnk {	 	background-color:hsl(36,100%,50%);  border-radius:11px;  border:1px hsl(0,0%,55%) solid;  height:40px;  width:80px;  background-size:30px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



.boxialue2 {	width:94%;  margin:0 auto; display:flex;  justify-content:space-around;  flex-wrap:wrap;  } 
.boxi2 {		margin-top:111px;  width:45%; border-radius:33px;  border:3px hsl(0,0%,100%) solid;   }
.boxi21 {		padding: 3em 0 2em 0;  background-color:hsl(0,100%,100%, 0.8);    	}				
.boxi22 {		background-image:url(kuvat/kuva1.jpg);  background-size:cover;  background-position: 70% 50%; min-height:444px;  	}
.boxi23 {		background-image:url(kuvat/kuva2.jpg);  background-size:cover;  background-position: 20% 50%; min-height:444px;  	}
.boxi24 {		padding: 3em 0 2em 0;  background-color:hsl(0,100%,100%, 0.8);  	}				


.yhteysboxi1 {	width:30%;  background-image:url(kuvat/kuvay.jpg);  background-size:cover;  background-position:100% 50%; 	}
.karttakuva {	width:222px;  height:222px;  float:right;  margin:33px; 	}

.yhteysboxi2 {	width:60%; background-color:hsla(0,0%,100%, 0.8);  }
.yhteysotsikko {	padding:33px 3%;  text-align:center;  font-size:177%;  border-radius:33px 33px 0 0;  background: linear-gradient( 90deg, transparent , hsl(36,100%,50%, 0.7) , transparent );   }
.yhteyssidos {	padding-bottom:33px; width:100%;  display:flex;  justify-content:space-around; 	}
.yele1 {	 	margin-top:22px; 	}
.yele2 {		margin-top:22px; 	}
.yhteysteksti {	margin:11px 0 0 0;  font-size:111%;    }
.haiveviiva {	background:linear-gradient( 90deg, hsl(0,100%,100%, 0.1 ) , hsl(0,100%,100%, 1) , hsl(0,100%,100%, 0.1 ) );  margin:55px auto; height:1px;  width:44%;   }









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

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


.boxialue2 {	margin-top:77px; 	}
.oikeaensin { 	flex-direction:column-reverse; }
.boxi2 {		width:100%;  margin-top:11px;    	}				


.yhteysboxi2 {	margin-top:11px;  }
.haiveviiva {	width:66%;   }


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









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

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

.yhteyssidos {	flex-direction:column;  width:14em;  margin:0 auto; 	}
.yele1 {	 	margin-top:22px; 	}
.yele2 {		margin-top:22px; 	}
.yhteysotsikko {	text-align:center;   }
.yhteysteksti {	margin:11px 0 0 0;  font-size:111%;  text-align:center;   }
.haiveviiva {	width:88%;   }


h3 {		padding:0 5% 22px 5%;  font-size: 122%;    	}
p {		padding:11px 5% 11px 5%;   	}
.pampula {	padding:0 0 0 22px;  margin:11px 5% 11px 5%;   }


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





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

/*	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/kuva.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%;  }
.eimarginaalia {	margin-right:0;   }










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

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