/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

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

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}



/*	Typography presets
	------------------	*/

h1 {
	font-size: 2.6em;
	line-height: 1.2em;
	font-family: 'Futura Std Heavy', Futura, Futura Std, Tahoma, Arial, sans-serif;
	text-shadow: 1px 2px 0 #f8f8f8, 3px 6px 0 #b1e001; 
	text-transform: uppercase;
	text-align: center;
	margin: 30px 0 8px;
}

.large, h2 {
	font-size: 20px;
	line-height: 20px;
	margin-bottom: 20px;
	font-weight: lighter;
	text-transform: uppercase;
	font-family: 'Futura Std Heavy', Futura, Futura Std, Tahoma, Arial, sans-serif;
	text-shadow: 1px 2px 0 #f8f8f8, 3px 6px 0 #b1e001;
	text-transform: uppercase; 
}

.bigger, h3 {
	font-size: 26px;
	line-height: 26px;
	font-family: 'Futura Std Heavy', Futura, Futura Std, Tahoma, Arial, sans-serif;
	text-shadow: 1px 2px 0 #f8f8f8, 3px 6px 0 #b1e001; 
	text-transform: uppercase;
	padding-bottom: 10px;
}

b, bold { font-weight: bold; }

.frontpage p, .tuomas, #globalfooter article p { font-family: 'ClarendonLTStdLight', Georgia, serif; font-size: 1.1em; margin-top: 10px; }

@font-face {
    font-family: 'ClarendonLTStdLight';
    src: url('../fonts/clarendonltstd-light-webfont.eot');
    src: url('../fonts/clarendonltstd-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/clarendonltstd-light-webfont.woff') format('woff'),
         url('../fonts/clarendonltstd-light-webfont.ttf') format('truetype'),
         url('../fonts/clarendonltstd-light-webfont.svg#ClarendonLTStdLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura Std Medium';
    src: url('../fonts/futurastd-medium-webfont.eot');
    src: url('../fonts/futurastd-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futurastd-medium-webfont.woff') format('woff'),
         url('../fonts/futurastd-medium-webfont.ttf') format('truetype'),
         url('../fonts/futurastd-medium-webfont.svg#FuturaStd') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura Std Heavy';
    src: url('../fonts/futurastd-heavy-webfont.eot');
    src: url('../fonts/futurastd-heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futurastd-heavy-webfont.woff') format('woff'),
         url('../fonts/futurastd-heavy-webfont.ttf') format('truetype'),
         url('../fonts/futurastd-heavy-webfont.svg#FuturaStd') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(177,224,1);}
::-moz-selection 	{background: rgb(177,224,1);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(177,224,1);}


/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

html { background: url(../images/bgrey.jpg) repeat left top rgb(50,50,50); }

body {
	position: relative;
	background: url(../images/bg.jpg) repeat left top rgb(248,248,248);
	font: 1em/1.7em 'Futura Std Medium', Arial, sans-serif;
	color: rgb(50,50,50);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

.right { float: right; }
.left {	float: left; }
.green { color: #b1e001; text-shadow: 0 0 2px rgba(0,0,0,1); }

header {
		width: 100%;
		margin: 0 auto;
		background: url(../images/bgrey.jpg) repeat left top rgb(50,50,50);
		}

#globalfooter {
	width: 100%;
	background: url(../images/bgrey.jpg) repeat left top rgb(50,50,50);
	padding: 5px 0;
}	
#globalfooter article { margin: -9px 0 0; padding: 15px 0 10px; border-top:2px solid rgb(50,50,50);}
#globalfooter article ul { 
	color: rgb(248,248,248); 
	line-height: 1.5em;
	height: 18px;
	padding: 15px 0; 	
	width: 66%; 
	margin: 0 auto;
 }

#globalfooter article ul li { color: rgb(248,248,248); height: 18px; padding: 15px 5px 15px 45px; display: inline; list-style-type: none; font-size: 0.75em; line-height: 1.2em; text-transform: uppercase;  }
.gameplan { background: url(../images/gameplan-48x48.png) no-repeat left top; }
.location { background: url(../images/location-48x48.png) no-repeat left top; }
.phone { background: url(../images/phone-48x48.png) no-repeat left top; }
.email { background: url(../images/email-48x48.png) no-repeat left top; }

nav, #ei-slider {
	width: 992px;
	margin: 0 auto;
	position: relative;
}
#ei-slider { margin: 0 auto 10px; }
section { width:100%; position:relative; height:auto; overflow-x: hidden;  }
#section-wrapper { width:992px;  margin:0 auto; position:relative; min-height: 670px; }
#home, #essence, #contact { width: 100%; position: absolute; left:1500px; top;0; }
#contact { left: 3000px; }

