@charset "utf-8";

/*------------------------------------------------------------------------------


 Design:	Mainostoimisto Mediaporras Oy
 Code:      Tiina Heikkilae / Mainostoimisto Mediaporras Oy
			Veli-Pekka Anteroinen / Mainostoimisto Mediaporras Oy
 Author URI:	mediaporras.com
 Client:    	LTY Yhtiöt Oy 

 Version:      	1.0.5  

 updated:       14/03/2017
    
- frontpage background image
- mobile styles
- cleaned CSS 

------------------------------------------------------------------------------*/

/* 
		icon-font 
======================================================*/
@font-face {
  font-family: "perus-some";
  src:url("../fonts/perus-some.eot");
  src:url("../fonts/perus-some.eot?#iefix") format("embedded-opentype"),
    url("../fonts/perus-some.woff") format("woff"),
    url("../fonts/perus-some.ttf") format("truetype"),
    url("../fonts/perus-some.svg#perus-some") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
font-family: "perus-some" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "perus-some" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-youtube:before{content:"\61"}
.icon-linkedin-square:before{content:"\62"}
.icon-linkedin:before{content:"\63"}
.icon-google-plus-square:before{content:"\64"}
.icon-facebook-square:before{content:"\65"}
.icon-facebook-official:before{content:"\66"}
.icon-facebook:before{content:"\67"}
.icon-twitter:before{content:"\68"}
.icon-twitter-square:before{content:"\69"}
.icon-twitch:before{content:"\6a"}
.icon-instagram:before{content:"\6b"}
.icon-social-snapchat:before{content:"\6c"}
.icon-tumblr-square:before{content:"\6d"}
.icon-tumblr:before{content:"\6e"}
.icon-flickr:before{content:"\6f"}
.icon-git-square:before{content:"\70"}
.icon-github:before{content:"\71"}
.icon-github-alt:before{content:"\72"}
.icon-github-square:before{content:"\73"}
.icon-google-plus:before{content:"\74"}
.icon-google-plus-1:before{content:"\75"}
.icon-envelope:before{content:"\76"}
.icon-envelope-o:before{content:"\77"}


/* #General Site Styles
================================================== */

html											{	-webkit-font-smoothing: antialiased; 	font-size:62.5%;  backgound-color:#383737;}
body											{font-family: 'PT Sans', Verdana, Arial, sans-serif; font-size:14px; font-size:1.4rem; color:#313131; background-color:#fff; }
button, input, select, textarea 			{font-family: 'PT Sans', Verdana, Arial, sans-serif;}

/* #Fonts & Typography
======================================================== */

h1												{font-size:36px; margin:0.1em 0 0.5em;}
h2												{font-size:18px; margin:0.5em 0 0.5em;  line-height: 1.3em;}
h3												{margin-bottom:0;}

#content h2										{text-transform:uppercase;}
a 												{color:#ff5000; text-decoration:none;}
a:hover 										{color:#de4b08;}
strong 										{ color:inherit; }
p												{margin-top:0.3em;}

.ingressi 										{}


input[type="text"], input[type="password"], input[type="email"], textarea 
												{background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 2px 2px 2px 2px; color: #777777; display: block; margin: 0 0 14px; max-width: 100%; outline: medium none; padding: 6px 4px; width: 210px; }

/*Buttons*/
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] 							
												{background-color: #FFFFFF; box-shadow:inset 0px 1px 1px rgba(255,255,255,.6); text-transform:uppercase; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; color: #666; -webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; transition:all .2s ease-in-out; }

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover 					{color: #222;}
article a										{text-decoration:underline;}
hr												{border:0px none; height:5px;}
table,img,iframe								{max-width:100%; height:auto !important;}
table											{font-size:12px;}

/*STRUCTURE*/
.container										{margin-left:auto; margin-right:auto; overflow:auto; position:relative; }


/*HEADER*/
header											{ width:100%; overflow:visible; background-color:#fff; min-height:100px; z-index: 20; border-bottom:1px solid #ebe7e7; }
header .container								{ position:relative; z-index: 20; overflow: visible; }
#logo 											{ color: #000; display: inline-block; float: left; font-size: 30px; margin: 17px 0 0; letter-spacing: 0.01em; }
#logo a											{color:#000;}
#topLine nav li								{display:block; float:left;}
.someNav										{list-style:none; margin-top:30px; float:right; margin-left:30px; padding:0;}
.someNav li										{float:left;}
.someNav a										{display:block; width:35px; height:35px; /*text-indent:-1000px;*/ overflow:hidden; /*background:url("../images/icons.png") top left no-repeat;*/}
/*.someNav .facebook_icon 						{background-position: 0px -166px;}*/
.someNav i.icon.icon-facebook-official 			{font-size: 1.4em;}


/* #Navigation 
=============================================== */
nav#main-nav 									{ display: block; float: right; font-size: 100%; margin-left: 0; margin-top: 29px; }

/* All Levels */
nav#main-nav ul								{ margin:0px; padding:0px; display:block; }
nav#main-nav ul li a							{ text-decoration:none; color:#444; white-space: nowrap; }

/* Top Level */
nav#main-nav > ul								{ float:right; }
nav#main-nav > ul > li 						{ display: block; float: left; margin: 0 1.7em 0 1.9em; padding: 0 0 12px; position: relative; }
nav#main-nav ul li.agileHover,
nav#main-nav ul li:hover						{ z-index:30; }
nav#main-nav > ul > li > a
												{color:#413f3f; font-size:14px; display:block; padding:2px; font-weight:700; text-transform:uppercase; -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; -o-transition: border-color, color, padding-top .1s ease-in-out; /* Opera likes to be theatrical with font size, so we can't use 'all' */ transition: all .1s ease-in-out; } nav#main-nav > ul > li:hover > a,
nav#main-nav > ul > li > a:hover				{ color:#ff5000;  }
nav#main-nav > ul > li.current > a			{ color:#ff5000; text-decoration:underline;  }

/* Second Level */
nav#main-nav > ul li ul
												{ top:100%; left:0; position:absolute; display:block; height:0px; overflow:hidden; opacity:0;	 min-width:100%; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; background-color:#eee; background-color:rgba(240,240,240,.9); }
nav#main-nav > ul > li:hover > ul				{ height:auto; opacity:1; overflow:visible; display:block; }
nav#main-nav ul ul li							{ position:relative; margin:0; padding:0; border-bottom:1px dotted #dedede; }
nav#main-nav ul ul li a						{ padding:.6em 1.3em; display:block; }
nav#main-nav ul ul li a:hover					{ color:#000; background-color:#ddd; background-color:rgba(230,230,230,1); }

/* 3rd + Levels */
nav#main-nav ul ul li ul						{ position:absolute; top:0; left:100%; font-size:100%; }
nav#main-nav ul ul li:hover ul				{ height:auto; opacity:1; }

/* Mobile */
.nav-close										{ display:none; font-size:8px; text-transform:uppercase; padding:1px 8px; background:#dedede; text-decoration:none; position:absolute; z-index:50; }

a.mobile-menu-button							{display:none;}

/*HOME*/
section .container								{padding:45px 0 0;}
.info											{text-align:left; font-size:18px; font-size:1.8rem; margin-bottom:50px;    line-height: 1.25em;}
.info a											{font-weight:700; text-decoration:underline;}
.secHeader										{text-align:left;}
.secHeader a 									{font-weight:700; font-style:italic;}
.secHeader h1, footer h3						{border-bottom:1px solid #e9e9e8; text-align:left; display:inline-block; }

/*#about{background: url("../images/bg_utuniitty.jpg") top center no-repeat; background-size:cover; background-attachment:fixed; min-height:530px; font-size:16px; font-size:1.6rem;}*/
/*#about{background: url("../images/lampotehdas_taustakuva_jarvimaisema.jpg") top center no-repeat; background-size:cover; background-attachment:fixed; min-height:530px; font-size:16px; font-size:1.6rem;}*/
#about											
												{background: url("../images/lampopumput_lampotehdas_pohjanmaa_seinajoki_pakattu.png") top center no-repeat; background-size:cover; background-attachment:fixed; min-height:530px; font-size:16px; font-size:1.6rem;}
#about .container 								{padding:0;}
#about h1										{font-size:45px; font-size:4.5rem; line-height:1.2em; margin-top:1.1em; display:inline-block;}
#about p										{margin-bottom:1.8em;}
.mainImg 										{position:relative; height:530px;}
.mainImg p										{margin:0;}
.mainImg img									{ position: absolute; bottom: 0; }
#services										{text-align:center;}
#services .container							{padding-top: 54px; padding-bottom:65px;}
#services .secHeader a 						{ margin-left: 17px; }
#services h2									{color:#313131; font-size:22px;  margin-bottom: 1.3em;}
.arrow-title h2:after, #services h2 a:after	{content:"›"; color:#ff5000; font-size:1.5em; margin-left:10px; }
#services h2 a									{color:#313131;}
#services .four .component						{padding:0 20px;}
#services .component img 						{ margin-bottom: 16px; }
#skills 										{background-color:#f2f2e6; color:#313131;}
#skills .info									{padding-top:7px; margin-bottom:15px;}
#skills h1										{border-bottom:1px solid; #313131; }
#skills h3										{color:#ff5000; font-size:18px; font-weight:700; text-transform:uppercase; margin-bottom:0;}
#skills ul										{ list-style:none; padding:0; margin:0 0 32px 0;}
#skills li										{color:#313131;  background:url("../images/icons.png") -5px -211px  no-repeat; padding-left:27px; line-height: 1.7em;}
#skills a										{color:#313131;}
#skills .painike 
												{ display: inline-block; background: url("../images/icons.png") 110% -90px no-repeat #fff; padding: 8px 30px 8px 15px; color: #7ac300; font-size: 12px; text-transform: uppercase; float: right; margin-bottom: 10px; }
#blog											{background: #fff; font-size: 18px; }
#blog .container								{padding-bottom:45px;}
#blog a											{font-weight:700; font-style:normal; text-decoration:underline;}
#blog a.date 									{font-weight:700; font-style:italic; text-decoration:none;}
blockquote 									{ margin: 0; }
#blog .one-third.column.newsfeed:nth-child(2) 	{ margin-left: 0px; }
#blog .one-third.column.newsfeed:nth-child(4) 	{ margin-right: 0px; }

/*.imgBottom {position:relative; min-height:530px;}*/
.imgBottom 										{position:relative; min-height:430px;}
.imgBottom img									{position:absolute; bottom:0;}
.column.half									{width: 46%; margin-right: 1%;}
.column.half.alpha.fbpost 						{ width: 45%; }

/*CONTENT*/
#content 										{ padding-bottom: 50px; background:url("../images/bg_stripes.gif") repeat #f2f2f2; }
#content .article_header img					{border:3px solid #fff;}
#content .container								{padding:40px 0;}
#content article .textarea						{background-color:#fff; padding:15px;}
.column, 
.columns 										{ display: inline; float: left; margin-left: 10px; margin-right: 10px; }
.column img, 
.columns img									{max-width:100%;}

/*forms*/
.form-area 										{background-color:#ff5000;  color:#fff; }
.form-area h2 									{color:#fff !important; }
input, textarea 								{border:0px none !important; }
.form-area .container, 
.form-area .info			{margin-bottom:0; padding-bottom:0 !important;}
form											{font-size: 13px;}
input, textarea								{border-radius:0; margin-bottom:0.5em;  }
input.short									{width: 41%; display: inline-block;  margin-right: 3%; }
form .row										{margin-bottom:0;}
.checkbox-question								{margin-bottom:0em;}
.checkbox-label									{display:inline-block; margin: 0.1em 1em 0.1em 0; font-weight: normal; }
.tarjouslomake textarea						{height:200px; }
form h3										{margin: 0 0 0.2em; text-transform:uppercase; font-size:14px;  display:block;  }
form input[type="submit"] 					{background-color:#313131; color:#fff; border:0px; margin-top:1em; box-shadow:none; padding:0.5em 1em; width:100%;  }
form input[type="submit"]:hover				{color:#fff; background-color: #000;}
form input[type="checkbox"] 					{margin-right:0.3em; }
.footerlomake textarea, 
.footerlomake input[type="submit"]				{width:88%; }
.footerlomake h3								{font-size:14px !important; border:0px none; margin-top:1em; }
.footerlomake									{}

::-webkit-input-placeholder 					{color: #313131;}
:-moz-placeholder								{color: #313131;}
::-moz-placeholder 								{color: #313131;}
:-ms-input-placeholder 							{color: #313131;}


/*SIDEBAR*/
label 											{margin: 1em 0 0.3em;}
label, legend 								{ display: block; font-size: 13px; font-weight: bold; }
#secNav 										{ margin-bottom: 40px; margin-top: 20px; }
.sidebar h2, 
.widget h2										{color:#525252; font-size:24px; margin-bottom:1em;}

.widget .one-third.column.newsfeed 				{width: 100%;}
.widget .one-third.column.newsfeed h2			{color:#000; font-size:16px;}
#secNav ul 									{ border-top: 1px solid #e5e5e7; }
#secNav li 									{border-bottom: 1px solid #e5e5e7;}
#secNav li a 									{ color: #525252; display: block; font-size: 16px; margin-bottom: 1px; padding: 10px 20px 13px 0; text-decoration: none; line-height:1.2em;}
#secNav li a:before							{content: "›";   color: #ff5000; font-weight:700; display:inline-block; padding:0 10px 0; font-size:1.7em;}
#secNav ul > li.current > a 					{ color: #ff5000; background-color:#fff; font-weight:700; }
#secNav > ul > li > a:hover 					{ color: #ff5000; }

.widget											{background-color:#fff; padding:15px; float:left;  margin-top:15px;}
.widget h2										{border-bottom: 1px solid #e5e5e7; padding-bottom:15px; margin-top:0; margin-bottom:15px;}
.blogWidget .readAll							{float:right; color:#3f3f3f;}
.widget .feedItem 								{margin-bottom:25px;}
.widget .feedItem a								{font-style:normal; text-decoration:underline;}
.widget .feedItem a.date 						{font-weight:700; text-decoration:none; text-transform:uppercase;}

/* #FOOTER
=========================================== */
footer											{background-color:#3f3f3f;}
footer h3										{color:#fff; font-size:36px;    margin: 0 0 8px; padding-bottom:5px;}
footer .contact p 							{text-align: center; font-size: 14px; font-size: 1.4rem; font-style: italic; margin-right: 45px; line-height: 1.8em; margin-bottom: 1.5em;}
footer .contact strong 						{text-transform:uppercase; font-weight:700; font-style:normal}
.far-edge 										{ text-align: right; margin-right: 1% !important; float: right; }
#colophon										{}
#colophon .footer-upper							{ padding:2em 0 2.3em; color:#fff; }
#colophon #footer-base							{ padding:.8em 0 .6em; text-transform:uppercase; background-color:#383737; color:#717070; }
footer .container .column.half					{margin-bottom:0px;}
footer h4										{margin-bottom:10px;}
footer #contact								{ margin-top: 30px; }
footer .column.half 							{ max-width: 40%; margin-right: 7%; }
footer .column.half.omega						{margin-right:0; max-width:47%;}
footer #subscribe input[type="email"] 		{ float: left; font-size: 12px; padding: 8px 3px; width: 150px; }
footer #contact textarea						{height: 107px; margin-bottom: 17px; } 
footer small									{font-style:italic; color:#888585;}
footer textarea								{}


@media only screen and (min-width: 959px) {
	header										{position: fixed; top:0; min-height:80px; }
	.hdr_margin									{margin-top:80px;}
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {


}



/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container  									{ width: 768px; }
	.container .column,
	.container .columns                         { margin-left: 10px; margin-right: 10px;  }
	.container .one-third.column              	{ width: 236px; }
	.container .four.columns                    	{ width: 172px; }
	.container .column.half							{width: 364px;}
	header											{min-height:76px;}
	#about h1 										{font-size: 35px; 	font-size: 3.5rem;}
	nav#main-nav ul li ul							{text-align:left;}	
	nav#main-nav > ul > li 						{display: inline-block; 	float: none; 	margin: 0 0.7em 0 0.9em;}
	.nav-close										{display:block; 	top:-28px; 	left:0; 	right:auto;}
	.mainImg 										{	height: 534px;	}
	.imgBottom 										{min-height: 670px;}
	.secHeader 										{font-size: 13px;	}
	.secHeader h1									{font-size:33px;} 
	#services h2 									{	font-size: 18px;	}
	.info .component								{padding-left:20px; padding-right:10px;}
	footer .container .four.columns				{width: 246px;	}
	footer h3 									{font-size: 28px; }
	footer .container .offset-by-four 				{padding-left: 88px;	}
}

/* Mobile Portrait --320px-- */
@media only screen and (max-width: 767px) {
	h1 												{font-size: 25px;}
	table td										{display:block;}
	table tr										{display:block; padding-bottom:3px;}
	.column.half 									{	max-width: 90%;	margin-right: 1%;	}
	.container 										{ width: 300px; }
	.columns, .column 								{ margin: 0; }
	.container .four.columns, 
	.container one-third.column					{ width: 300px; }
	.container .column.half							{width: 300px;}
	a.mobile-menu-button 
													{	background:url("../images/icons.png") right -125px no-repeat #ff5000; 	color: #ffffff !important; 	display: inline-block; 	font-family: "Montserrat",Verdana,Arial,sans-serif; 	font-size: 14px; 	padding:2% 10% 2% 4%; 	text-align: justify; 	text-decoration: none; 	text-transform: uppercase; 	transition: all 0.2s ease-in-out 0s; 	width: 86%;	}
	a.mobile-menu-button:hover 						{background-color: #ea5300 !important;	}
	header nav#main-nav 							{ position: relative; 	width: 100%;}
	nav#main-nav ul.nav-menu, 
	nav ul.nav-menu 								{ 	background: none repeat scroll 0 0 #ff5000; 	display: none; 	position: absolute; 	width: 100%; 	}
	nav#main-nav ul.nav-menu.menu-open, 
	nav ul.nav-menu.menu-open 						{	display: block;	}
	nav#main-nav ul.nav-menu > li, 
	nav ul.nav-menu > li 							{display: block;float: none;margin: 0; 	padding: 0;}
	nav#main-nav  > ul > li > a 					{	display: block; 	min-width: 263px; 	padding: 10px 10px 5px; 	color:#fff; 	}
	nav#main-nav  > ul > li > a:hover, 
	nav#main-nav  > ul > li.current  a 			{ 	background-color: #ea5300; 	color:#fff; 	}
	nav#main-nav > ul li ul 						{	background-color: transparent; 	background-image: none; 	padding-top: 0;	}
	nav#main-nav ul ul li a						 {	background-color: rgba(0, 62, 126, 0.9);	color: #fff;}
	nav#main-nav ul ul li a:hover 				{	background-color: #003e7e;	color: #fff;	}
	nav#main-nav ul ul li ul 					{left: 0;top: 100%;}
	#about h1 										{font-size: 35px;font-size: 3.5rem;}
	#content .container								{padding: 15px 0;}
	#secNav li a 									{font-size: 16px;	padding: 5px 20px 5px 0;}
	.secHeader .component							{padding-left: 10px;	}
	.mainImg 										{height: 0px; 	overflow: hidden; 	position: relative;	}
	.mainImg img 									{bottom: auto;position: absolute;	top: 30px;	}
	.imgBottom 										{min-height: 0px;}
	.imgBottom  img								{display:none;}
	#about .component, 
	#services .component, 
	#skills .component								{padding:0 10px;}
	#services .info, 
	#services .four.columns							{margin-bottom:10px; border-bottom: 1px solid #bcbcbc;}
	#services  .form-area .four.columns				{border-bottom:0 none; margin-bottom:0;}
	#services .component img 						{ 	margin-bottom: 0px; 	width: 74px; 	}
	#services h2 									{ 	font-size: 19px; 	margin-bottom: 0.3em; 	}
}

/* Mobile Landscape --480px-- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.container										{ width: 420px; } 
	.columns, .column 								{ margin: 0; }  
	.container .four.columns, 
	.container .one-third.column					{ width: 420px; } 
	.container .column.half							{ width: 420px; }  
	.container .one-third.column img 				{ width: 100%; height:auto !important; }   
	header 										{ text-align: left; }  
	header nav#main-nav 							{ position: relative; width: 420px; text-align: left; }
	section#about									{position: relative;overflow: hidden;height: auto !important;}
	section#about::before 							{content:" ";position:absolute;background:#FFFFFF;left:0;top:0;bottom:0;width:100%;height:100%;    opacity: 0.8;    z-index: 0;}
	section#about .container 						{ z-index: 15;}
	#services 										{z-index: 16;    position: relative;}
}

/* Portrait */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (orientation: portrait) {
	section#about									{position: relative;overflow: hidden;height: auto !important;}
	section#about::before 							{content:" ";position:absolute;background:#FFFFFF;left:0;top:0;bottom:0;width:100%;height:100%;    opacity: 0.8;    z-index: 0;}
	section#about .container 						{ z-index: 15;}
	#services 										{z-index: 16;    position: relative;}
}

/*SIVUNEDITOINTINÄKYMÄ - komponentin linkit*/
.component_editorHeader { padding:5px; font-weight:bold; display: block; }  .addComponentStyle a { text-transform:uppercase; border:none !important; display:inline !important; }  .component_editorHeader a { color: #0085A8 !important; padding:1px; width:auto; font-weight:bold; float:none !important; display:inline !important; background-color:transparent !important; }  .baseEditPage header{position: relative;}