/* WebGarden 2015-04-27 */

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

html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ }

body {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 15px;
	color: #414141;
	background-color: #fff;
	line-height: 1.8em;
}

	ol, ul { padding: 6px 0 6px 25px; list-style-position: outside; }
	
	body.siteBody {
		text-align: center;
		line-height: normal;
	}
	
	h1, h2, h3 { 
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		color: #df1f18;
		line-height: 1.3em;
		padding: 16px 0;
	}
	
	#footer h1, #footer h2, #footer h3 { color: #fff; }
	
	h1 { font-size: 36px; font-weight: 600; }
	
	h2 { font-size: 27px; font-weight: 400; }
	
	h3 { font-size: 24px; font-weight: 400; }
		
	p { padding: 6px 0; }
	
	a { color: #3da1ee; text-decoration: underline; }
	
	a:hover { color: #3da1ee; text-decoration: none; }
	
	/*   MUUT   */

	.display { padding: 10px 0 15px 0; }
	
	table.category td, table.category th { padding: 0 15px 5px 0; }
	
	p.buttonheading { height: 0 !important; margin: 0 !important; padding: 0 !important; }
	
	dl.article-info { font-size: 11px; color: #666; background-color: #d3d3d3; border-radius: 3px; -moz-border-radius: 3px; padding: 0; }
	
		dl.article-info dd { float: left; padding: 6px 6px 6px 0; }
	
	.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; }
	
	.centered { text-align: center !important; }

	#foxcontainer_c155 { padding: 0 !important; }
	
	.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;
		}
	
	.player .video-wrapper { background: #fff !important; }
	
	ul.camera_pag_ul { text-align: center !important; }
	
	/**/
	
	.center { text-align: center; }
	
	.green { color: #74c224; }
	
	.white { color: #fff; }
	
	.kuvaRight { float: right; padding: 0 0 20px 30px; }
	
	.kuvaLeft { float: left; padding: 0 30px 20px 0; }
	
	/**/
	
	a.readMore,
	.lahetaViesti button {
		background-color: #e4251e !important;
		border: 0 !important;
		padding: 9px 9px !important;
		margin: 0 0 2px 0 !important;
		color: #fff !important;
		font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
		font-weight: 500 !important;
		line-height: 1.2em;
		-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: 15px !important;
		box-shadow: none !important;
	}
	
			.lahetaViesti button span,
			.lahetaViesti button:hover span { color: #fff !important; }
	
		a.readMore:hover,
		div#foxcontainer_m101 .btn:hover { margin: 1px 0 2px 0 !important; border-bottom: 2px solid #015a88 !important; background-color: #008ad2; color: #fff !important; 
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;}
	
	/**/
	
	.foxcontainer { padding: 0 !important; }
	
	.foxcontainer input,
	.foxcontainer textarea { font-size: 14px !important; }
		
	#mid_101-customhtml0 { width: 100% !important; }
	
	#mid_101-sender0,
	#mid_101-sender1,
	#mid_101-text0 { width: 52% !important; float: left; }
	
	#mid_101-textarea0 { width: 44% !important; float: right; margin-left: 4%; }
	
	.controls.buttons { width: 100%; clear: both !important; }
	
#fox-m94-captcha-box,
#fox-m94-captcha-box .controls{ float: none !important; width: auto !important; text-align:center !important; }

#fox-m94-captcha-box .control-label { float: none !important; width: auto !important; margin: 0 auto !important; }

div#fox-container-m94 .fox-item-captcha-cnt { margin: 0 auto !important; }

	/* Mobile - big-screen */
	
	.onlyMobile { display: none; }

		
/**  TEMPLATE                  **********************************************/
	
	
#logo {
	height: 96px;
	width: 100%;
	text-align: center;
	padding: 25px 0;
	background-color: #fff;
}	

	#yhteystiedot {
		position: absolute;
		right: 2%;
		top: 30px;
	}
	
		#iconCall {
			display: block;
			padding: 0 0 4px 28px;
			background: url(../images/iconPuhelin.png) 0 0 no-repeat;
			background-size: 24px 24px;
			color: #414141;
			float: right;
			text-decoration: none;
		}
		
		#iconEmail {
			display: block;
			padding: 0 0 4px 28px;
			background: url(../images/iconEmail.png) 0 0 no-repeat;
			background-size: 24px 24px;
			color: #414141;
			float: right;
			margin-right: 20px;
			text-decoration: none;
		}