article { text-align: center; margin: 20px 0; width: 100%; }
.frontpage { width: 80%; margin: 50px auto; }
nav { color: rgb(248,248,248); font-family: 'ClarendonLTStdLight', Georgia, serif; }
nav a img { margin-top: 10px; }
nav ul { padding: 55px 0 30px; }
nav ul li { 
	list-style-type: none; 
	display: inline; 
	font-size: 1.2em; 
	line-height: 0.8em; 
	cursor: pointer; 
	-webkit-transition: all 0.5s ease-in-out; 
	-moz-transition: all 0.5s ease-in-out; 
	-o-transition: all 0.5s ease-in-out; 
	-ms-transition: all 0.5s ease-in-out; 
	transition: all 0.5s ease-in-out;
	/* background: url(../images/border-navi.png) no-repeat left top; */
	padding: 3px 0;
	margin-right: 5px;
	 
}
nav ul .first { padding-left: 0; border-left: none; background: none; }
nav ul .current, nav ul li:hover { color: rgb(177,224,1); border-bottom: 4px solid rgb(177,224,1); }
.read-more:hover { 
	background: #b1e001; 
	box-shadow: 0 0 10px rgba(0,0,0,0.5); 
	color: #3f3f3f; 
}

.brands { display: inline; float: left; margin: 25px 0; width: 100%;  }
.brands li { 
	display:inline; 
	background: url(../images/list-style-37x29.png) no-repeat left top; 
	font-family: 'ClarendonLTStdLight', Georgia, serif; 
	font-size: 24px; 
	float:left; 
	padding:5px 0 20px 45px; 
	margin-right: 7%; 
}

