/****************
    - Reset -
****************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0; 
	padding:0; 
	border:0; 
	outline:0;
	font-size:100%; 
	vertical-align:baseline; 
	background:transparent;
}

* {
	-webkit-user-select:none;
	 -khtml-user-select:none;
	   -moz-user-select:none;
		 -o-user-select:none;
}

*:focus {
	outline:0;
}

/*************************
    - Basic settings -
*************************/
html {
	overflow-x:hidden;
	padding:0 !important;
	margin:0 !important;
}

ol, ul {  
	list-style:none; 
}

a {	
	text-decoration:none;
}

body {
	font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:14px;
	line-height:22px;
	color:#333;
	background:#F1F1F1 //url(../images/preview/bg/bg.png) repeat top left;
}

.clearfix:after {
	content:"."; 
	visibility:hidden;
	display:block; 
	clear:both; 
	height:0; 
	font-size:0;
}

.clear {	
	clear:both;
}

.space10 {
	width:100%;
	height:10px;
}

.space15 {	
	width:100%;
	height:15px;
}

.space20 {	
	width:100%;
	height:20px;
}

.space30 {	
	width:100%;
	height:30px;
}

.space40 {	
	width:100%;
	height:40px;
}

/*****************
    - Header -
*****************/
header {
	display:block; 
	clear:both; 
	width:100%;
	background-color:#333; 
	border-top:3px solid #ff9000;		
}

header .container {
	clear:both;
	max-width:1170px; 
	height:36px;
	margin:0 auto;
	padding:2000px;
}

header .container .left {	
	float:left; 
}

header .container .right {	
	float:right;
}

/***************
    - Logo -
***************/
header .logo {
	clear:both;
	width:200px;
	height:22px;
}

header .slogan {
	clear:both;
	font-size:11px;
	color:#999;
}

/*********************
    - Navigation -
*********************/
header nav {
	position:relative;
	padding-top:10px;
}

header nav ul {
	display:block;
}

header nav ul li {
	float:left;
	left:0;
	display:block;
	margin:0 auto;
	padding-top:1px;
	cursor:pointer;
	list-style:none;
	font-size:14px;
	line-height:14px;
	font-weight:800;
	text-align:center;
	text-transform:uppercase;
}

header nav ul li a {
	height:100%;
	padding:0px 15px;
	display:block;
	text-align:center;
	cursor:pointer;
	color:#a7a7a7;	
}

header nav ul li a:last-child {
	padding-right:0;	
}

header nav ul li a {
	-webkit-transition:color .2s linear;
	   -moz-transition:color .2s linear;
			transition:color .2s linear;
}

header nav ul li.active a, header nav ul li a:hover {
	color:#FFF;	
}

/***********************
    - Configurator -
***********************/
.configurator {	
	max-width:1170px; 
	margin:auto; 
	padding:0px 20px;
}

.configurator table {
	padding:0;
	margin:0;	
}

.configurator table tr {		
	width:100%; 
	color:#ec5923; 
	font-weight:800; 
	font-size:18px;
	line-height:39px;
	white-space:nowrap;
}

.configurator table td:first-child {	
	padding-right:10px;
}

.configurator table td.divider {		
	width:100%; 
	height:10px; 
	background:url(../images/preview/bg/divider.png) repeat-x left 18px;
}

.one_third {	
	width:32%;
	margin-right:2%; 
	float:left;
}
	
.one_third.last {	
	margin-right:0;
}

.configurator .conftitle {	
	color:#000; 
	font-weight:800; 
	font-size:13px;
}

.configurator .conftitle span {	
	font-size:10px; 
	font-weight:500; 
	color:#999;
}

.configurator .selecter	{	
	position:relative; 
	min-width:200px; 
	max-width:380px; 
	margin-top:5px;
}

.configurator select {	
	min-width:200px; 
	max-width:380px;  
	width:100%; 
	opacity:0; 
	cursor:pointer; 
	background:#fff; 
	height:30px; 
}

.configurator .dropdown	{	
	min-width:200px;
	max-width:380px;
	width:100%;
	height:27px;
	position:absolute;
	top:0px;
	left:0px;
	background-color:#fff;
	border:1px solid #CCC;
	-webkit-border-radius:5px; 
	   -moz-border-radius:5px;
			border-radius:5px; 
}

.configurator .dropcontent {	
	line-height:30px;
	padding:0px 20px;
	font-size:12px;
	color:#404040;
	float:left;
}

.configurator .dropbutton {	
	width:23px;
	height:23px; 
	background:url(../images/preview/bg/dropdown.png) no-repeat;
	float:right;
	margin-right:2px;
	margin-top:2px;
}

.configurator .selecter:hover .dropbutton { 
	background-position:bottom;
}

.configurator .radio-img {
	float:left;
	cursor:pointer;
	background-color:#fff;
	border:3px solid #888;
	margin-right:5px;
	margin-bottom:5px;		
}

