/* 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 {
	text-align: center;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #414141;
	margin-bottom: 30px;
}

	ol, ul { padding: 6px 0 6px 25px; list-style-position: outside; }
	
	body.siteBody {
		background-image: url(../images/tausta2016.jpg);
		background-position: 50% 0;
		background-repeat: no-repeat;
	}
	
	/* PÄÄOTSIKON MÄÄRITYKSET */
	
	h1,	h2,	h3 { font-family: 'Merriweather', serif; color: #723f24; padding: 12px 0 6px 0; line-height: 1.5em; font-weight: 700; }

	h1, .moduletable h3, .fox-container h2 { font-size: 36px; }

	h2 { font-size: 30px;  }
	
	h3 { font-size: 24px; }
	
		h3.cw-social-mod-title-al { font-size: 18px !important; } /* "Jaa sivu" tekstin määritys */
	
	p.ingressi { font-family: 'Merriweather', serif; font-size: 18px; padding: 6px 0; line-height: 1.7em; font-weight: 400; font-style: italic; }
	
	p { padding: 6px 0; }
	
	a { color: #0c8ce2; text-decoration: underline; }
	
	a:hover { color: #0c8ce2; text-decoration: none; }
	
	/*   MUUT   */
	
	strong { font-weight: bold; }
	
	i { font-style: italic; }
	
	td { vertical-align: top; }
	
	.clear { clear: both; }
	
	.centered { text-align: center !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; }
	
	/**/
	
	.kuvaRight { float: right; padding: 0 0 20px 30px; }
	
	.kuvaLeft { float: left; padding: 0 30px 20px 0; }
	
	/**/
	
	a.readMore,
	.fox-container .submit-button {
		background-color: #8eac22 !important;
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-bottom: 3px solid #60770c !important;
		padding: 5px 9px;
		margin: 0 0 2px 0 !important;
		color: #fff !important;
		font-family: 'Roboto', sans-serif !important;
		font-weight: 500 !important;
		line-height: 1.2em;
		border-radius: 3px !important;
		-moz-border-radius: 3px !important;
		-webkit-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;
	}
	
		a.readMore:hover,
		.fox-container .submit-button:hover { margin: 1px 0 2px 0 !important; border-bottom: 2px solid #60770c !important; background-color: #8eac22; color: #fff !important; 
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;}
		
		div#fox-container-c162 .btn span { color: #fff !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; }
	
	/* Mobile - big-screen */
	
	.onlyMobile { display: none; }
	
	
	
		
/**  TEMPLATE                  **********************************************/

#etusivuBack { position: absolute; width: 1308px; height: 298px; background: url(../images/etusivuBack.png); overflow: hidden; top: 450px; left: 50%; margin-left: -654px; z-index: 3; }

#logo { position: absolute; top: 0; left: 50%; width: 318px; height: 195px; margin-left: -568px; background: url(../images/logoBack.png) no-repeat 0 0; text-align: center; padding-top: 15px; z-index: 1000; }

	#logo img { width: 286px; }

.container {
	width: 1170px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

	#top { width: 100%; height: 108px; background: url(../images/topBack.png) 0 0 repeat-x;  }
		
		#topTop { text-align: right; width: 98%; height: 27px; padding: 8px 2% 0 0; }
		
			.lang-inline li img { width: 18px; vertical-align:middle}
			
			.lang-inline li span { margin-top: -4px; }
		
		#topBottom { text-align: right; height: 73px; width: 98%; padding: 0 2% 0 0; position: relative; z-index: 1000; }
				
	#etusivu { margin: 20px 0 20px 0; background: url(../images/tuoteContainerOtsikko.png) 163px 0 no-repeat; padding: 70px 0 0 0; }
	
	#isoKuva { height: 450px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 5px solid #fff; box-sizing: 
	; box-shadow: 0 0 6px #000; margin: 15px 0 45px; }
	
		.camera_caption.none { display: none !important; }
		
		.cameraSlide { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
		
		.cameraSlide img { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
	
	#main { width: 100%; line-height: 1.7em; }
						
		#main ul, #main ol { margin-left: 16px; padding: 6px 0 6px 0; }
		
		.facebookFeed { margin-top: 25px; }
	
#footer { margin-top: 40px; width: 96%; padding: 40px 2% 0 2%; text-align: left; background: url(../images/footer.png) no-repeat 50% 0; font-size: 13px; color: #ba8e78; }

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

	[class*="span"] { margin-left: 0 !important; } 


/**  @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: #8eac22 url(../images/toggleMenuBack@2x.png) no-repeat 10px center;
	   background-size: 21px 18px; 
	}
	
}

/**  MEDIA-QUERIES               **********************************************/
	
	
@media screen and (max-width: 1216px) {
	
	.container { width: 96%; margin: 0 2%; }
	
	#logo { position: absolute; top: 0; left: 4%; width: 318px; height: 195px; margin-left: 0; }
	
	.isDesktop #item-108 { display: none; }
	
}
	
@media screen and (max-width: 994px) {
	
	
		
}


@media only screen and (max-width: 768px) {
		
		
	.kuvaRight,
	.kuvaLeft { float: none; clear: both; text-align: center; padding: 0 0 6px 0; display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; }
	
	.webgarden { float: none; }
	
		.webgarden img { padding-bottom: 10px !important; }
	
	.span_3_of_3,
	.span_2_of_3,
	.span_1_of_3 { width: 94%; padding: 0 3%; }
	
		.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: 44%; padding: 0 3%; }
}

@media screen and (max-width: 640px) {
	
	.lang-inline li span,
	.responsiveMenu1m span { display: none; }
	
}

@media screen and (max-width: 430px) {
	
	#logo { width: 250px; height: 155px; left: 2%; background: url(../images/logoBackSmall.png) no-repeat 0 0; padding-top: 10px; }
	
		#logo img { width: auto; max-width: 90%; }
	
	.onlyBigscreen { display: none !important; }
	
	.onlyMobile { display: block; }
	
}