.boxes { 
	width:20%; 
	height: auto; 
	padding: 5px 18px; 
	height: auto; 
	background: url(../images/bgrey.jpg) repeat left top rgb(50,50,50); 
	color:#f8f8f8; 
	font-size: 14px; 
	line-height: 18px; 
	float: left; 
	margin-right: 2px; 
	cursor: pointer; 
	font-family: 'Futura Std Medium', Arial, sans-serif; 
	box-shadow: 0 0 10px rgba(0,0,0,0.5); 
	border-radius: 2px;
	text-align: left;
	margin-bottom: 2px;
}
.boxes h2 { color: #b1e001; margin-bottom: 0; padding-bottom: 14px; text-shadow: none; font-size: 20px; font-weight: normal; font-family: 'Futura Std Medium', Arial, sans-serif; padding-top: 14px; float: left; }
.boxes h3 { color: #b1e001; font-weight: normal; font-size: 1em; padding-top:8px; font-family: 'Futura Std Medium', Arial, sans-serif; text-shadow: none; padding-bottom: 0; }
.boxes .arrow { float: right; width: 25px; height: 48px; margin-top: 24px; font-size: 48px; color: #b1e001;   }
.boxes .more { clear: both; float: left; margin: 5px 0 15px; overflow: hidden; width: 100%; border-top: 1px solid white; }
.boxed { text-align: center; font-family: 'ClarendonLTStdLight', Georgia, serif; font-size: 24px; font-weight: normal; margin-bottom: 0;  } 
.education { width: 50%; text-align: center; padding: 10px 0; margin: 30px auto; }
.education h3 { margin-bottom: 10px; }
.education p { margin-top: 0; }
.school { text-align: center; text-transform: uppercase; font-size: 1em; }



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    

*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	#section-wrapper, nav, #ei-slider {
	width: 620px;
	margin: 0 auto;
	padding: 0;
	}
	.ei-title{ width: 255px !important; height: 230px !important; padding: 60px 40px 0 80px !important; font-size: 18px !important; line-height: 22px !important; }
	.ei-title h2 { font-size: 17px !important; line-height: 21px !important; }
	.ei-title h3 { font-size: 15px !important; line-height: 15px !important; }
	.ei-title .quote { top:29px; left:70px; }
	.ei-title .comment { margin-top: 30px; }
	#ei-slider .ei-slider-large li img { width: 490px !important; height: 291px !important; margin: 15px 0 0 -50px !important;}
	.boxes { padding: 5px; width: 23%; font-size: 12px; line-height: 15px; }
	.boxes h2 { font-size: 14px; }
	.brands li { padding:5px 0 20px 45px;  margin-right: 3%; font-size: 20px;  }
	#globalfooter article ul { width: 80%; } 
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    

*/

@media only screen and (max-width: 767px) {
	
	#section-wrapper, nav, #ei-slider {
	width: 252px;
	margin: 0 auto;
	padding: 0 24px;
	}
	nav ul { width: 100%; margin-top: 15px; }
	nav ul li { background: url(../images/border-navi.png) no-repeat left top; }
	nav a img { margin-right: -30px; }
	.brands { margin: 5px 0; }
	.boxes { font-size: 14px; line-height: 16px; display: none; }
	.boxes h2 { color: #b1e001; margin-bottom: 0; padding-bottom: 7px; text-shadow: none; font-size: 1.2em; font-weight: normal; font-family: 'Futura Std Medium', Arial, sans-serif; padding-top: 7px; float: left; }
	.boxes h3 { line-height: 16px; }
	#ei-slider { margin: 10px auto 0; height: 285px !important; }
	.ei-title { display: none;  }
	.ei-slider-thumbs li { margin-top: 10px;}
	h1 { font-size: 2em; margin: 10px 0; }
	.frontpage p, .tuomas, #globalfooter article p { font-size: 0.90em; line-height: 1.6em; }
	.brands { margin: 25px 0; }
	.brands li { font-size: 20px; clear: both; margin-left: 30%; }
	.education { width: 100%; margin: 10px 0; }
	#globalfooter article ul { width:100%; }
	.ei-slider-large li img { margin-left: -110px !important;  }
	
	
}


/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    

*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#section-wrapper, nav, #ei-slider {
	width: 436px;
	margin: 0 auto;
	padding: 0 24px;
	}
	nav ul { width: 20%; margin-top: 15px; }
	nav ul li { background: none; }
	nav a img { margin-right: 0px; }
	article { margin: 20px 0; }
	.frontpage { margin: 25px 0; width: 100%; }
	.frontpage p, .tuomas, #globalfooter article p { font-size: 0.95em; width: 80%; margin: 0 auto; }
	#section-wrapper { min-height: 550px; }
	.boxes { padding: 5px 10px; width: 28%; float: left; }
	.boxes .arrow { font-size: 30px; width: 8px; }
	.ei-title { display: block; }
	.ei-title .quote { display: none; }
	nav ul li { padding-left: 0; border-left: none; }
	nav a img { margin-top: 20px; }
	.ei-title{ width: 195px !important; height: 230px !important; padding: 60px 40px 0 60px !important; font-size: 12px !important; line-height: 14px !important; }
	.ei-title .quote, .ei-title .quote-second  { font-size: 120px !important; line-height: 120px !important; }
	.ei-title h2 { font-size: 14px !important; line-height: 17px !important; }
	.ei-title h3 { font-size: 12px !important; line-height: 12px !important; }
	#ei-slider .ei-slider-large li img { width: 400px !important; height: 238px !important; margin: 25px 0 0 -105px !important;}	
}