@charset "utf-8";

/* CSS Document for Mökkikeskus
   by Mediascope Oy 2015
*/

html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

body { font:13px/1.231; *font-size:small;  background: #fff repeat;} /* Hack retained to preserve specificity */

a:focus { outline: none; }

/* Normalize monospace sizing:
en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }/* Reset CSS // */
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

* { font-family: 'Raleway', sans-serif; }

a, a:visited, a:link, a:active {color:#1db14c; text-decoration: underline; }
a#logo { display:block; text-indent:-9000pt; width:250px; height:90px; background:url(img/logo.png) no-repeat bottom right; background-size: 230px 40px;}

p { font-size:14px; line-height:28px; color:#4d4d4d; margin:20px 0 30px 0;}
	.front-content p { font-size:18px; line-height:25px; text-align:center; max-width:680px; margin-left:auto; margin-right:auto; }
	.withbg p { color:#fff; font-weight:600; }
	p.ingressi { font-size:20px; line-height:32px; margin-bottom: 25px; font-style:italic; color: #888;}	
	.content-right p { max-width:840px; }
	.list-item p { margin:10px 0 10px 0; }
	.gray-box p { font-size:12px; line-height:18px; margin-right:10px;}
	
h1 { margin:80px 0 50px 0; text-align:center; text-transform:uppercase; font-size:27px; line-height:37px; color:#284832; }
	.content-right h1 { color:#222222; font-size:44px; line-height:43px; font-weight:300; margin:0 0 30px 0; text-align:left; }
	.content-right h1 strong { margin-top:-10px; font-weight:700; font-size:28px; display:block;}
	
h2 { font-size:22px; color:#4d4d4d; margin:30px 0 30px 0; }
	.front-box h2 { color:#fff; margin:0; }
	.withbg h2 { color:#fff; }
	.list-item h2 { color:#222222; margin:5px 0 20px 0; }
	.gray-box h2 { color:#000000; margin-bottom:20px;  }
		.gray-box h2.house { padding-left:65px; background:url(img/ico-house.png) no-repeat top left; }
	
h3 { text-transform:uppercase; margin-bottom:30px; font-size:14px; color:#222222; }
	h3.loc { margin-bottom:15px; line-height:30px; height:30px; padding-left:40px; background:url(img/ico-loc.png) no-repeat top left; background-size:30px 30px; }
	h3.localpro { text-transform: none; font-size: 32px; margin-bottom: 10px;}

h4 { margin:10px 0 25px 0; font-size:12px; line-height:20px; text-transform:uppercase; }
	#footer-container h4, #footer-container h4 a { color:#fff; text-decoration: none; }

a.button { display:inline-block; padding:30px 45px; background:#fff; text-decoration:none; border:1px solid #161616; font-size:18px; line-height:18px; font-weight:700; color:#4d4d4d; text-transform:uppercase; }

.list-item h2 a, .content-left h3 a { color:#222; text-decoration:none !important; }

span.localpro-phone { display: block; margin-bottom: 30px; margin-top: 20px; height: 30px; padding-left: 40px; font-size: 18px; font-weight: 400; background: url(img/phone-icon.png) no-repeat top left;}
a.telnro { text-decoration: none; color: #222;}

.content-right ul, .content-right ol { margin-left: 40px; font-style: italic; font-size: 16px; color:#4d4d4d; margin-bottom: 40px;}
	.content-right ul li, .content-right ol li { line-height: 32px; padding-left: 15px;}

#sub-slider ul, #sub-slider ul li { margin:0; padding:0; }

/* WRAPPERS */

#master-wrap { position:relative; }
	#master-wrap.basic { background-repeat:repeat-x; background-position:top center; background-color:#fff; }

#headerimgs { background:#000; position:absolute; top:0; z-index:1; width:100%; height:900px; overflow:hidden; }
	.basic #headerimgs { color:#fff; }
	#headerimgs .headerimg { position:absolute; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:top center; }

#header-wrap { position:relative; background:url(img/top-fade.png) top left repeat-x; z-index:2; }
	.basic #header-wrap { height:230px; background:none; }

.content-wrap { position:relative; z-index:2; background:#fff; }
	.basic .content-wrap { background:none; }
	.content-wrap.withbg  { background-repeat:no-repeat; background-position:top center; background-size:cover; }
	
#footer-wrap { position:relative; z-index:2; background:#383838; }

/* CONTAINERS */
	
#header-container { position:relative; width:1280px; margin: 0 auto; }

.front-content { padding-bottom:60px; }

.content-container { width:960px; margin:0 auto; padding:60px 0; }
	.basic .content-container { padding-top:1px; width:1280px; }
	.front .withbg .content-container { width:530px; padding-left:430px;}
	.content-container .column { width:50%; display:block; float:left; }
	
.content-left { display:block; float:left; padding:0 0 0 20px; width:300px; }
.content-right { display:block; float:left; width:960px; }	

.subpagelist { padding: 10px 0;}
	
#footer-container { width:960px; margin:0 auto; padding:50px 0; }

/* MENUS */

#primary-nav { position:absolute; right:0; top:65px; }
	#primary-nav ul { list-style-type:none; }
		#primary-nav ul li { display:block; float:left; margin-right:20px; }
			#primary-nav ul li a { color:#fff; font-size:14px; font-weight:500; line-height:16px; text-decoration:none; }
			.basic #primary-nav ul li a { color:#000;  font-weight:500;}
			#primary-nav ul li a:hover { color:#1db14c; }
			#primary-nav ul li.active a, #primary-nav ul li.active ul li.active a { font-weight:700; /*padding-bottom: 5px; border-bottom: 5px solid #fff;*/}
				#primary-nav ul li.active ul li a { font-weight:500;  }
				
			#primary-nav ul li ul { display:none;}
	
.content-left ul { list-style-type:none; margin-bottom:45px; padding-right:10px;}
		.content-left ul li { display:block; margin-bottom:5px; }
			.content-left ul li a { display:block; border: 1px solid #ddd; color:#222; background:url(img/green-arrow.png) no-repeat 12px center; font-size:13px; line-height:16px; font-weight:500; text-decoration:none; padding: 10px 10px 10px 30px; margin-right: 60px;}
			.content-left ul li a:hover { color:#1db14c; background-color: #fcfcfc;  }	
				.content-left ul li.active a, .content-left ul li.active a:hover {font-weight:700; border: 1px solid #aaa; background-color: transparent; color: #222; }
		
#footer-container ul { list-style-type:none; margin-bottom:45px; padding-right:10px;}
		#footer-container ul li { display:block; padding-left:16px; background:url(img/green-arrow.png) no-repeat 0 4px; margin-bottom:22px; }
			#footer-container ul li a { display:block; color:#d4d4d4; font-size:12px; line-height:16px; font-weight:400; text-decoration:none; }
			#footer-container ul li a:hover { color:#fff; }
		
/* CONTENT */

#slider-text { position:absolute; top:300px; left:560px; }
	#line-1 { display:block; color:#fff; font-weight:700; font-size:44px; line-height:50px; text-transform:uppercase; }
	#line-2 { display:block; color:#fff; font-weight:300; font-size:65px; line-height:60px; text-transform:uppercase; }
	#link { margin-top:10px; display:block; color:#fff; font-weight:700; font-size:18px; line-height:20px; text-transform:uppercase; }
	
.front-boxes { width:100%; padding-top:510px; }
	.front-box { display:block; float:left; position:relative; width:390px; background:#157e36; border:10px solid #fff; text-align:center; color:#fff; padding: 30px 0 10px 0; }
		.front-box.middle { background:#1db14c; margin:0 25px; }
		.front-box p { color:#fff; font-size:14px; margin-right:10px; margin-left:10px; }
		.front-box p a { color:#fff; font-size:14px; }
		.front-box .icon { position:absolute; display:block; width:48px; height:48px; background:url(img/ico-huussi.png) no-repeat top left; top:-33px; left:0; right:0; margin:0 auto; }
			.front-box .icon.house { background:url(img/ico-house.png) no-repeat top left; }
			.front-box .icon.loc { background:url(img/ico-loc.png) no-repeat top left; }

#offer { margin-top:50px; width:100%; border-top:2px solid #222; }
	#offer a { display:block; float:right; }
		#offer a.pro { display:none; background:#faa21b; color:#fff; width:auto; padding: 0 30px; text-transform:uppercase; text-align:center; height:62px; line-height:62px; text-decoration:none; font-weight:700; }
		#offer a.offer { background:#1db14c; color:#fff; width:auto; padding: 0 30px; text-transform:uppercase; text-align:center; height:62px; line-height:62px; text-decoration:none; font-weight:700; }
		#offer a.print { text-indent:-9000pt; width:70px; height:62px; background:url(img/ico-print.png) no-repeat center center; opacity:0.3; }
			#offer a.print:hover { opacity:0.6; }

.list-item { display:block; margin-top:25px; min-height:175px; border-bottom:1px solid #dfdfdf; }
	.list-item.last { border:none; }
	.list-item img { display:block; float:left; }
	.list-item .text { display:block; float:left; width:650px; padding-left:35px; }
	.list-item .readmore { font-size:11px; font-weight:700; color:#1db14c; text-decoration:none; text-transform:uppercase; }
	
	.list-item.odd img { float:right; }
	.list-item.odd .text { padding-left:0px; padding-right:35px; }

.gray-box { margin-top:50px; padding:0 25px 20px; background:#f9f9f9; border:1px solid #dfdfdf; }
	.gray-box-column { width:450px; display:block; float:left;  }
		.gray-box-column.embed { width: 400px; padding: 20px 0 0 50px; }

.footer-links { text-align:center; }
	.footer-links a { height:17px; font-weight:700; font-size:12px; line-height:18px; color:#fff; text-decoration:none; display:inline-block; padding:0 50px 0 32px; background-image:url(img/ico-check.png); background-repeat:no-repeat; background-position:center left; }
	.footer-links a.envelope { background-image:url(img/ico-envelope.png); }
	.footer-links a.mglass { background-image:url(img/ico-mglass.png); }
	.footer-links a.pencil { background-image:url(img/ico-pencil.png); }
	.footer-links a:hover { color:#d4d4d4; }

#footer-container .column { display:block; float:left; padding-left:50px; width:190px; }

#map { width:100%; height:300px; }

table#contacts { margin:30px 0; }
	table#contacts th {text-align:left; padding: 0 0 5px 20px; font-size: 14px;}
	table#contacts tr:nth-child(even) { background: #f7f7f7;}
		table#contacts tr:hover { -webkit-box-shadow: 0 0 3px 1px #aaa; box-shadow: 0 0 3px 1px #aaa; position: relative;}
	table#contacts td { padding:6px 30px 6px 20px; font-size: 12px; }
		table#contacts td.fat {font-weight: 600; padding:6px 40px 6px 20px; }
		table#contacts td.contact {padding:6px 10px 6px 20px; }
			table#contacts td.contact a { text-decoration: none;}
	

	
/* forms */

#submitBtn { margin-top:0px; font-size:12px; width:auto; height:32px; line-height:32px;  border:none; cursor:pointer; color:#1db14c; font-weight:700; text-transform:uppercase;background: none; }

#kuntaselect { display:block; text-indent:5px; width:225px; height:38px; font-size:12px; font-weight:500; color:#222222; text-transform:uppercase; border:1px solid #dbdbdb; border-radius:1px;  margin-bottom:10px;  }

label.error { color:red; }

.contactform label { display:block; }

.contactform .textinput { display:block; font-size:12px; margin-bottom:10px; width:290px; padding:0 5px; height:30px; line-height:30px; border:1px solid #ddd; }

.contactform .textarea { display:block; font-size:12px; line-height:15px; margin-bottom:10px; width:290px; padding:5px; height:150px; border:1px solid #ddd; resize:none; }

.contactform select { width:300px; margin-bottom:10px; }

.check-wrap { margin-bottom:10px; }

/* others */

.clearer { clear:both; }
.justifyright {float: right; margin: 0 0 20px 20px;}
.justifyleft {float: left; margin: 0 20px 20px 0;}

.separator { clear:both; width:100%; height:1px; margin:45px 0 40px 0; background:#626262; }


/* Responsive */

@media all and (min-width : 960px) and (max-width : 1279px) {
	
	#header-container { position:relative; width:960px; margin: 0 auto; }
	
	a#logo { width:230px; }
	
	#primary-nav ul li { margin-right:15px; }
	.content-left ul li a { margin-right: 20px; font-size: 12px;}
	
	#slider-text { top:300px; left:360px; }
	
	.front-box { width:290px; }
		.front-box.middle { margin:0 15px; }
		.front-box h2 { font-size: 18px;}
		
	.basic .content-container { width:960px; }	
	
	.gray-box-column { width:600px; display:block; float:none;  }
	.gray-box-column.embed { width: 600px; padding: 0px 0 0 0px; }
	
	.content-left { width:240px; padding-right:20px; padding-left: 0px; }
	.content-right { width:700px; }
	
	.list-item .text { width:425px; }
	
	#kuntaselect { width: 208px;} 
	
}

@media all and (min-width : 300px) and (max-width : 959px) { /* menu */
	
	#offer a.pro { display:block; }
	
	#primary-nav { position:absolute; right:0; left:0; top:0px; z-index: 1000; }
	.basic .content-wrap { z-index:1; }
	
	#menu-icon { z-index: 599; position: absolute; top: 45px; right: 20px; height: 50px; width: 50px; display: block; background: url(img/menu-icons.png) 5px 5px #1DB14C; border: 2px solid #fff; border-radius: 2px; -webkit-border-radius: 2px; cursor: pointer;}
		#menu-icon.active { background: url(img/menu-icons.png) -35px -35px #1DB14C;}

	#primary-nav ul { padding: 20px 0 40px 0; background:#fff; z-index: 499; display: none; position: relative; width: 100%; height: auto; }
			#primary-nav ul li { width:100%; display: block; margin: 20px auto; float: none; border: none; text-align: center; margin-bottom:0px;}
				#primary-nav ul li a { font-size:18px; width:100%; display:block; color:#000; }
				
				#primary-nav ul li ul { display:none; padding:0; clear:both; }
					#primary-nav ul li ul li {margin:0; }
					#primary-nav ul li ul li a { font-size:12px; display:block; color:#000; }
		
	.content-left ul { margin:5px 0 20px 0; }		
	.content-left ul li { display:inline-block; margin:0;}
		.content-left ul li a { font-size:10px; line-height:14px; margin:0 2px 5px 0; padding: 5px; color:#1DB14C; background:none; }
					
	.content-left h3, .content-left h3.loc, .content-left form { display:none!important; }
}

@media all and (min-width : 640px) and (max-width : 959px) {
	a.telnro { color: #1db14c;}
	#offer a.print { display:none; }
	#offer a.offer, #offer a.pro { width:50%; padding-left:0; padding-right:0; }
	#offer a { display:block; float:left; }
	
	#header-container { position:relative; width:100%; margin: 0 auto;  }
	
	#slider-text { position:absolute; top:200px; left:0; right:0; margin:0 auto; width:600px; }
	
	.content-container { width:640px; }
	.basic .content-container { width:640px; }

	.front .withbg .content-container { width:540px; padding-left:100px; }

	.front-boxes { padding-top:400px; margin:0 auto; width:640px;  }
	
	.front-content { margin:0 auto; width:640px; }
	
	.front-box { width:180px; }
		.front-box.middle { margin:0 20px; }
		.front-box h2 { font-size: 18px;}
		.front-box p { line-height:20px; font-size:12px;}
		.front-box p a { line-height:20px; font-size:12px;}


	.content-left { width:640px; padding:0px; margin:0; }
		
	.content-right { width:640px; }
	
	.gray-box-column { width:600px; display:block; float:none;  }
	.gray-box-column.embed { width: 600px; padding: 0px 0 0 0px; }
	
	.list-item .text { width:380px; padding-left:20px; }
	.list-item.odd .text { padding-right:0;}
	
	/* lähin ammattilainen */
	.content-left h3.loc { margin-top:4px; margin-bottom:0px; padding-left:35px; display:block; float:left; width:0px; overflow:hidden;  }
	.content-left #submitBtn { float:left; }
	.content-left #kuntaselect { float:left; width:150px; }
	/* lähin ammattilainen */
	
	#footer-container { width:640px; }
		#footer-container .column { padding-left:20px; width:140px; }
	
	.footer-links a { font-size:10px; padding:0 20px 0 30px;  }

}

@media all and (min-width : 300px) and (max-width : 639px) {
	a.telnro { color: #1db14c;}
	#offer a.print { display:none; }
	#offer a.offer, #offer a.pro { width:100%; padding-left:0; padding-right:0; }
	
	a.button { padding:25px 20px;font-size:16px; line-height:18px; font-weight:700;}
	
	.content-right h1 { font-size:35px; line-height:35px; margin:0 0 30px 0; }
	.content-right h1 strong { margin-top:-10px; font-size:20px; line-height:25px;}
	h2 { font-size: 20px; }
	.gray-box h2 { font-size:18px; }
	
	p { font-size:14px; line-height:22px; }
	p.ingressi { font-size:16px; line-height:25px; }
	
	.content-right ul, .content-right ol { margin-left: 40px; font-style: italic; font-size: 14px; color:#4d4d4d; margin-bottom: 40px;}
	.content-right ul li, .content-right ol li { font-size: 14px; line-height: 25px; padding-left: 15px;}
	
	a#logo { width:250px; }
	
	.basic #header-wrap { height:290px; }
	
	#header-container { position:relative; width:100%; margin: 0 auto; }
	
	#slider-text { position:absolute; top:170px; left:0; right:0; margin:0 auto; width:300px; }
		#line-1 { font-size:30px; line-height:30px; }
		#line-2 { font-size:40px; line-height:40px; }
		#link { font-size:14px; line-height:16px; }
	
	.front .content-container .column {float:none; width:auto;}
	
	.front-boxes { padding-top:270px; margin:0 auto; width:320px;  }
	
	.front-content { margin:0 auto; width:320px; }
	
	.front-box { width:290px; }
		.front-box, .front-box.middle { margin:30px 10px 0 10px; }
		.front-box h2 { font-size: 18px;}
		.front-box p { line-height:20px; font-size:12px;}
		.front-box p a { line-height:20px; font-size:12px;}	
	
	.content-container { width:320px; }
	.basic .content-container { width:320px; }
	
	.front .withbg .content-container { width:320px; padding-left:0px;}
	
	.content-left { width:320px; padding:0px; margin:0; }
	.content-right { width:320px; }
	.content-right iframe { width:320px; }
	
	table#contacts { width:320px; }
		table#contacts th {text-align:left; padding: 0 0 5px 0; font-size: 12px;}
			table#contacts tr:hover { -webkit-box-shadow: 0 0 3px 1px #aaa; box-shadow: 0 0 3px 1px #aaa; position: relative;}
		table#contacts td { padding:3px 10px 3px 0px; font-size:10px; }
			table#contacts td.fat {padding:3px 10px 3px 5px; }
			table#contacts td.contact {padding:3px 5px 3px 10px; }

	
	.gray-box-column { width:280px; display:block; float:none;  }
	.gray-box-column.embed { width: 280px; padding: 0px 0 0 0px; overflow:hidden; }
	
	.list-item .text, .list-item.odd .text { width:320px; padding:0px; }
	.list-item img, .list-item.odd img { float:none; margin-left:auto; margin-right:auto; margin-bottom:20px; }
	
	#footer-container { width:320px; }
		.footer-links a {  padding:0 10px 0 30px; margin-bottom:10px;  }
		#footer-container .column { padding-left:20px; width:140px; }
		
	#footer-container ul li { padding-left: 16px; margin-bottom: 12px;}	
	
	.middle-clearer { clear:both; }
}