@import url('http://fonts.googleapis.com/css?family=Lato');

/* @group Reset */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input {margin: 0; padding: 0;}

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size: 1em; font-weight: normal; font-style: normal;}

ul,ol {list-style: none;}

fieldset,img {border: none;}

caption,th {text-align: left;}

table {border-collapse: collapse; border-spacing: 0; margin-bottom: 18px;}

.clear {clear: both; display: block; height: 0; overflow: hidden; width: 0;}

.clearfix { *zoom: 1;}

.clearfix:before,.clearfix:after {  display: table;  content: "";  line-height: 0;}

.clearfix:after {  clear: both;}

:focus{outline:0}

/* @group General */

body {font: 14px/1.5em Arial, sans-serif; background-color: #fff; color: #000;}

a {color: #c7c7c7;}

a:hover {color: #000;text-decoration: none;}

strong, b {font-weight: bold;}

em, i {font-style: italic;}

sup {padding-left: 1px; font-size: 10px !important; font-weight: normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; color: #777; _position: static !important;}

abbr {border: 0;}

p {margin-bottom: 18px;}

h1 {font-weight: bold; font-size: 20px; line-height: 1.2em; margin-bottom: 18px;}

h2 {font-weight: bold; font-size: 16px; line-height: 1.2em; margin-bottom: 12px;}

h3 {font-weight: bold; font-size: 14px; line-height: 1.2em; margin-bottom: 8px;}

h4,h5,h6 {font-weight: bold; font-size: 1em; line-height: 16px; margin-bottom: 8px;}

blockquote {margin: 1.5em 0; padding: 18px 18px 0; color: #333; border:1px solid #ccc; background-color: #fff;}

hr {border: 0 none #ddd; clear: both; height: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #fff; margin: 18px 0;}

pre, code {font-family: Courier, "Courier New", monospace; font-size: 12px; color: #666;}

pre {margin: 0 0 1em 0; padding: 0 0 0.5em 0; white-space: pre-wrap;}

dl {margin-bottom: 18px;}

.hide {display: none;}

.error-hint { color: red; }

/* iPhone */

@media screen and (max-device-width: 480px) {

html {-webkit-text-size-adjust: none;}

}



/* @group Content */

#wrapper, body {

	font: 14px/1.5em Arial,Tahoma,sans-serif;

	background: transparent url('../images/bg.png') repeat-x scroll 0 0;

	color: #222222;

}

h1, h2, h3, h4, h5, h6, h7 {margin:0; padding:0; text-align:left; font-weight:bold; color:#000; line-height:1.5em}

h1{font-size:20pt; margin:0}

h2{font-size:18pt}

h3{font-size:16pt}

h4{font-size:12pt; letter-spacing:0}

h5, h6, h7{font-size:12pt; letter-spacing:0}

input, textarea {

	font: 14px/1.5em Arial,Tahoma,sans-serif;

}

ul, ol {margin: 0 0 1.625em 2.5em;}

ul {list-style: square;}

ol {list-style-type: decimal;}

ol ol {list-style: upper-alpha;}

ol ol ol {list-style: lower-roman;}

ol ol ol ol {list-style: lower-alpha;}

ul ul, ol ol, ul ol, ol ul {margin-bottom: 0;}



lable.error {

	color: red;

}

input.error {

	background-color:#FFEBE8;

	border-color:#CC0000;

	border-style:solid;

	border-width:1px;

}



/*@font-face {

	font-family: 'Lato';

	src: url('../fonts/Lato-Regular.eot');

	src: local('☺'), url('../fonts/Lato-Regular.woff') format('woff'), url('../fonts/Lato-Regular.ttf') format('truetype'), url('../fonts/Lato-Regular.svg') format('svg');

	font-weight: normal;

	font-style: normal;

}*/

@font-face {

	font-family: 'Bender';

	src: url('../fonts/Bender.eot');

	src: local('☺'), url('../fonts/Bender.woff') format('woff'), url('../fonts/Bender.ttf') format('truetype'), url('../fonts/Bender.svg') format('svg');

	font-weight: normal;

	font-style: normal;

}

@font-face {

	font-family: 'BrandonGrotesque-Bold';

	src: url('../fonts/BrandonGrotesque-Bold.eot');

	src: local('☺'), url('../fonts/BrandonGrotesque-Bold.woff') format('woff'), url('../fonts/BrandonGrotesque-Bold.ttf') format('truetype'), url('../fonts/BrandonGrotesque-Bold.svg') format('svg');

	font-weight: normal;

	font-style: normal;

}

@font-face {

	font-family: 'BrandonGrotesque-MediumItalic';

	src: url('../fonts/BrandonGrotesque-MediumItalic.eot');

	src: local('☺'), url('../fonts/BrandonGrotesque-MediumItalic.woff') format('woff'), url('../fonts/BrandonGrotesque-MediumItalic.ttf') format('truetype'), url('../fonts/BrandonGrotesque-MediumItalic.svg') format('svg');

	font-weight: normal;

	font-style: normal;

}











body {

	background: #616161;

	font-family: 'Lato';

}



#background-wrap {

	position: absolute;

	width: 100%;

	height: 3000px;

	z-index: -10

}

.bg-page {

	background-color: transparent;

	/*background-image: url('../images/bg-ontrack.png') ;*/

	background-attachment: fixed;

	background-repeat: no-repeat;

	background-position: center top;

	position: absolute;

	width: 100%;

	height: 3500px;

}

.bg-page.home {

	background-image: url('../images/bg-home.jpg');

}

.bg-page.ontrack {

	background-image: url('../images/bg-ontrack.jpg');

}

.bg-page.ontrend {

	background-image: url('../images/bg-ontrend.jpg');

}

.bg-page.onpace {

	background-image: url('../images/bg-onpace.jpg');

}

.bg-page.ongoing {

	background-image: url('../images/bg-ongoing.jpg');

}



.bg-cover {

	background-color: transparent;

	/*background: url('../images/bg-ontrack-cover.png');*/

	background-attachment: fixed;

	background-repeat: no-repeat;

	background-position: center top;



	position: absolute;

	width: 100%;

	height: 3500px;

}

.bg-page.home .bg-cover {

	background-image: url('../images/bg-home-cover.png');

}

.bg-page.ontrack .bg-cover {

	background-image: url('../images/bg-ontrack-cover.png');

}

.bg-page.ontrend .bg-cover {

	background-image: url('../images/bg-ontrend-cover.png');

}

.bg-page.onpace .bg-cover {

	background-image: url('../images/bg-onpace-cover.png');

}

.bg-page.ongoing .bg-cover {

	background-image: url('../images/bg-ongoing-cover.png');

}



#logo {

	background: transparent url('../images/logo.png') no-repeat scroll center center;

	width: 308px;

	height: 17px;

	position: absolute;

	top: 40px;

	left: 150px;

	cursor: pointer;

}

#main {

	width: 1000px;

	min-height: 2000px;

	position: relative;

	margin: 0 auto;

	color: #fff;

	min-height: 500px;

}

.left-title  {

	position: absolute;

}

.left-title>div>div {

	position: relative;

	opacity: 0;

}

.left-title-1 {

/*	left: 8px;

	top: 40px;*/

	position: fixed;

	margin-top: 40px;

	margin-left: 8px;

}

.left-title-2 {

/*	top: 70px;

	left: 40px;*/

	position: fixed;

	margin-top: 70px;

	margin-left: 40px;

}

.left-title-2.on {

	background: transparent url('../images/text-on.png') no-repeat scroll;

	background-position: -83px 15px;

	width: 83px;

	height: 540px;

}



nav {

	left: 165px;

	position: absolute;

	top: 75px;

	width: 532px;

	font-family: 'Bender';

	z-index: 200;

}

nav ul {

	list-style: none;

	margin: 10px 0 0 0;

	padding: 0;

}

nav ul li {

	float: left;

}

nav ul li:nth-child(1) {

	width: 120px;

	margin-left: -15px;

}

nav ul li:nth-child(2) {

	width: 130px;

}

nav ul li:nth-child(3) {

	width: 140px;

}

nav ul li:nth-child(4) {

	width: 125px;

}

nav ul li:nth-child(5) {

	margin-right: -40px;

}



nav ul li a {

	text-decoration: none;

	text-transform: uppercase;

}

nav ul li a:hover, nav ul li.active a {

	color: #eea73f;

}

#nav-prev {

	position: absolute;

	cursor: pointer;

	left: -33px;

	top: -2px;

}

#nav-next {

	position: absolute;

	cursor: pointer;

	right: -33px;

	top: -2px;

}



#content {

	position: absolute;

	top: 150px;

	left: 132px;

	width: 614px;

	z-index: 300;

}

#content  .article {

	margin-right: 42px;

}

