.div {	border:1px red solid; 	}

body {	background-color:hsl(0,0%,96%);  margin:0;  color:rgb(0,0,0);  word-spacing:0.1em;  letter-spacing:0.07em;  
	font-family: Arial, Helvetica, Tahoma, "Liberation Sans", "DejaVu Sans", "Bitstream Vera Sans", "sans-serif";  
	  }
 
body, html {	height:100%;  margin:0;  }
td { 	padding:0;  vertical-align:top;  }
table { 	border-collapse:collapse;  empty-cells:show;}
img {		border:0;  display:block; }
* 	{	box-sizing:border-box; 	}


.copyright {	margin:33px auto;  padding:0; text-align:center;  background-color:hsl(0,0%,88%);  width:15em;  font-size:88%;	}



.peruspunainen {	color:hsl(360,87%,37%);  background-color:rgb(176,12,12);  	}
.fontti {    	font-family: 'Alfa Slab One'; 		}


h1 {		padding:77px 5% 0 5%; margin:0;  font-size:222%;  color:hsl(0,0%,22%);  font-weight:normal;  text-align:center;       }
h2 {		padding:1em 0;  		margin:55px 0 0 0;  font-size:144%; color:rgb(0,0,0);    }
h3 {		padding:0;  		margin:55px 0 11px 0;  font-size:122%; color:rgb(0,0,0);     }
p {		padding:22px 0 0 0;  	margin:0;  font-size:111%;  line-height:155%;   }
.tekstisuuri {	font-size: 133%;  line-height:166%;   }
.pampulasuuri {	padding:0px 0px 0px 7%;  margin:11px 0 0 5%;   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%;   }
.tekstislogan {	padding: 1em 5% 1em 5%;  font-style:italic; color:hsl(0,0%,40%);  font-size: 144%;  text-align:center;       }

.sloganviiva {	width:44em;  padding:0 3%; margin:77px auto 0 auto;  height:1px;  background: linear-gradient( 90deg, transparent , hsl(0,0%,40%) , transparent ); 	}
.sloganviiva1 {	margin:77px auto 0 auto;   	}
.sloganviiva2 {	margin:0px auto 0 auto;   	}



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

.sivu {		width:100%;  display:table; 	}
.alueimage {	padding: 77px 0 22px 7%; width:100%;  height:100%;  position:responsive; 
		background-image:url(kuvat/kuva0.jpg); background-position:50% 50%;  background-size:cover;   }
.aluevakio {	width:100%;  zzbackground-image:url(kuvat/kuva00.jpg); background-position: 50% 50%;  background-size:1920px;  background-attachment:fixed;  display:table;  }



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

.logolohko { 	width:90%;  max-width:444px;  display:table;   }
.logokuva {	width:100%;  max-width:444px;  margin:11px auto 0 auto;    }
.imageslogan {	text-align:center; font-size:144%;  color:hsl(360,87%,37%);  text-shadow:1px 1px hsl(0,0%,100%);   word-spacing:0.1em;  letter-spacing: 0.09em;      }
.haiveviiva {	width:100%;  max-width:444px;  margin: 22px auto;  height:2px;  background: linear-gradient( 90deg, transparent , hsl(360,87%,37%) , transparent ); 	}


.tekstilinkki:link {	color: rgb(49,79,149);   text-decoration: underline; }  
.tekstilinkki:visited {	color: rgb(155,155,155); text-decoration: underline; }
.tekstilinkki:hover {	color: rgb(255,145,0);   text-decoration: none; }




.alueingressi {	width:100%;  display:flex;  }
.ingressilevee {	width:70%;  padding:33px 9% 33px 9%;  background-color:hsl(360,87%,96%);   }
.ingressilevee p  {	font-size:133%;  padding:11px 0 11px 0;  margin:0;  font-style:italic;  } 	
.ingressikapee {	width:30%;  padding:33px 5%;  background-color:hsl(360,87%,37%);  color:hsl(0,0%,88%);   }
.ingressiotsikko {	padding:0;  margin:15px 0 22px 0;  font-size:144%;     }
.ingressipampula  {	padding:0 0 0 33px;  margin:11px 0;   background-position: 0 calc(4px + 0.44em);  
		font-size:133%;  background-size:0.4em;  background-image:url(kuvat/pallovalkea.png);  background-repeat: no-repeat;  line-height:155%;   }




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

.boxialue2 {	width:100%;  padding:0 3%;  display: flex; justify-content:space-between; 	}
.boxi2 {		margin:44px 0 0 0; width:45%;       }
.boxi2 p {	padding:22px 0 0 0;  font-size:133%;  margin:0;  line-height:155%;   }

.boxialue3 {	width:100%;  padding:77px 3% 0 3%;  display: flex; justify-content:space-between;  flex-wrap:wrap; 	}
.boxi3 {		margin:0; width:25%;       }
.kuvakolme {	width:100%;  border-radius:50%;        }
.kuvateksti {	text-align:center;  font-style:italic; 	}


.alueyhteys {	margin:88px 0 33px 0;  width:100%;  display: flex;  justify-content:space-between;  flex-wrap:wrap;	}
.yhteysboxi1 {	width:33em;  padding:33px 2% 22px 3%;  background-color:hsl(360,87%,96%);  background-color:hsl(0,0%,66%);   }
.yhteysboxi2 {	width:calc(100% - 33em);  height:333px; background-image:url(kuvat/kuvay.jpg);  background-position:50% 70%;  background-size:cover;    }

.yhteysotsikko {	font-size:155%;  padding:0px 5% 22px 7%;  margin:0;   color:hsl(360,87%,37%);  	}
.yhteysteksti {	font-size:100%;  padding:5px 5% 0px 7%;  margin:0;  color:hsl(0,0%,96%);	}
.yhteysrako {	margin-top:1em; 	}

iframe	{	float:right;  margin:22px;  }
.haiveviiva2 {	width:80%;  max-width:888px;  margin:77px auto 0 auto;  height:1px;  background: linear-gradient( 90deg, transparent, hsl(0,0%,55%), transparent ); 	}







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

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

.sloganviiva {	width:100%;  padding:0 5%;  	}


.alueingressi {	flex-direction:column; 	}
.ingressilevee {	width:100%;       }
.ingressikapee {	width:100%;  padding:33px 5% 33px 15%;    }


.yhteysboxi1 {	width:100%;   max-width:666px;  margin-left:auto;  margin-right:auto;     }
.yhteysboxi2 {	width:100%;   max-width:666px;  margin-left:auto;  margin-right:auto;     }


	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	










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

body, html {	height:555px;  }

.alueimage {	padding: 55px 0 22px 0; }

.logolohko { 	margin:0 auto;    }

.ingressilevee {	padding:33px 3% 33px 5%;   }
.ingressikapee {	padding:33px 3% 33px 5%;    }

.boxialue3 {	padding:0 3% 0 3%; 	}
.boxi3 {		width:77%;  margin:77px auto 0 auto;   }


	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	










/*	kestotietoa 	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/

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








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

@media screen and (max-width :111px)	{	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/
	}	/*	oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo	*/	
/*	CSS: portaat 1480, 1230, 900, 700, 500-300, FF sallii tarkistuksen 450px näytöllä 	*/

/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/
/*	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	*/