.div {	border:1px red solid; 	}

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

	.valikko .osoitetiedot {	font-family: 'Montserrat', sans-serif; 	}
	.osoite .leipateksti {	font-family: 'Nunito Sans', sans-serif; 	}
	.sloganit .huudahdukset  {	font-family: 'EB Garamond', serif; 	}
	.taustakuva {		background-image:url(kuvat/taustakuva.jpg);  background-position:50% 0;  background-repeat:no-repeat;  background-size:1920px;  background-attachment:fixed;   	}
	.liukuvari {		background:linear-gradient(90deg, rgba(255,255,255,  0.2) ,  rgba(255,255,255,  1) 20% , rgba(255,255,255,  1) 80% , rgba(255,255,255,  0.2)  );  }
.perusvari {	background-color:hsl(60,77%,42%); 		color:rgb(188,189,25);	}


/*    runko	==============================================================================================================	*/


.sivualue {	background-color:hsl(0,0%,100%);  width:100%;  max-width:1920px;  display:table;  	}
.alueimage {	width:90%;  margin:33px auto;  position:relative; display:table; 	}
	.imageviiva { 	height:11px;  background-color:hsl(60,77%,42%);  width:100%;  position:absolute;  top:33px;  z-index:100;   }
	.imagealue2 {	width:100%;  display:flex;  flex-wrap:wrap;  	}
		.imageboxi21 {	width:50%; 
			background-image:url(kuvat/kuva0.jpg);  background-position:50% 0;  background-repeat:no-repeat;  background-size:cover;   	}
		.imageboxi22 {	width:50%;  padding: 0 2% 222px 5%;  	}

h1 {	padding:33px 0 0 0;  font-size:444%;  font-weight:normal;  color:hsl(60,77%,42%);  font-family: 'Poiret One', sans-serif;    }
h2 {	padding:22px 0 0 0;  font-size:288%;  font-weight:normal;  color:hsl(0,0%,100%);  font-family: 'Poiret One', sans-serif;    }
p {	padding:15px 0 0 0;  margin:0;  font-size:144%;  line-height:155%;  font-family: 'Nunito Sans', sans-serif;  }
	
.aluevakio {	width:90%;  margin: 99px auto 0 auto;   	}
.boxialuekylki {	width:100%;  margin:55px auto 0 auto;  display:table;   position:relative;   	 }
.kylkivasen {	width:800px;  background-color:hsl(60,77%,42%);  color:hsl(0,0%,100%);  padding:15px 2% 44px 5%;  position:absolute;  left:0px;  top:55px;  z-index:222;  	}
.kylkioikea {	width:70%;  padding:44px 0% 33px 25%;  float:right; 
		background-image:url(kuvat/kuva1.jpg);  background-size:cover;  background-position:0 0;   min-height:666px;  }

.aluetausta {	margin:99px auto 0 auto; width:90%;   background-image:url(kuvat/kuvay.jpg);  background-size:cover;  background-position:50% 100%;  display:table; 	}
.boxitaustassa {	width:600px;  margin:22px 33px 333px 33px;  padding:0px 2% 44px 5%;  float:right;  background-color:hsl(60,77%,42%);  color:hsl(0,0%,100%);    display:table; 	}
.pampulataustassa {	padding:0px 0% 0px 7%;  margin:11px 0 0 0%;  font-size:144%;  background-image:url(kuvat/pallovalkea.png);  background-size:0.4em;  background-position: 0 0.56em;  background-repeat: no-repeat;  line-height:155%;  }

.alueyhteys {	width:90%;  margin:99px auto 0 auto;  display:flex;  justify-content:space-between;  flex-wrap:wrap; } 
.yboxi1 {		padding:33px 0;  border-width:33px 1px 1px 1px; border-color:hsl(60,77%,42%);  border-style:solid;  width:31%;  background-color:hsl(0,0%,100%); 	}
.yboxi2 {		padding:33px 0;  border-width:33px 1px 1px 1px; border-color:hsl(60,77%,42%);  border-style:solid;  width:31%;  background-color:hsl(0,0%,100%); 	}
.yboxi3 {		padding:33px 0;  border-width:33px 1px 1px 1px; border-color:hsl(60,77%,42%);  border-style:solid;  width:31%;  background-color:hsl(0,0%,100%); 	}
	
