body { background-color: #ffffff; margin: 0; padding: 0; font-family: 'Oswald', sans-serif; font-size: 1em; line-height: normal;  background-image:url(images/bg.jpg); background-repeat:no-repeat;	}

div.container { margin: 0 auto; padding: 20px; max-width: 1000px; position: relative; background-color: #fff; }

/*------------- logo --------------------------------*/
div#logo { position: absolute; top: 75px; left: 7%; width: 40%; }
div#logo_small { position: absolute; top: 30px; left: 14.5%; width: 40%; }


/*------------- boxit --------------------------------*/
div.line {  width: 100%; margin: 0; padding: 0; height: 238px; clear: both;}
div.line_header {  width: 100%; margin: 0; padding: 0 10% 30px 25%; /*height: 238px;*/ clear: both;}
#box_white { width: 25%; background-color: #ffffff; height: 238px;  float:left; border: 1px solid #ffffff;}
#box_empty { width: 25%; background-color: #ffffff; height: 238px;  float:left; border: 1px solid #ffffff;}
#box_grey { width: 25%; background-color: #f2f2f2; height: 238px; float:left; border: 1px solid #ffffff; padding: 25px; text-align:center;}
	

#box_grey1 { width: 25%; background-color: #f2f2f2; height: 238px; float:left; border: 1px solid #ffffff; padding: 25px 0; text-align:center;}
#box_grey2 { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff; }
#box_grey2_navi { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff; padding: 25px; }
#box_grey3 { width: 25%; background-color: #999999; height: 238px; float:left; border: 1px solid #ffffff; }
#box_wide { max-width: 498px; width: 50%; background-color: #ffffff; height: 238px; float:left; border: 1px solid #ffffff; padding: 60px 5% 0 5%; text-align: center;}
#box_shadow { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff;padding: 25px; text-align: center; color: #808080;}
#box_blue { width: 25%; background-color: #c5d9e2; height: 238px; float:left; border: 1px solid #ffffff;}
#box_blue1 { width: 25%; background-color: #c5d9e2; height: 238px; float:left; border: 1px solid #ffffff;}
#box_blue2 { width: 25%; background-color: #c5d9e2; height: 238px; float:left; border: 1px solid #fff;}
#box_list{ width: 25%; padding: 10px 2%; background-color: #fff; height: 238px; float:left; border: 1px solid #ffffff;}
#box_image { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff; overflow: hidden; }
#box_imageref { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff; overflow: hidden; }

div.content { width: 100%; padding: 50px 5% 40px 25%; clear: both; display:block; color: #6e6e6e; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #333333; font-size: .9em; line-height: 1.5em; background-color: #ffffff;}
.content:after {  clear: both;   content: "";  display: block;} /*  container div get the height of max of its children's height + overflow hidden in div.content*/

div.content-ref { width: 100%; padding: 50px 0; clear: both; display:block; color: #6e6e6e; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #333333; font-size: .9em; line-height: 1.4em; background-color: #ffffff;}
.content-ref:after {  clear: both;   content: "";  display: block;} /*  container div get the height of max of its children's height + overflow hidden in div.content*/

div.content_grid { width: 100%; padding: 0; clear: both; display:block; color: #6e6e6e; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: .9em; line-height: 1.4em; background-color: #ffffff;}
div.yhteys { float:left; width: 50%; padding: 0 3% 0 0;}
div.map { float:right; width: 50%;}

#footer { width: 100%;  background-color: #c5d9e2; clear:both; border: 1px solid #ffffff; padding: 15px 30px; color: #ffffff; text-align:right ;text-transform: uppercase; clear: both;}
.clear { clear:both; padding: 0; margin: 1px 0;}

/*------------- images --------------------------------*/
#logo img { width: 100%;}
#logo_small img { width: 65%;}
#box_white img { width: 100%; padding: 0; }
#box_grey1 img { width: 80%; padding: 40px 0; }
#box_grey2 img { width: 100%; padding: 0; }
#box_grey3 img { width: 100%; padding: 40px 20% 0 20%; }
#box_image img { /*width: 100%;*/  padding: 0; }
#box_wide img { width: 100%;}
img#email { max-width:86px;}
img#teksti {max-width: 350px;}



a.navitop:link, a.navitop:visited {  color: #808080; padding: 0; text-decoration:none; font-size: .8em; text-transform:uppercase; line-height:1.4em; display: block; } 
a.navitop:hover {color: #363636; text-decoration:none;} 
b { font-weight: 700;}
p { margin-top: 10px;}
h1 { font-size: 2.7em; font-family: 'Pathway Gothic One', sans-serif; color:#0099b9; text-transform: uppercase; margin: 10px 0 15px 0; letter-spacing: -0.05em;}
span.big {font-size: 2.7em; font-family: 'Pathway Gothic One', sans-serif; color:#0099b9; text-transform: uppercase; margin: 10px 0 15px 0; letter-spacing: -0.05em;}
span.notshow { visibility:hidden; width: 0; margin-left: -0.5em; font-size: 2.7em; font-family: 'Pathway Gothic One', sans-serif; color:#0099b9; text-transform: uppercase; }

h2 { font-size: 1.7em;  font-family: 'Pathway Gothic One', sans-serif; color:#0099b9; margin: 10px 0; }
/*span.big { font-size:4.5em; margin: 5px 3px 0 0; }*/

ul#referenssit li { margin-left: 14px; list-style-type:none; list-style-image: url(images/lista.png);}

@media screen and (max-width:735px) {	
	span.notshow { visibility: visible !important; width: auto !important; margin-left: 0 !important;}
	#box_wide { padding: 30px 5% 0 5%;}
}

@media screen and (max-width:680px) {	/* NAV MQ _ MOBILE */
	div.container { padding: 0;}
	div.content { width: 100%; padding: 40px 3%; font-size: .9em; line-height: 1.5em;}
	div.content-ref { width: 100%; padding: 40px 3%; }
	#box_empty { width: 0 !important; height: 0 !important; border: none !important; visibility: hidden;}
	div.line_header {  padding: 0 0  30px 0 !important;}
	/*span.big { font-size: 2em;}*/
	div.content-ref #box_list, div.content-ref #box_imageref { width: 50%; height: 238px;}
	div.content-ref #box_imageref img { width: 120%; min-height: 238px; overflow:hidden;}
}
	

	
@media screen and (max-width:580px) {
	
	/*div.content { width: 100%; padding: 40px 3%; font-size: .9em; line-height: 1.5em;}*/
	span.big { font-size: 2em;}
	span.notshow { visibility:hidden !important; width: 0; margin-left: -0.5em !important; font-size: 2.7em; font-family: 'Pathway Gothic One', sans-serif; color:#0099b9; text-transform: uppercase; }
	div#logo { top: 35px;  }
	#box_grey2_navi { width: 50% !important; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff; padding: 15px 2%; }
	#box_grey3 { width: 0 !important; height:0 !important; visibility:hidden;  }
	#box_grey3 img { width: 0 !important; height:0 !important; visibility:hidden;  }
	#box_grey3 a { width: 0 !important; height:0 !important; visibility:hidden;  }
	#box_blue2 { width: 25%; background-color: #c5d9e2; height: 150px; float:left; margin-right: -2px; border: 1px solid #ffffff;}	
	#box_grey2 { width: 25%; background-color: #e6e6e6; height: 150px; float:left; border: 1px solid #ffffff; }		
	
	#box_image { width: 25%; background-color: #e6e6e6; height: 150px; float:left; border: 1px solid #ffffff; overflow: hidden; }
	#box_image img { height: 130%;  padding: 0; overflow:hidden; }
	#box_grey1 { width: 25%; background-color: #f2f2f2; height: 150px; float:left; border: 1px solid #ffffff; padding: 25px 0; text-align:center;}
	div.yhteys { float:left; width: 100%; padding: 0;}
	div.map { float:left;  width: 100%; padding: 0;}
	#box_wide { width: 100%;  float:left; border: 1px solid #ffffff; padding: 20px 3%;  height:auto; text-align: center;}
	a.navitop:link, a.navitop:visited {  color: #808080; text-decoration:none; font-size: .9em; margin: 3px 0; text-transform:uppercase; line-height:1.4em; display: block; } 
	a.navitop:hover {color: #363636; text-decoration:none;} 


	
}
/*
@media screen and (max-width:480px) {
	div.container { padding: 0;}
	
	div.line {  width: 100%; margin: 0; padding: 0; height: 100px !important; clear: both;}
	#box_grey2_navi { height: 190px;}
	#box_grey { width: 25%; background-color: #e6e6e6; height: 190px; float:left; border: 1px solid #ffffff; }	
	#box_blue1 { width: 25%; background-color: #c5d9e2; height: 190px; float:left; border: 1px solid #ffffff;}
	#box_blue2 { width: 25%; background-color: #c5d9e2; height: 100px; float:left; border: 1px solid #ffffff;}	
	#box_grey2 { width: 25%; background-color: #e6e6e6; height: 100px; float:left; border: 1px solid #ffffff; }		
	#box_image { width: 23%; background-color: #e6e6e6; height: 100px; float:left; border: 1px solid #ffffff; overflow: hidden; }
	#box_image img { height: 130%;  padding: 0; overflow:hidden; }
	#box_wide { width: 100%;  float:left; border: 1px solid #ffffff; padding: 20px 3%;  height:auto; text-align: center;}
	span.big {font-size: 2.7em; font-family: 'Pathway Gothic One', sans-serif; color:#0099b9; text-transform: uppercase; margin: 10px 0 15px 0; letter-spacing: -0.05em;}
	
	div#logo { top: 45px;  }
	/*
div.line_header {  width: 100%; margin: 0; padding: 0 10% 30px 25%; height: 238px; clear: both;}
#box_white { width: 25%; background-color: #ffffff; height: 238px;  float:left; border: 1px solid #ffffff;}
#box_empty { width: 25%; background-color: #ffffff; height: 238px;  float:left; border: 1px solid #ffffff;}
#box_grey1 { width: 25%; background-color: #f2f2f2; height: 238px; float:left; border: 1px solid #ffffff; padding: 25px; text-align:center;}

#box_grey2_navi { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff; padding: 25px; }
#box_grey3 { width: 25%; background-color: #999999; height: 238px; float:left; border: 1px solid #ffffff; }
#box_wide { max-width: 498px; width: 50%; background-color: #ffffff; height: 238px; float:left; border: 1px solid #ffffff; padding: 60px 5% 0 5%; text-align: center;}
#box_shadow { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff;padding: 25px; text-align: center; color: #808080;}

#box_list{ width: 25%; padding: 10px 2%; background-color: #fff; height: 238px; float:left; border: 1px solid #ffffff;}
#box_image { width: 25%; background-color: #e6e6e6; height: 238px; float:left; border: 1px solid #ffffff; overflow: hidden; }
	*/
}