.div {	border:1px red solid; 	}

body {	margin:0;  color:rgb(0,0,0);  word-spacing:0.1em;  letter-spacing:0.07em;  
font-family: Arial, Helvetica, Tahoma, "Liberation Sans", "DejaVu 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; 	}


.fontti {    font-family: 'Alfa Slab One'; 	color:hsl(36,100%,50%); 	}



p {		padding:22px 0 0 0;  margin:0;  font-size:111%;  line-height:155%;  color:hsl(0,0%,0%);	}
.rako	{		}
.pampula {	padding:0 0 0 33px;  margin:11px 0 0 1%; font-size:111%;  color:hsl(0,0%,100%); background-image:url(kuvat/pallomusta.png);  background-size:0.4em;  background-position: 0 0.5em;  background-repeat: no-repeat;  line-height:144%;  }
.haiveviiva { 	height:1px;  width:77%;  margin:44px auto 33px auto;  background:linear-gradient( 90deg, transparent , hsl(0,0%,0%) , transparent );   }
.slogan {		text-align:center; padding:33px 3%;  margin: 0;  font-size: 122%;  line-height:155%;  color:hsl(36,100%,50%); font-style:italic; 	}



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

.sivualue {	width:100%;  height:100%;  display: flex;  justify-conent:space-between;  flex-wrap:wrap;  }  



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

.logolohko { 	background-color:hsl(36,100%,95%);  width:100%;  display:table;  border-width:22px 0 1px 0;  border-color:hsl(36,100%,50%);  border-style:solid;  }
.logokuva {	width:80%;  max-width:333px;  margin:55px auto 55px auto;    }


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

.imagevasen {	width:50%;  background-color:hsl(0,0%,100%);      }
.imageoikea {	width:50%;  background-image:url(kuvat/imagekuva.jpg); background-position:50% 50%;  background-size:cover;  	}

.alueyhteys {	margin:55px 0; padding:22px 3% 11px 3%;  width:100%;  text-align:center;   } 
h1 {	font-size:177%;   margin:11px 0;  padding:0; font-weight:normal;  	}
.yhteysteksti {	font-size:122%;  margin:11px 0;    }
.yhteysrako {	margin-top:2em; 	}

.haiveviiva {	width:80%;  margin:44px auto 22px auto;  height:1px;  background: linear-gradient( 90deg, transparent , hsl(0,0%,50%) , transparent ); 	}



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





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

body, html {	height:auto;   }
.imagevasen {	width:100%;   	}
.imageoikea {	width:100%;    height:666px;     }



						 	}	/*	--------------------    */










/*	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;   }








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

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

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