#content .home .thumb {

	padding-left: 18px;

	z-index: 100;

	position: relative;

}

#content .home .thumb img {

	border-radius: 10px;

}



#content .ontrack .thumb {

	padding-left: 18px;

	z-index: 100;

	position: relative;

}

#content .ontrack .thumb img {

	border-radius: 10px;

}

#content .ontrack .cover {

	position: absolute;

	top: 200px;

	z-index: 200;

}

#content .ontrack .article {

	z-index: 300;

	position: relative;

}

#content .ontrack .icon {

	margin-top: 20px;

	margin-bottom: 15px;

	margin-left: 25px;

}

#content .ontrack .profile {

	padding-top: 15px;

}

#content .ontrack .name {

	margin-bottom: 0px;

	font-size: 12px;

	color: #bb9754;

	font-family: 'BrandonGrotesque-Bold';

	text-transform: uppercase;

}

#content .ontrack .job {

	font-size: 11px;

	color: #ffffff;

	font-family: 'Lato';

}



#content .ontrend .thumb {

	padding-left: 18px;

	z-index: 100;

	position: relative;

	opacity: 0;

}

#content .ontrend .thumb img {

	border-radius: 10px;

}

#content .ontrend .cover {

	position: absolute;

	top: 100px;

	z-index: 200;

	opacity: 0;

}