#menu {
	width: 100%;
	height: 52px;
	text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5d5d5d+0,565655+100 */
	background: #5d5d5d; /* Old browsers */
	background: -moz-linear-gradient(top, #5d5d5d 0%, #565655 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #5d5d5d 0%,#565655 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #5d5d5d 0%,#565655 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5d', endColorstr='#565655',GradientType=0 ); /* IE6-9 */
	z-index: 999 !important;
	position: relative;
}

.responsiveMenuTheme1d.isDesktop a {
    background-position:99.5% 0 !important;
}

#mainPic {
	height:446px;
	width: 100%;
	background: url(../images/mainPic1.jpg) 50% 0 no-repeat;
	position: relative;
	z-index: 99;
}

	#tulevaisuuttaRakentamassa {
		position: absolute; 
		top: 40%; left: 50%; margin-left: -350px;
		background: rgba(223, 31, 24, 0.95);
		border: 5px solid rgba(255, 255, 255, 0.5);
		width: 700px;
		padding: 30px 0;
		-webkit-border-radius: 0 !important;
		-moz-border-radius: 0 !important;
		border-radius: 0 !important;
		-webkit-background-clip: padding-box;
		font-weight: 300;
		font-size: 45px;
		font-family: "Open Sans";
		color: rgb(255, 255, 255);
		text-transform: uppercase;
		line-height: 1.2em;
	}

.container { margin: 0 auto; width: 1200px; padding: 0; }
	
	#main { width: 100%; line-height: 1.8em; text-align: left; padding: 20px 0; }

	#left {
		width: 48%;
		margin-right: 4%;
		float: left;
		text-align: left;
	}
	
		#main ul, #main ol,
		#left ol, #left ul { padding: 6px 0 6px 25px; list-style-position: outside; }

	#right {
		width: 48%;
		float: left;
		text-align: left;
	}

/**  FOOTER                      **********************************************/
	
#footer { background-color: #e6e6e6; width: 100%; padding: 20px 0; text-align: left; color: #232323; line-height: 1.8em; }

	#footer h1 { color: #df1f18 !important; }

	#footer .fox-container label { display: none; }
	
	#fox-m94-name-box,
	#fox-m94-email-box,
	#fox-m94-textfield1-box {
		width: 29.3% !important;
		padding: 0 2%;
		float: left;
		vertical-align: top;
		text-align: left;	
	}
	
			#fox-m94-textfield1,
			#fox-m94-name,
			#fox-m94-email {
				font-family: 'Open Sans', Arial, Helvetica, sans-serif;
				font-weight: 300;
				font-size: 16px;
				color: #414141 !important;
				border: none !important;
				-webkit-border-radius: 0 !important;
				-moz-border-radius: 0 !important;
				border-radius: 0 !important;
				padding: 8px 10px !important;
				height: auto !important;
				line-height: 1.3em !important;
			}
			
			#fox-m94-textarea1 {
				width: 96% !important;
				margin: 0 2% !important;
				font-family: 'Open Sans', Arial, Helvetica, sans-serif;
				font-weight: 300;
				font-size: 16px;
				color: #414141 !important;
				border: none !important;
				-webkit-border-radius: 0 !important;
				-moz-border-radius: 0 !important;
				border-radius: 0 !important;
				padding: 8px 10px !important;
				height: auto !important;
				line-height: 1.3em !important;
			}
	
		div#fox-container-m94 .fox-form-stacked .fox-item-html-labels { width: 100% !important;}
		
		#footer .fox-container .controls { float: none !important; }
		
			#footer .fox-container .fox-item input { width: 100% !important; }

	#footerLine { margin: 0; padding: 17px 0; border-top:1px solid #B8B8B8; width: 100%; }

	.webgarden { width: 100px; height: 51px; margin-top: 2px; float: right; }
	
		.webgarden img { width: 100px; height: 51px; }
	
	