.configurator .radio-img-selected {
	border:3px solid #333;
}

.configurator .radio-img:last-child {
	margin-right:0px;	
}

.configurator ul li	{			
	background:url(../images/preview/tick.gif) no-repeat 0px 4px; 
	padding-left:45px;
	font-size:13px; 
	line-height:16px;
	padding-left:20px;
	color:#404040;
	margin-bottom:10px;
}

.cross_platform {
	width:100%;
	text-align:center;	
}

/*****************
    - Footer -
*****************/
footer {
	display:block; 
	clear:both; 
	position:relative; 
	width:100%;
	color:#999;
	background-color:#232323;
	text-align:center;
}

footer .container {
	clear:both;
	max-width:1170px; 
	margin:0 auto;
	padding:20px;	
}

footer span.copyright {
    color:#777;
    margin-top:0;
    margin-bottom:0;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
    line-height:19px;
    font-weight:400;
}

footer span.copyright a {
	color:#ec5923;
	-webkit-transition:all .3s ease;
	   -moz-transition:all .3s ease;
			transition:all .3s ease;
}
	
footer span.copyright a:hover, 
footer span.copyright a:active, 
footer span.copyright a:focus {
	color:#fff; 
}

footer .social {
	display:block;
	clear:both;
	cursor:default;
	line-height:1;
	margin-top:10px;
	text-align:center;
}

footer .social a {
	padding:0 5px;
}

footer .social a i.fa {
	font-size:16px;
	color:#999;
	-webkit-transition:all .3s ease;
	   -moz-transition:all .3s ease;
			transition:all .3s ease;
}

footer .social a:hover i.fa {
	color:#fff;
}

/**************************
    - iPhone checkbox -
**************************/
.iPhoneCheckContainer {
	position:relative;
	height:27px;
	cursor:pointer;
	overflow:hidden;
}

.iPhoneCheckContainer input {
	position:absolute;
	top:5px;
	left:30px;
	opacity:0; 	
}

.iPhoneCheckContainer label {
	white-space:nowrap;
	font-size:14px;
	line-height:17px;
	font-weight:600;
	text-transform:uppercase;
	cursor:pointer;
	display:block;
	height:27px;
	position:absolute;
	width:auto;
	top:0;
	overflow:hidden;
}

.iPhoneCheckContainer, .iPhoneCheckContainer label {
	user-select:none;
	-moz-user-select:none;
	-khtml-user-select:none;
}

.iPhoneCheckDisabled {
	opacity:0.5;
}

label.iPhoneCheckLabelOn {
	color:white;
	background:url('../images/preview/iphone-style-checkboxes/on.png') no-repeat;
	text-shadow:0px 0px 2px rgba(0, 0, 0, 0.6);
	left:0;
	padding-top:5px;
	width:30px;
}

label.iPhoneCheckLabelOn span {
	padding-left:8px;
}

label.iPhoneCheckLabelOff {
	color:#8b8b8b;
	background:url('../images/preview/iphone-style-checkboxes/off.png') no-repeat right 0;
	text-shadow:0px 0px 2px rgba(255, 255, 255, 0.6);
	text-align:right;
	right:0;
	padding-top:5px;
	width:25px;
}

label.iPhoneCheckLabelOff span {
	padding-right:8px;
}

.iPhoneCheckHandle {
	display:block;
	height:27px;
	cursor:pointer;
	position:absolute;
	top:0;
	left:0;
	width:0;
	background:url('../images/preview/iphone-style-checkboxes/slider_left.png') no-repeat;
	padding-left:3px;
}

.iPhoneCheckHandleRight {
	height:100%;
	width:100%;
	padding-right:3px;
	background:url('../images/preview/iphone-style-checkboxes/slider_right.png') no-repeat right 0;
}

.iPhoneCheckHandleCenter {
	height:100%;
	width:100%;
	background:url('../images/preview/iphone-style-checkboxes/slider_center.png');
}

/*********************
    - Responsive -
*********************/
@media only screen and (min-width:0px) and (max-width:767px) {
	header .container {
		height:67px;	
	}
	
	header .container .left {
		clear:both;
	}
	
	header .container .right {
		float:none;
		clear:both;		
		margin:0;
	}
	
	header nav ul li {
		font-size:12px;
		line-height:14px;
	}
	
	header nav ul li a {
		padding:0px 8px;
	}
	
	header nav ul li:first-child a {
		padding-left:0px;
	}
	
	header nav ul li:last-child a {
		padding-right:0px;
	}
	
	.one_third { 
		float:none; 
		clear:both;
		width:100%;
	}
}

@media only screen and (min-width:480px) and (max-width:767px) {
	.cross_platform img {
		width:400px;
		height:59px;
	}
}

@media only screen and (min-width:0px) and (max-width:479px) {
	.cross_platform img {
		width:300px;
		height:44px;
	}
}