* {	margin: 0; padding: 0; } img { border: 0; max-width:100%; } a:focus, input:focus, textarea:focus { outline: none; } .clear { clear: both; } :focus { -moz-outline-style:none; } strong { font-weight: bold; } i { font-style: italic; } td { vertical-align: top; } fieldset { border: 0; }
.span_1_of_4, .span_2_of_4 {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
		
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 16px; 
	color: #414141;
	line-height: 1.6em;
	background: url(tausta.jpg) 0 0 repeat;
}
	
	body.siteBody {
		text-align: center;
		background-color: #fff;
	}
		
	h1, h2, h3, h4 { 
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 700;
		line-height: 1.5em;
		padding: 8px 0 4px 0;
	}

	h1,
	.blog h2 .subheading-category,
	h2.big,
	.fox-container h2 { font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 40px; color: #3362ab; } 
	
	h2 { font-size: 28px; } 
		
	h3 { font-size: 24px; }
	
		.moduletable h3 { padding-top: 30px; }
		
		h3.viivalla { color: #ff9a14; border-bottom: 1px solid #c7c7c7; padding-bottom: 15px; margin-bottom: 10px; }
	
	h4 {
		font-family: Helvetica, Arial, sans-serif;
		line-height: 1.3em;
		color: #3362ab;
		padding: 12px 0;
		font-weight: 400;
		font-size: 17px;
	}
		
	.whiteBox h3 { color: #cd1719; }
	
	#footer h1, #footer h2, #footer h3 { color: #fff; }
		
	p { padding: 9px 0; }
	
	a { color: #3362ab; text-decoration: underline; }
	
	a:hover { color: #3362ab; text-decoration: none; }
	
	/*   MUUT   */

	.display { padding: 10px 0 15px 0; }
	
	p.buttonheading { height: 0 !important; margin: 0 !important; padding: 0 !important; }
		
	.pagination { text-align: center; }
	
		.pagination ul { margin: 0 auto; font-size: 12px; color: #333; }
		
			.pagination li { list-style: none; display: inline; padding: 4px; }
	
	.clear { clear: both; }

	ol, ul { padding: 6px 0 6px 25px; list-style-position: outside; }
	
	.video-responsive {
		overflow:hidden;
		padding-bottom: 56.25%;
		position:relative;
		height:0;
	}

	
		.video-responsive iframe {
			left:0;
			top:0;
			height:100%;
			width:100%;
			position:absolute;
		}


	/*   TAULUKKO   */
	
	table {
		font-family: Helvetica, Arial, sans-serif;
		font-weight: 300;
		font-size: 15px;
		border-collapse: separate;
		border-spacing: 0;
		border: 1px solid #9a9a9a;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		margin: 6px 0 4px 0;
	}
	
		tbody tr:nth-child(even)  td { background-color: #f5f5f5; }
		
		tbody tr:nth-child(odd)  td { background-color: #fff; }
	
		.main td,
		.main th { padding: 7px 30px 7px 12px; }
		
		th { border-bottom: 2px solid #9a9a9a; background-color: #f5f5f5; font-size: 16px; padding-top: 9px !important; }
	
	.centered { text-align: center !important; }

	#foxcontainer_c155 { padding: 0 !important; }
	
	* = [span] { float: left; }
	
	/**/
	
	.video-responsive {
		overflow:hidden;
		padding-bottom: 56.25%;
		position:relative;
		height:0;
	}
	
		.video-responsive iframe{
			left:0;
			top:0;
			height:100%;
			width:100%;
			position:absolute;
		}
		
    .google-maps {
        position: relative;
        padding-bottom: 100%; 
        height: 0;
        overflow: hidden;
    }
	
		.google-maps iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}
	
	.player .video-wrapper { background: #fff !important; }
	
	ul.camera_pag_ul { text-align: center !important; }
	
	/**/
	
	.centered { text-align: center; }
	
	.red { color: #e1001a; }
	
	.white { color: #fff !important; }
	
	.erotin { margin: 25px 0 0 0; padding: 5px 0 0 0; border-top: 1px dotted #8D8D8D; width: 100%; height: 1px; clear: both; display: block; }
	
	.isoteksti { font-size: 16px; line-height: 27px; }
	
	/**/
	
	a.readMore,
	#uutiskirje .button {
		background: #dc1e20; 
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;
		padding: 7px 11px;
		margin: 0 !important;
		color: #fff !important;
		-moz-border-radius: 3px !important;
		-webkit-border-radius: 3px !important;
		border-radius: 3px !important;
		text-decoration: none;
		cursor: pointer;
		display: inline-block;
		text-shadow: none !important;
		background-image: none !important;
		font-size: 17px !important;
		box-shadow: none !important;
		border-style: none !important;
	}
	
		a.readMore:hover,
		#uutiskirje .button:hover {
			background: #cd1719;
			color: #fff !important; 
			border-top: 0 !important;
			border-right: 0 !important;
			border-left: 0 !important;}
			
			#uutiskirje .button { background:#3b3b3b !important; }
			
			#uutiskirje .button:hover { background:#2e2e2e !important; }
	
	/**/
	
	.foxcontainer { padding: 0 !important; }
	
	.foxcontainer input,
	.foxcontainer textarea { font-size: 14px !important; }
	
	.controls.buttons { width: 100%; clear: both !important; }
	
	/* Mobile - big-screen */
	
	.onlyMobile,
	.onlyTabletAndMobile { display: none; }
	
	/* Phocagallery */
	
	.pg-cv-box-mod-ri.item {
		padding: 0 !important; 
		margin: 10px;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		background: none;
	}
	
	/**/
	
	.kuvaRight { float: right; margin: 7px !important; }
	
	/**/

	dl.article-info { font-size: 14px; color: #989898; padding: 5px 0 6px 0px; width: 100%; }
		
		dl.article-info dd { float: left; margin: 0 4px 0 0; }
		
	.item-separator { width: 100%; border-top: 1px dashed #848483; padding-top: 20px; margin-top: 25px; height: 1px; line-height: 1em; }
		
	/**/
	
	.search label { display: none; }
	
	#sbox-overlay,
	#sbox-window,
	.highslide-container { z-index: 99999 !important; }
	
	.uusimmat-paivays { float:left;background-color:#3362ab;width:15%;padding: 4px 1%;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;text-align:center; }
					
	.uusimmat-teksti { float:left;width:80%;margin-left:3%; }
	
/**  TEMPLATE                  **********************************************/

.container { margin: 0 auto; width: 1170px; padding: 0; }

#wrapperTop {
	width: 100%;
	height: 100px;
	padding: 10px 0;
	background: #fff;
	z-index: 1002;
}
		
	#logo {
		float: left;
	}
	
		#logo img { height: 100px; }
	
	#topRight { float: right; padding-top: 30px; height: 38px; }

#menu {
	width: 100%;
	text-align: center;
	height:50px;
	position: relative;
	z-index: 1999; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#316cc8+0,3362ab+100 */
	background: #316cc8; /* Old browsers */
	background: -moz-linear-gradient(#316cc8 0%, #3362ab 100%);
	background: -webkit-linear-gradient(#316cc8 0%, #3362ab 100%);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#316cc8), to(#3362ab));
	background: -o-linear-gradient(#316cc8 0%, #3362ab 100%);
	background: linear-gradient(#316cc8 0%, #3362ab 100%); /* FF3.6-15 */
	/* Chrome10-25,Safari5.1-6 */
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#316cc8', endColorstr='#3362ab',GradientType=0 ); /* IE6-9 */

}

.wrapperMain { width: 100%; }
		
	.main { text-align: left; width: 100%; padding: 15px 0; background-color: #fff; }
	
		ul.breadcrumb { margin: 0; background-color: #fff; width: 100%; border: 1px solid #cccccc; /*height: 32px;*/ padding: 0px !important; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; vertical-align: middle; }
	
			ul.breadcrumb li { list-style-type: none; float: left; color: #777777; height: 32px; line-height: 32px; margin: 0 3px 0 0; background: url(../images/arrow.png) 100% 0 no-repeat; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 13px; }
			
			ul.breadcrumb li:first-child { padding-left: 8px; }
				 
		.leftMuutSivut {
			width: 18%;
			padding: 1px 2% 0 0;
			margin-top: 8px;
			float: left;
			text-align: left;
		}
			
			.box { background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #cccccc; padding: 10px; }
			
				.cf_li_clear { display: none; } /* Rajaustyökalun ensimmäinen valinta */
			
			.leftMuutSivut ul { margin: 8px 0 !important; padding: 0 !important; border-bottom: 1px solid #C8C8C8; }
			
			.leftMuutSivut li { list-style-type: none; padding: 5px 10px 5px 2px; margin: 0; border-top: 1px solid #C8C8C8; line-height: 1.5em; }
			
				.leftMuutSivut a,
				a.robotoLinkki {
					font-weight: 400;
					font-size: 15px;
					text-decoration: none;
					cursor: pointer;
					text-align: center;
					margin: 2px 0;
					letter-spacing: 0.04em;
				}
					
					.leftMuutSivut .current a { font-weight: 600; }
				
					.leftMuutSivut a:hover,
					a.robotoLinkki:hover { text-decoration: underline; }
		
		.rightMuutSivut {
			width: 80%;
			padding: 0;
			float: left;
			text-align: left;
		}
		
			.main ul, .main ol,
			#left ol, #left ul { padding: 6px 0 6px 25px; list-style-position: outside; }
			
			#phocagallery .pagination { display: none; }

/**  FOOTER                      **********************************************/
				
#footer { padding: 30px 0 0 0; background-color: #3362ab; width:100%; text-align: left; color: #fff; line-height: 1.5em; }

	#footerLine { border-top: 1px solid #fff; margin-top: 30px; padding: 30px 0 45px 0; height: auto; }

	.webgarden { width: 80px; margin-top: -5px; float: right; display: block; }
	
		.webgarden img { width: 80px; }
	
	
/**  GRIDS                       **********************************************/

	.third { width: 100%;}
		
		.thirdTop {
			padding: 0px 0 0 0;
			width: 100%;
			text-align: center;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#316cc8+0,3362ab+100 */
			background: #316cc8; /* Old browsers */
			background: -moz-linear-gradient(#316cc8 0%, #3362ab 100%);
			background: -webkit-linear-gradient(#316cc8 0%, #3362ab 100%);
			background: -webkit-gradient(linear, 0 0, 0 100%, from(#316cc8), to(#3362ab));
			background: -o-linear-gradient(#316cc8 0%, #3362ab 100%);
			background: linear-gradient(#316cc8 0%, #3362ab 100%); /* FF3.6-15 */
			/* Chrome10-25,Safari5.1-6 */
			/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#316cc8', endColorstr='#3362ab',GradientType=0 ); /* IE6-9 */
		}
		
		.thirdMain {
			padding: 10px;
			width: 100%;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			background: #f5f9ff;
			border: 2px solid #a2badf;
			border-top: 0;
			box-sizing: border-box;
		}
		
			.thirdTop h2 { font-size: 32px !important; }
	
	.span_3_of_3 {
		width: 98%;
		padding: 0 1%;
		float: left;
		text-align: left;
	}
	
	.span_2_of_3 {
		width: 64.66%;
		padding: 0 1%;
		float: left;
		text-align: left;
	}
	
	.span_1_of_3 {
		width: 31.33%;
		padding: 0 1%;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
	.span_3_of_4 {
		width: 73%;
		padding: 0 1%;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
	.span_1_of_4 {
		width: 23%;
		padding: 0 1%;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
	.span_1_of_2_left {
		width: 48%;
		padding: 0 2% 0 0;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
	.span_1_of_2_right {
		width: 48%;
		padding: 0 0 0 2%;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
		.span_3_of_3 img, .span_2_of_3 img, .span_1_of_3 img, .span_1_of_4 img , .span_1_of_2 img { max-width: 100%; height: auto; }
	
		.span_3_of_3,
		.span_2_of_3,
		.span_1_of_3,
		.span_1_of_4,
		.span_1_of_2 { -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s; }


/**  MEDIA-QUERIES               **********************************************/

@media screen and (max-width: 1216px) {	

/**/
		
	.container { width: 96%; }
		
	.pg-cv-box-mod-ri.item {
		margin: 5px;
		height: 135px;
		width: 135px;
	}
		
		.pg-cv-box-img-mod-ri,
		.pg-cv-box-mod-ri.item img {
			height: 135px;
			width: 135px;
		}
			
}
	
@media screen and (max-width: 994px) {
	
	body { font-size: 15px; }

	h1,
	.blog h2 .subheading-category,
	h2.big,
	.fox-container h2 { font-size: 36px; } 
	
	h2 { font-size: 26px; } 
		
	h3 { font-size: 21px; }
			
	h4 { font-size: 16px; }
		
		/**/
		
		.pg-cv-box-mod-ri.item {
			margin: 3px;
			height: 112px;
			width: 112px;
		}
			
			.pg-cv-box-img-mod-ri,
			.pg-cv-box-mod-ri.item img {
				height: 112px;
				width: 112px;
			}
		
		.kuvaRight { float: none; clear: both; text-align: center; display: block; margin-left: auto; margin-right: auto; max-width: 90%; height: auto; }
		
	.onlyTabletAndMobile { display: block; }
}

@media only screen and (max-width: 768px) {
	
	#wrapperTop { height: auto; }
		
	#logo { float: none; width: 100%; text-align: center !important; }
	
		#logo img { max-width: 90%; height: auto; } 
	
	#topRight { float: none; width: 100%; padding: 10px 0 20px 0; text-align: center !important; }
	
}

@media only screen and (max-width: 767px) {
	
	.google-maps {
        padding-bottom: 75%; 
	}
	
	.span_3_of_3,
	.span_2_of_3,
	.span_1_of_3 { width: 96%; padding: 0 2%; }
	
}

@media screen and (max-width: 640px) {
	
	.span_3_of_3,
	.span_2_of_3,
	.span_1_of_3,
	.span_1_of_2_left,
	.span_1_of_2_right,
	.main .span_1_of_4,
	.main .span_3_of_4 { width: 96%; padding: 0 2%; }
	
		.span_1_of_3 { margin-bottom: 10px; } 
	
		.span_3_of_3 img,
		.span_2_of_3 img,
		.span_1_of_3 img,
		.span_1_of_4 img { text-align: center; }
		
	.span_1_of_4 { width: 46%; padding: 0 2%; }
	
	.webgarden { float: none; padding: 0 0 10px; }	
	
}

@media screen and (max-width: 540px) {
	
	.span_1_of_4 { width: 96%; padding: 2% 2%; }
	
	.span_2_of_4 { width: 96%; padding: 20px 2%; }

}

@media screen and (max-width: 480px) {
		
	.onlyBigscreen { display: none !important; }
	
	.onlyMobile { display: block; }
	
}