/**  GRIDS                       **********************************************/
	
	.span_3_of_3 {
		width: 96%;
		padding: 0 2%; 
		margin: 0;
		margin-left: 0 !important;;
		float: left;
		text-align: left;
	}
	
	.span_2_of_3 {
		width: 62.6%;
		padding: 0 2%;
		margin: 0;
		margin-left: 0 !important;;
		float: left;
		text-align: left;
	}
	
	.span_1_of_3 {
		width: 29.3%;
		padding: 0 2%;
		margin: 0;
		margin-left: 0 !important;;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
	.span_1_of_4 {
		width: 22%;
		padding: 0 1.5%;
		margin: 0;
		margin-left: 0 !important;;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
	.span_1_of_2_left {
		width: 49.3%;
		padding: 6px 0.7% 6px 0;
		margin: 0;
		margin-left: 0 !important;
		float: left;
		vertical-align: top;
		text-align: left;
	}
	
	.span_1_of_2_right {
		width: 49.3%;
		padding: 6px 0 6px 0.7%;
		margin: 0;
		margin-left: 0 !important;;
		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; }
		
		
/**  @2x kuvat                   **********************************************/

@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
	only screen and (    min--moz-device-pixel-ratio: 1.3 ),
	only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
	only screen and (         min-device-pixel-ratio: 1.3 ),
	only screen and ( min-resolution: 124.8dpi ),
	only screen and ( min-resolution: 1.3dppx ) {
	
	.toggleMenu {
	   background: #df1f18 url(../images/toggleMenuBack@2x.png) no-repeat 10px center;
	   background-size: 21px 18px; 
	}
	
}

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


@media screen and (max-width: 1200px) {
	
	.container { width: 96%; margin: 0 2%; }
	
}
	


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

	.kuvaRight,
	.kuvaLeft { max-width: 50%; }
	
	#tulevaisuuttaRakentamassa {
		top: 40%;
		left: 50%;
		width: 650px;
		margin-left: -325px;
		padding: 30px 0;
		font-size: 40px;
	}

	h1 { font-size: 34px; }
	
	h2 { font-size: 24px; }
	
	h3 { font-size: 21px; }
		
}
	
@media screen and (max-width: 900px) {
	
	#logo {
		height: auto;
	}
	
	#yhteystiedot {
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
		text-align: center;
		padding: 20px 0 0 0;
	}
	
		#iconCall,
		#iconEmail {
			float: none;
			display: inline-block;
			margin-right: 0;
		}
		
	.span_1_of_3 h2 { font-size: 17px; }
	
}


@media only screen and (max-width: 768px) {
	
	#tulevaisuuttaRakentamassa {
		top: 40%;
		left: 50%;
		width: 550px;
		margin-left: -275px;
		padding: 30px 0;
		font-size: 35px;
	}
				
	.kuvaRight,
	.kuvaLeft { float: none; clear: both; text-align: center; padding: 0; display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; }
	
	.webgarden { float: none; }
	
		.webgarden img { padding-bottom: 10px !important; }

}

@media screen and (max-width: 640px) {
	
	#tulevaisuuttaRakentamassa {
		top: 35%;
		left: 50%;
		width: 280px;
		margin-left: -140px;
		padding: 30px 0;
		font-size: 30px;
	}
		
	#left,
	#right { float: none; width: 100%; }
	
	.span_3_of_3,
	.span_2_of_3,
	.span_1_of_3 { width: 96%; padding: 0 2%; }
	
		.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%; }
}

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