#content .ontrend .article {

	z-index: 300;

	position: relative;

}

#content .ontrend .icon {

	margin-top: 20px;

	margin-bottom: 15px;

	margin-left: 25px;

}

#content .ontrend .profile {

	padding-top: 40px;

	float: right;

}

#content .ontrend .name {

	margin-bottom: 0px;

	font-size: 12px;

	color: #bb9754;

	font-family: 'BrandonGrotesque-Bold';

	text-transform: uppercase;

}

#content .ontrend .job {

	font-size: 11px;

	color: #ffffff;

	font-family: 'Lato';

}



#content .onpace .thumb {

	padding-left: 18px;

	z-index: 100;

	position: relative;

	opacity: 0;

}

#content .onpace .thumb img {

	border-radius: 10px;

}

#content .onpace .cover-up {

	position: absolute;

	width: 641px;

	height: 1616px;

	background: transparent url('../images/bg-onpace-cover-2.png') no-repeat scroll 0 0;

	left: -144px;

	top: 800px;

}

#content .onpace .cover {

	position: absolute;

	top: 100px;

	z-index: 200;

	opacity: 0;

}

#content .onpace .article {

	z-index: 300;

	position: relative;

}

#content .onpace .icon {

	margin-top: 20px;

	margin-bottom: 15px;

	margin-left: 25px;

}

#content .onpace .profile {

	padding-top: 15px;

}

#content .onpace .name {

	margin-bottom: 0px;

	font-size: 12px;

	color: #bb9754;

	font-family: 'BrandonGrotesque-Bold';

	text-transform: uppercase;

}

#content .onpace .job {

	font-size: 11px;

	color: #ffffff;

	font-family: 'Lato';

}







#content .ongoing .icon {

	margin-top: 20px;

	margin-bottom: 15px;

	margin-left: 25px;

}

#content .ongoing .profile {

}

#content .ongoing .name {

	margin-bottom: 0px;

	font-size: 12px;

	color: #bb9754;

	font-family: 'BrandonGrotesque-Bold';

	text-transform: uppercase;

}

#content .ongoing .job {

	font-size: 11px;

	color: #ffffff;

	font-family: 'Lato';

}







.indent-1 {

	margin-left: 100px;

	font-size: 18px;

}

.indent-2 {

	margin-left: 150px;

	font-size: 14px;

}

.indent-3 {

	margin-left: 240px;

	font-size: 14px;

}

.indent-4 {

	margin-left: 240px;

	font-size: 18px;

}

.indent-5 {

	margin-left: 100px;

	font-size: 14px;

}

.title-1 {

	margin-bottom: 8px;

	font-size: 21px;

	color: #bb9754;

	text-transform: uppercase;

	font-family: 'BrandonGrotesque-Bold';

}

.title-2 {

	margin-bottom: 8px;

	font-size: 21px;

	color: #bb9754;

	font-family: 'BrandonGrotesque-Bold';

}

.bullet-1 {

	background: transparent url('../images/bullet-1.png') no-repeat scroll left 7px;

	padding-left: 20px;

	margin-left: 65px;

	width: 230px;

}

.bullet-1 p {

	margin-bottom: 11px;

}

