/* WebGarden 2016 */

* {	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: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 16px; 
	color: #414141;
	line-height: 1.6em;
}
	
	body.siteBody {
		text-align: center;
		background-color: #fff;
	}
	
	h1,
	.blog h2 .subheading-category,
	h2.big,
	.fox-container h2 { 
		font-family: 'Arvo', serif;
		font-weight: 700;
		font-style: normal;
		line-height: 1.3em;
		padding: 18px 0 6px 0;
		color: #009fe3;
		font-size: 40px;
	}
	
	h2, h3, h4 { 
		font-family: 'Arvo', serif;
		font-weight: 700;
		line-height: 1.3em;
		padding: 18px 0 6px 0;
	}
	
	h2 { font-size: 24px; } 
		
	h3 { font-size: 21px; }
	
		.moduletable h3 { padding-top: 30px; }
		
		h3.viivalla { color: #ff9a14; border-bottom: 1px solid #c7c7c7; padding-bottom: 15px; margin-bottom: 10px; }
	
	h4 { font-size: 21px; text-transform: none !important; }
	
	.main h1, .main h2.big, .fox-container h2 { border-bottom: 3px solid #cd1719; padding: 20px 0 12px 0; margin-bottom: 15px; }
	
	.whiteBox h3 { color: #cd1719; }
	
	#footer h1, #footer h2, #footer h3 { color: #fff; }
		
	p { padding: 9px 0; }
	
	a { color: #2848ed; text-decoration: underline; }
	
	a:hover { color: #2848ed; 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; }
	
	/*   TAULUKKO   */
	
	table {
		font-family: 'Open Sans', Arial, Helvetica, 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; }
	
	.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 {
		background-color: #1e72d9;
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-bottom: 3px solid #0d4f9f !important;
		padding: 5px 9px;
		margin: 0 0 2px 0 !important;
		color: #fff !important;
		font-family: 'Open Sans', 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 { margin: 1px 0 2px 0 !important; border-bottom: 2px solid #0d4f9f !important; background-color: #277ce3; color: #fff !important; 
		border-top: 0 !important;
		border-right: 0 !important;
		border-left: 0 !important;}

.tilaus a.readMore, .linja a.readMore { background-color: #fff !important; }
			
			#uutiskirje .button { background:#3b3b3b !important; }
			
			#uutiskirje .button:hover { background:#2e2e2e !important; }
			
			.tilaus a.readMore { color: #009fe3 !important; font-size: 19px !important; font-weight: bold; line-height: 1.2em; padding: 10px 14px !important; margin-top: 10px !important; }
			
				.tilaus a.readMore:hover { color: #fff !important; background-color: #009fe3 !important; }
			
			.linja a.readMore { color: #052a3a !important; font-size: 19px !important; font-weight: bold; line-height: 1.2em; padding: 10px 14px !important; margin-top: 10px !important; }
			
				.linja a.readMore:hover { color: #fff !important; background-color: #052a3a !important; }
				
			.yritysinfo a.readMore { background-color: #009fe3; color: #fff !important; font-size: 19px !important; font-weight: bold; line-height: 1.2em; padding: 10px 14px !important; margin-top: 10px !important; }
			
				.yritysinfo a.readMore:hover { color: #009fe3 !important; background-color: #fff !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: 11px; color: #666; background-color: #e8e8e8; -moz-border-radius: 3px; border-radius: 3px; padding: 0 3px; height: 21px; width:auto; }
		
		.article-info-term,
		.create { float: left; margin: 0 4px; }
		
	.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; }
	
/**  TEMPLATE                  **********************************************/

#isokuva,.tilaus,.linja,.yrittajat,.yritysinfo,.tilaus div,.linja div,.yrittajat div,.yritysinfo div { -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s; }

#header, #top, #logo, #logo div, .soita, .soita div, #menu, .menuInnerB {
    height: 120px;
}

	#logo {
		float: left;
		width: 25%;
		background-color: #fff;
		padding: 0 2.5%;
		text-align: center;
	}
	
		#logo .logoInnerB { margin: 0 auto; display: table; }
	
			#logo .logoInnerC { display: table-cell; vertical-align: middle; }
			
				#logo img {
					height: auto;
					width: 462px;
				}
		
	#menu {
		float: left;
		width: 70%;
		text-align: center;
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		font-weight: 400;
		font-style: normal;
		background-color: #009fe3;
	}
		
		.menuInnerB { display: table;margin: 0 auto; }
		
		.menuInnerC { display:table-cell;vertical-align:middle; }
		
			#menu ul { padding: 0 !important; }
		
				#menu ul li { list-style-type: none; float: left; padding: 0 10px; font-family: 'Open Sans', sans-serif; font-size: 21px; }
				
					#menu a { color: #fff; text-decoration: none; }
					
						#menu a:hover,
						#menu .current a { color: #fff; text-decoration: underline; }
						
			.openMenu { font-family: 'Open Sans', sans-serif; font-size: 17px; cursor: pointer !important; color: #fff !important; }
								
		.soita {
			float: right;
			background-color: #016590;
			color: #fff;
			font-family: 'Open Sans', sans-serif;
			font-size: 21px;
			text-align: center;
		} 	
		
			.soita a { color: #fff !important; text-decoration: none !important;  }		
		
			.soita div { margin: 0 auto; display: table; }
		
				.soita div div { display: table-cell; vertical-align: middle; }
			
					.puhelinButton { display: block; margin: 0 35px; padding: 6px 0 6px 28px; background: url(../images/puhelin@2x.png) 0 0 no-repeat; background-size: 21px 31px; text-decoration: none !important; }
										
	#menuMobi {
		display: none;
		float: left;
		width: 70%;
		text-align: center;
		font-family: 'Lato', Helvetica, Arial, sans-serif;
		font-weight: 400;
		font-style: normal;
		background-color: #009fe3;
	}

	#isokuvaA { width: 100%; height: 500px; background: url(../images/haanpaa_etusivu_2023.jpg) 50% 50% no-repeat; background-size: cover; }
	
	#isokuvaB { width: 100%; height: 500px; background: url(../images/main_2023_b.jpg) 50% 50% no-repeat; background-size: cover; }
	
	#isokuvaC { width: 100%; height: 500px; background: url(../images/haanpaa_linja_2023.jpg) 50% 50% no-repeat; background-size: cover; }
	
	#isokuvaD { width: 100%; height: 500px; background: url(../images/isokuvaD.jpg) 50% 50% no-repeat; background-size: cover; }
	
	#isokuvaE { width: 100%; height: 500px; background: url(../images/haanpaa_yhteys.jpg) 50% 50% no-repeat; background-size: cover; }
	
	.tilaus,
	.linja,
	.yrittajat,
	.yritysinfo { text-align: center !important; color: #fff; background-size: cover; height: 500px; font-size: 42px; line-height: 1.5em; }
	
			.tilaus span, .linja span, .yrittajat span, .yritysinfo span { font-family: 'Arvo'; font-weight: normal; font-style: normal; }
	
		.tilaus div, .linja div, .yrittajat div, .yritysinfo div { height: 500px; margin: 0 auto; display: table; }
			
			.tilaus div div, .linja div div, .yrittajat div div, .yritysinfo div div { display: table-cell; vertical-align: middle; }
	
		.tilaus { background: url(../images/tilaus.jpg) 50% 50% no-repeat; background-size: cover; text-shadow: 0 3px 0 rgba(0,66,94,0.67); }
		
		.linja { background: url(../images/linja.jpg) 50% 50% no-repeat; background-size: cover; text-shadow: 0 3px 0 rgba(0,29,42,1); }
		
		.yrittajat { background: url(../images/yrittajat.jpg) 50% 50% no-repeat; background-size: cover; }
		
		.yritysinfo { background: url(../images/yritysinfo.jpg) 50% 50% no-repeat; background-size: cover; color: #009fe3 !important; text-shadow: 0 3px 0 rgba(255,255,255,0.8); }
	
	
	#wrapperMain { width: 95%; padding: 20px 2.5%; text-align: left; }
			
		.wrapperMain ul, .wrapperMain ol { padding: 6px 0 6px 25px; list-style-position: outside; }
		
		#phocagallery .pagination { display: none; }
	
	/**  FOOTER                      **********************************************/
					
	#footer { height: 120px; background-color: #009fe3; width: 97.5%; padding: 0 0 0 2.5%; text-align: left; color: #fff; line-height: 1.5em; }
	
		.copyright { display: block; padding: 45px 0 0 0; }
	
		.webgarden { float: right; padding: 0 30px; background: #fff; height: 120px; }
		
			.webgarden div { margin: 0 auto; display: table; height: 120px; }
			
				.webgarden div div { display: table-cell; vertical-align: middle; }
		
					.webgarden img, .webgarden a { display: block; height: 40px; }

/**  GRIDS                       **********************************************/
	
.container { width: 100%; margin: 0 auto; padding: 0; }
	
	.span_1_of_2 {
		float: left;
		width: 40%;
		padding: 0 5%;
		vertical-align: top;
		text-align: left;
	}
	
	.span_1_of_4 {
		float: left;
		width: 20%;
		padding: 0 2.5%;
		vertical-align: top;
		text-align: left;
	}
	
		.span_1_of_2 img,
		.span_1_of_4 img { max-width: 100%; height: auto; }
	
		.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 (min-width: 1921px) {	

#isokuva,
.tilaus,
.linja,
.yrittajat,
.yritysinfo,
	.tilaus div,
	.linja div,
	.yrittajat div,
	.yritysinfo div { height: 600px; }
	
	#menu ul li,
	.soita { font-size: 22px; }

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

#header, #top, #logo, #logo div, .soita div, #menu, .menuInnerB, .soita { height: 105px; }

#isokuva,
.tilaus,
.linja,
.yrittajat,
.yritysinfo,
	.tilaus div,
	.linja div,
	.yrittajat div,
	.yritysinfo div { height: 400px; }
	
	#menu ul li,
	.soita { font-size: 18px; }
	
.tilaus,
.linja,
.yrittajat,
.yritysinfo { font-size: 36px; }

.tilaus a.readMore, .linja a.readMore, .yritysinfo a.readMore { font-size: 18px !important; }

#footer,
.webgarden,
.webgarden div { height: 110px; }
	
}

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

#header, #top, #logo, #logo div, .soita div, #menu, .menuInnerB, .soita { height: 100px; }

#isokuva,
.tilaus,
.linja,
.yrittajat,
.yritysinfo,
	.tilaus div,
	.linja div,
	.yrittajat div,
	.yritysinfo div { height: 340px; }
	
	#menu ul li,
	.soita { font-size: 16px; }
	
.tilaus,
.linja,
.yrittajat,
.yritysinfo { font-size: 32px; }

.tilaus a.readMore, .linja a.readMore, .yritysinfo a.readMore { font-size: 17px !important; }

#footer,
.webgarden,
.webgarden div { height: 100px; }
	
}

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

/**/

#menuMobi { display: block; }

#menu { display: none; }
					
#header, #top, #logo, #logo div, .soita div, #menu, .menuInnerB, .soita { height: 95px; }

.tilaus a.readMore, .linja a.readMore, .yritysinfo a.readMore { font-size: 16px !important; }

#isokuva,
.tilaus,
.linja,
.yrittajat,
.yritysinfo,
	.tilaus div,
	.linja div,
	.yrittajat div,
	.yritysinfo div { height: 300px; }
	
.tilaus,
.linja,
.yrittajat,
.yritysinfo { font-size: 28px; }
			
/**/

h1 { font-size: 36px; }
	
h2 { font-size: 21px; }

h3 { font-size: 18px; }

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

.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) {
	
body { font-size: 15px; }

h1 { font-size: 32px; }
	
h2 { font-size: 19px; }

h3 { font-size: 16px; }

#menuMobi, .menuInnerB, .soita, .soita div { height: 75px; }
	
#logo { float: none; width: 100%; text-align: center !important; padding: 0; }

	#logo img { max-width: 90%; height: auto; }

#menuMobi { width: 100%;}
		
}

@media only screen and (max-width: 767px) {
	
.google-maps {
	padding-bottom: 75%; 
}

.span_1_of_2 {
		float: none;
		width: 90%;
		padding: 0 5%;
	}
	
}

@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_3_of_3 img,
	.span_2_of_3 img,
	.span_1_of_3 img,
	.span_1_of_4 img { text-align: center; }
	
}

@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) {
	
.onlyMobile { display: block; }
	
}