/*------- Created by BinaryNights LLC. - All rights reserved. -------*/


/*------- Main Page -------*/


html, body, img, div, span, p, h1, h2, h3, h4 { margin:0; padding:0; border:0; font-size: 100%; }

body
{
	background: #ffffff;
	overflow-x: hidden;
	font-family: "HelveticaNeueRegular", Helvetica, sans-serif;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0px;
	word-spacing: 1px;
	color: #777777;
	margin: 0;
	padding: 0;
	min-width: 800px;
}

#page 
{ 
	width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
}

#page 
{ 
	width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
}

#header 
{
	width: 100%; 
	height: auto; 
	padding-top: 20px; 
	padding-bottom: 20px; 
	border-bottom: 1px solid #e5e5e5; 
	margin-bottom: 80px; 
}

#header #logo
{ 
	width: 220px; 
	height: 30px; 
	margin: 0 auto; 
	background: url("../images/main_logo.png") center top no-repeat; 
}

#content
{
	width: 800px;
	margin: 0 auto;
}

a
{
	color: #40bbf4;
	text-decoration: none;
	-webkit-transition: 0.3s;
   	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

a:hover
{
	color: #ffa200;
	text-decoration: underline;
}


h1, h2, h3, h4
{
	margin-top: 0;
	color: #333333;
	letter-spacing: 1px;
	-webkit-font-smoothing:antialiased;
	font-weight: normal;
}

h2
{
	font-size: 52px;
	text-align: center;
}

h3
{
	font-size: 36px;
	line-height: 48px;
	margin-bottom: 40px;
}

h4
{
	font-size: 26px;
	line-height: 34px;
}

p
{
	color: #555555;
	line-height: 22px;
	font-size: 16px;
	word-spacing: 1px;
	letter-spacing: 0px;
}

::selection{
	background: #40bbf4;
	color: #ffffff;
}

#content #products #locko .buttons .colorbutton, #content #products #forklift .buttons .colorbutton
{
	width: 180px;
	height: 50px;
	border-radius: 10px;
	color: #ffffff;
	text-decoration: none;
	line-height: 50px;
	font-size: 18px;
	-webkit-transition: 0.3s;
   	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

#content #products #locko .buttons a, #content #products #forklift .buttons a
{
	 text-decoration: none;
}

#footer
{
	border-top: 1px solid #e5e5e5;
	width: 100%;
	height: 100%;
	text-align: center;
	margin-top: 80px;
	position:relative;
	display: inline-block;
}

#footer .copyright
{
	font-size: 14px;
	color: #aaaaaa;
	padding: 26px 0;
	word-spacing: 0px;
}


/*------- Main Page -------*/


#content #products
{
	width: 800px;
	float: left;
	margin-top: 0;
}

#content #products #locko, #content #products #forklift
{
	float: left;
	width: 380px;
}

#content #products #locko p, #content #products #forklift p
{
	height: 110px;
}

#content #products #forklift
{
	margin-left: 40px;
}

#content #products #locko h1 a, #content #products #forklift h1 a
{
	font-size: 72px;
	text-align: center;
	letter-spacing: 2px;
	line-height: 64px;
	margin-bottom: 0;
}

#content #products #locko h1 a
{
	color: #40bbf4;
	text-decoration: none;
}

#content #products #forklift h1 a
{
	color: #eab822;
	text-decoration: none;
}

#content #products #locko h2, #content #products #forklift h2
{
	color: #aaaaaa;
	font-size: 18px;
	margin-top: 0;
	letter-spacing: 0px;
}

#content #products #locko .icon, #content #products #forklift .icon
{
	width: 350px;
	height: 314px;
	margin-top: 50px;
}

#content #products #locko .icon
{
	background: url("../images/main_icon-locko.png");
}

#content #products #locko .icon .badge
{
	background: url("../images/sale-badge.png");
	width: 150px;
	height: 150px;
	float: left;
	margin: 16px 0 0 2px;
}

#content #products #forklift .icon
{
	background: url("../images/main_icon-forklift.png");
}

#content #products #locko p, #content #products #forklift p
{
	word-spacing: 1px;
	width: 350px;
	margin-top: 40px;
	height: 110px;
}

#content #products #locko .buttons, #content #products #forklift .buttons
{
	margin-top: 30px;
	width: 180px;
	height: 50px;
}

#content #products #locko .buttons .colorbutton
{
	background: #63a6e3;
}

#content #products #forklift .buttons .colorbutton
{
	background: #eab822;
}

#content #products #locko .buttons .colorbutton:hover
{
	background: #92c1eb;
}

#content #products #forklift .buttons .colorbutton:hover
{
	background: #f0cd64;
}


/*------- Retina Support -------*/


@media 
(-webkit-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25),
(min--moz-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) 
{
    
    #header #logo
	{
		height: 30px;
		width: 220px;
		background: #ffffff url("../images/main_logo@2x.png") center top no-repeat;
		background-size: 100%;
	}
		
	#content #products #locko .icon
	{
		width: 350px;
		height: 314px;
		background: url("../images/main_icon-locko@2x.png");
		background-size: 100%;
	}
	
	#content #products #forklift .icon
	{
		width: 350px;
		height: 314px;
		background: url("../images/main_icon-forklift@2x.png");
		background-size: 100%;
	}
	
	#content #products #locko .icon .badge
	{
		background: url("../images/sale-badge@2x.png");
		width: 150px;
		height: 150px;
		background-size: 100%;
	}

}

/*------- Mobile Layout -------*/


@media only screen and (max-width: 640px) and (orientation: portrait)
{

	body
	{
		min-width: 100%;
	}
	
	#header
	{
		margin-bottom: 60px;
	}
  
	#content
	{
		width: 100%;
	}
	#content #products #locko .buttons .colorbutton, #content #products #forklift .buttons .colorbutton,
	#content #top #topright .buttons .buy, #content #top #topright .buttons .download,
	#buttons .download
	{
		width: 90%;
	}
	
	#separator2
	{
		width: 100%;
		border-top: 1px solid #e5e5e5;
		display: inline-block;
		margin: 60px 0;
	} 
	
	#footer
	{
		width: 100%;
		margin-top: 60px;
	}
	
	#content #products
	{
		width: 100%;
	}
	
	#content #products #locko, #content #products #forklift
	{
		width: 100%;
	}
	
	#content #products #locko p, #content #products #forklift p
	{
		height: auto;
	}
	
	#content #products #forklift
	{
		margin-left: 0;
	}
	
	#content #products #locko p, #content #products #forklift p
	{
		width: 90%;
	}
	
	#content #products #locko .buttons, #content #products #forklift .buttons
	{
		width: 100%;
	}
    
}