.bullet-2 {

	background: transparent url('../images/bullet-2.png') no-repeat scroll left 7px;

	padding-left: 20px;

	margin-left: 65px;

	width: 240px;

}

.bullet-2 p {

	margin-bottom: 11px;

}





.col {

	float: left;



}

.half {

	width: 48%;

	margin-right: 2%;

}

.col.last {

	margin-right: 0;

}







#right {

	width: 256px;

	height: 1024px;

	background: transparent url('../images/bg-right-sidebar.png') no-repeat scroll left bottom;

	position: absolute;

	right: 0;

}

#right .sidebar {

	background: #363636;

	height: 504px;

	padding-top: 230px;

}

.timeline {

	-webkit-touch-callout: none;

	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

}

.timeline .indicator {

	background: transparent url('../images/arrow-orange.png') no-repeat scroll left center;

	color: #eea73f;

	font-family: 'Bender';

	font-size: 9px;

	padding-left: 15px;

}

.timeline .thumb img {

	margin-bottom: 8px;

}

.timeline .thumb img {

	border-radius: 6px;

}

.timeline .caption {

	font-family: 'BrandonGrotesque-MediumItalic';

	color: #fff;

	font-size: 16px;

	text-transform: uppercase;

}

.timeline .shadow {

	width: 256px;

	height: 250px;

	position: absolute;

	z-index: 99;

	background: transparent url('../images/slide-shadow.png') repeat-y scroll center center;

}

.timeline .jcarousel-next {

	z-index: 100;

}

.timeline .jcarousel-prev {

	z-index: 101;

}

.timeline .last {

	padding-right: 88px;

}



#timeline-text {

	margin: 0;

	padding: 0;

	list-style: none;

}

#timeline-text li {

	font-size: 12px;

	color: #fcb040;

	font-family: 'Lato';

	padding: 25px 25px 25px 25px;

}

#timeline-slider {

	margin: 0 auto;

	width: 205px;

	cursor: pointer;

	height: 15px;

}

#timeline-slider-wrap {

	background: transparent url('../images/nav-bar-right.png') no-repeat 50% 50%;

	height: 15px;

	width: 205px;

	margin-left: 25px;

	margin-top: 10px;

}





#mw {

	width: 380px;

	overflow: hidden;

	position: absolute;

	/*z-index: 100;*/

	 left: -100px;

}

#mw .content {

	background: #232126 url('../images/bg-mw.jpg') no-repeat scroll left top;

	border-left: 24px solid #616161;

	position: relative;

	margin-left: 24px;

	left: 332px;

}

#mw .board {

	padding: 10px 10px 50px 20px;

	color: #fff;

}

#mw .btn {

	position: absolute;

	left: -52px;

	padding-right: 22px;

}

#mw .btn:hover {

	cursor: pointer;

}

#mw .download {

	background: transparent url('../images/sep-download.png') no-repeat scroll center bottom;

	padding-bottom: 15px;

	margin-bottom: 15px;

	padding-top: 15px;

}

#mw .download ul {

	margin: 0;

	padding: 10px 10px 10px 20px;

	list-style: none;

}

#mw .download ul li {

	padding-bottom: 10px;

}

#mw .download ul li a, #mw .download ul li a:hover {

	font-family: 'BrandonGrotesque-Bold';

	font-size: 13px;

	color: #eea73f;

	text-transform: uppercase;

	text-decoration: none;

}

#mw .downlaod-1 {

	background: transparent url('../images/icon-download-1.png') no-repeat scroll left 3px;

	padding-left: 20px;

}

#mw .downlaod-2 {

	background: transparent url('../images/icon-download-2.png') no-repeat scroll left 3px;

	padding-left: 20px;

}

#mw .title {

	font-family: 'Bender';

	font-size: 27px;

	margin-top: 35px;

}

#mw .title.first {

	margin-top: 15px;

}

#mw .name, #mw .address {

	font-family: 'BrandonGrotesque-MediumItalic';

	font-size: 15px;

	text-transform: uppercase;

	line-height: 1.1em;

	color: #C7C7C7;

}

#mw .name span {

	font-family: 'Lato';

	font-size: 11px;

	display: block;

	text-transform: none;

	color: #fff;

}

#mw .address span {

	text-transform: none;

	display: block;

	margin-top: 5px;

	color: #fff;

}









[data-retina=complete] {

    -webkit-background-size: 100%;

    background-size:100%;

}