.yotsikko {	font-size:133%;  padding:11px 5% 11px 7%;  margin:0;  color:hsl(60,77%,42%);  	}
.yteksti {	font-size:111%;  padding:5px 5% 0px 7%;  margin:0;  	}
.yrako {	margin-top:1em; 	}

.aluealin {	width:100%;  margin:99px 0 0 0;  background-color:hsl(60,77%,42%);  display:table; 	}
.alinteksti {	margin:0;  padding:13px 5%;  font-size:111%;  color:hsl(0,0%,100%);  text-align:center;  	}

.nnkele {	 	bottom:4px;  right:4px;  position:fixed;   }
.nnk:link { 	background-image:url(kuvat/nnvvy.png);   }
.nnk:visited { 	background-image:url(kuvat/nnvvy.png);     }
.nnk:hover { 	background-image:url(kuvat/nnvmy.png);  background-color:hsl(60,77%,66%); 	  }
.nnk {	 	background-color:hsl(60,77%,42%);  height:40px;  width:60px;  background-size:25px;  background-repeat:no-repeat;  background-position:50% 50%;  display:block;  text-decoration:none;  }



/*    logo	==============================================================================================================	*/

	.zzlogolohko { 	width:100%;  background-color:rgb(199,0,0);  display:table;  margin: 44px 0 0 0;      }
	.zzlogokuva { 	width:80%;  max-width:333px;  margin:33px auto;  	  }



/*    tekstit	==============================================================================================================	*/






/*    boxit	==============================================================================================================	*/


/*    linkit	==============================================================================================================	*/

a:link {		color: rgb(199,0,0); text-decoration: underline; }  
a:visited {	color: rgb(199,0,0); text-decoration: underline; }
a:hover {		color: rgb(199,0,0); text-decoration: none; }



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


/*    harvinaiset	==============================================================================================================	*/







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

.boxialuekylki {	position:static;   	 }
.kylkivasen {	width:100%;  padding:15px 2% 33px 5%;  position:static;  	}
.kylkioikea {	width:100%;  padding:44px 0% 33px 25%;  float:none;  }

.alueyhteys {	background-position: 50% -100%;   } 
.yboxi1 {		margin:22px 0 22px 0;  padding:33px 0;  width:48%;  background-color:hsla(0,0%,100% , 0.9); 	}
.yboxi2 {		margin:22px 0 22px 0;  padding:33px 0;  width:48%;  background-color:hsla(0,0%,100% , 0.9); 	}
.yboxi3 {		margin:22px 0 22px 0;  width:100%;   	}



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





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

.imageboxi21 {	width:100%;  height:666px; 	}
.imageboxi22 {	width:100%;  padding: 0 2% 22px 5%;  	}

h2 {		font-size:222%;     }
.boxitaustassa {	width:100%;  margin:22px 0 333px 0;   	}
.pampulataustassa {	padding:0px 0% 0px 33px;  font-size:133%;   }


.yboxi1 {		margin:0px auto 0 auto;  padding:22px 0;  width:100%;  	}
.yboxi2 {		margin:0px auto 0 auto;  padding:22px 0;  width:100%;   	}
.yboxi3 {		margin:0px auto 0px auto;  width:100%;   	}

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







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

.alueyhteys {	width:100%;  margin:99px auto 0 auto;  padding: 0;   } 
.alueimage {	width:100%;   	}
.aluevakio {	width:100%;   	}
.alueyhteys {	width:100%;   	}





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












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

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

.ypadisompi { 	padding-top:99px; }
.ypadiso { 	padding-top:66px; }
.ypadpieni { 	padding-top:33px; }
.ypadmini { 	padding-top:11px; }
.ypadnolla { 	padding-top:0; }
.apadiso { 	padding-bottom:66px; }
.apadpieni { 	padding-bottom:33px; }
.apadmini { 	padding-bottom:11px; }
.apadnolla { 	padding-bottom:0; }

.ymargisompi { 	margin-top:99px; }
.ymargiso { 	margin-top:66px; }
.ymargpieni { 	margin-top:33px; }
.ymargmini { 	margin-top:11px; }
.ymargnolla { 	margin-top:0; }
.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; }

.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ä 	*/

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