/*  
	-------------------------------------------------------------
	Cascade Style Sheet - jQuery Timeline slider
	Description: jQuery Plugin for building web timelines
	Author: pezflash - http: //www.codecanyon.net/user/pezflash
	Version: 1.0
	-------------------------------------------------------------
*/ 
@font-face {
    font-family: 'Bebas Neue';
    src: url('bebasneue-webfont.eot');
    src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('bebasneue-webfont.woff2') format('woff2'),
         url('bebasneue-webfont.woff') format('woff'),
         url('bebasneue-webfont.ttf') format('truetype'),
         url('bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
	font-family: 'Myriad Arabic';
	src: url('MyriadArabic-Regular.eot');
	src: local('☺'), url('MyriadArabic-Regular.woff') format('woff'), url('MyriadArabic-Regular.ttf') format('truetype'), url('MyriadArabic-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('MyriadPro-Regular.eot');
	src: local('☺'), url('MyriadPro-Regular.woff') format('woff'), url('MyriadPro-Regular.ttf') format('truetype'), url('MyriadPro-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Myriad Arabic';
	src: url('MyriadPro-Semibold.eot');
	src: local('☺'), url('MyriadPro-Semibold.woff') format('woff'), url('MyriadPro-Semibold.ttf') format('truetype'), url('MyriadPro-Semibold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}

/* ------------------ Global ------------------ */
html, body {
	height: 100%;
}

* {
	-webkit-font-smoothing: antialiased;
}

body {
	/*background: url(../images/watermark.jpg) transparent  no-repeat center bottom/ cover;*/
	background-image:url(../images/watermark.jpg);
	font: 13px 'Bebas Neue', sans-serif;
	margin: 0;
	min-width: 1200px;
}
/*body.nobg {
	background: url(../images/swiretimeline-bg.jpg) #0c2c84  no-repeat center top/auto 630px;
}*/

strong {
	font-weight: 700;
}

img {
	border: 0px;
}

.ie a {
	text-decoration: none;
	outline: 0;
}

.header {
	display: block;
	background-color: #e3e1df;
	width: 100%;
	height: 80px;
	position: relative;
	z-index: 100;
}
.header-logo {
	vertical-align: middle;
	margin-right: 20px;
}
.container {
	position: absolute;
	top: 80px;
	left: 0;
	visibility: hidden;
}

.intro-container {
	position: absolute;
	top: 0px;
	left: 0;
	min-height: 100%;
	min-width:1200px;
	background: url(intro-bg.jpg) no-repeat left top / cover;
	z-index: 0;
}
#timeline_container
{
	min-width:1200px;
}
.scrollbar
{
	min-width:1120px;
}
h2.intro {
	font-family: "Myriad Arabic", sans-serif;
	font-weight: normal;
	color: #fff;
	width: 70%;
	display: block;
	padding-left: 30px;
	padding-top: 100px;
}
.no-touch h2.intro {
	padding-top: 200px;
}
.swipe-intro {
	position: absolute;
	right: 30px;
	top: 350px;
}

.shadow {
	position: absolute;
	top: 454px;
	left: -5px;
}

.preload {
	position: absolute;
	top: 220px;
	left: 450px;
}





/* ----------------- Timeline ----------------- */

/* -- Global -- */
#timeline_container {
	position:relative;
/* 	border:1px solid #bbb; */
	opacity: 0;
}

#timeline {
	/* set your own css here, if needed */
}

#timeline .hidden {
	display: none;
}
/* -- End Global -- */



/* -- Viewport -- */
#timeline .viewport {
	overflow: hidden;
	position: relative;
	background: url(../images/background.jpg) no-repeat 0 0;
}

#timeline .viewport .images {
	position: absolute;
	padding: 0px;
	margin: 0px;
}

#timeline .viewport .images img{
	float: left;
}
/* -- End Viewport -- */



/* -- Milestones -- */
#timeline .milestones {
	overflow: hidden;
	position: relative;
	border-top: 4px solid #002E4D;
}

#timeline .milestones .content {
	position: absolute;
	padding: 0px;
	margin: 0px;
	height: 100%;
	font-size: 0;
}

#timeline .column_first, #timeline .column.era {
/* 	float: left; */
	padding: 0px 0px 0px 0px;
	margin: 0 0px 0px 0px;
	display: inline-block;
	vertical-align: top;
}

#timeline .column {
/* 	float: left; */
	padding: 0px 0px 0px 0px;
	margin: 0 0px 0px 0;
	height: 500px;
/* 	border-left: 1px solid #ccc; */
	position: relative;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	
}
#timeline .column.h75override, #timeline .column.h75 {
	vertical-align: bottom;
}
#timeline .column .full {
	height: 100%;
}
#timeline .column .half {
	height: 250px;
	position: relative;
}
#timeline .column.h75override .half {
	height: 376px;
}
#timeline .column.h75override .half .text-content {
	padding-left: 20px;
}
.no-touch #timeline .column > .c400.trigger:not(.noHover):hover:after {
	display: block;
	content: '';
	border: 3px solid #808080;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 494px;
	width: 426px;
}
.no-touch #timeline .column > .c400.trigger.half:hover:after {
	height: 244px;
}
.no-touch #timeline .column > .c400.trigger.half:last-child:hover:after {
	height: 245px;
	top: -1px;
}
.no-touch #timeline .column.h75 > .c400.trigger:hover:after, .no-touch #timeline .column.h75override > .c400.trigger:hover:after {
	height: 370px !important;
}
.breakout-bg {
	background: url(parchment-bg.jpg) no-repeat left top / cover;
}
.breakout-bg.new {
	background: url(breakoutbg-new.jpg) no-repeat left top / cover;
	background: url(parchment-bg.jpg) no-repeat left top / cover;
}

/*.breakout-bg.new:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(bottom-right-corner.png) no-repeat right bottom / 130px auto;
}*/

#timeline .column.h100 {
	
}

#timeline .column.h50 {
	height: 248px;
}
#timeline .column.h75, #timeline .column.h75override {
	height:376px;
}
#timeline .column > div > * {
	z-index: 1;
	position: relative;
}
#timeline .column > div > img {
	max-width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}

#timeline .c100 { width: 100px; }
#timeline .c125 { width: 125px; }
#timeline .c150 { width: 150px; }
#timeline .c175 { width: 175px; }
#timeline .c200 { width: 200px; }
#timeline .c225 { width: 225px; }
#timeline .c250 { width: 250px; }
#timeline .c275 { width: 275px; }
#timeline .c300 { width: 300px; }
#timeline .c325 { width: 325px; }
#timeline .c350 { width: 350px; }
#timeline .c375 { width: 375px; }
#timeline .c400 { width: 432px; }

#timeline span {
	display: block;
}

#timeline .date {
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	color: #0096ff;

}

#timeline .txt {
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	color: #565656;
	margin: 8px 0px 0px 0px;
}

#timeline .thumb_description {
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	color: #6f6f6f;
	clear: left;
}

#timeline .thumb {
	margin: 14px 0px 0px 0px;
}

#timeline .video_rollover, #timeline .image_rollover {
	position:relative;
	float:left;
}

#timeline .video_rollover span, #timeline .image_rollover span {
	left: 0px;
	top: 0px;
	display: none;
	position: absolute;
}
#timeline .video_rollover span, #timeline .image_rollover span {
	background: url('../images/thumb_video_hover.png') no-repeat;
	width: 113px;
	height: 67px;
}

#timeline .image_rollover span {
	background: url('../images/thumb_image_hover.png') no-repeat;
	width: 113px;
	height: 67px;
}

#timeline .link {
	font-size: 12px;
	font-weight: 700;
}

#timeline .link a {
	color: #888;	
}
	
.no-touch #timeline .link a:hover {
	color: #0096ff;
	text-decoration: underline;
}

#timeline .big_link {
	font-size: 11px;
	font-weight: 700;
	margin: 10px 0px 0px 0px;
	padding: 1px 5px 2px 5px;
	float: left;
	background-color: #bbb;
}

#timeline .big_link a {
	color: #0096ff;	
	text-decoration: none;
}
	
.no-touch #timeline .big_link a:hover {
	color: #fff;
}

/* -- End Milestones -- */



/* -- Scrollbar -- */
#timeline .scrollbar{
/* 	background: transparent url(../images/scrollbar_background.png) repeat-x 0 0; */
	background: rgba(0,0,0,0.4);
	padding: 10px 20px 40px;
	border-radius: 8px;
	position: absolute;
	top: auto !important;
	margin: 0 20px;
}

#timeline .scrollbar .track {
	left: 0;
	position: relative;
}

#timeline .dragger {
	background: transparent url(../images/scrollbar_dragger.png) no-repeat 0 0;
	position: absolute;
	top: 5px;
	z-index: 20;
	width: 10px;
	background-size: 100% auto;
}

#timeline .mark {
	background: transparent url(../images/scrollbar_mark.png) no-repeat 0 0;
	cursor: pointer;
	height: 21px;
	width: 13px;
	left: 600px;
	position: absolute;
	display: none;
	opacity: 0;
}
/* -- End Scrollbar -- */



/* -- Miscellaneous -- */

#timeline .audio_player {
	position: absolute;
	top: 1px;
	right: 7px;
}
/* -- End Miscellaneous -- */
#timeline .text-content {
	padding-left: 20px;
	width: 210px;
	padding-right: 202px;
}
#timeline .text-content-full {
	padding: 0 20px;
}
.nowrap {
	white-space: nowrap;
}
h2, h3, h4 {
	font-weight: normal;
}
h2 {
	font-size: 48px;
}
h3 {
	font-size: 32px;
	margin: 0;
	padding: 20px 0 10px;
	color: #808285;
}
h4, p {
	font-family: "Myriad Arabic", sans-serif;
	font-size: 20px;
	color: #1d3f6e;
	margin: 0 0 0.5em;
	line-height: 20px;
}
h4 {
	font-size: 24px;
}
h4.bold {
	font-size: 18px;
}
h4.bold.unbold {
	font-weight: normal;
	font-size: 24px;
}
.locale_zh h4.bold.unbold {
	font-size: 18px;
}
#timeline .h100 .half:last-child .text-content, #timeline .h100 .half:last-child .text-content-full {
	padding-left: 40px;
}
#timeline .h100 .full h3 {
	font-size: 48px;
	color: #1d3f6e;
}


/* #timeline .h75 .full h3 added to match 100 size but not colour */

#timeline .h75 .full h3 {
	font-size: 48px;
}

/* #timeline .h75 .full h4 added to match 100 size */

#timeline .h100 .full h4, #timeline .h100 .full p {
	font-size: 24px;
	line-height: 24px;
}

#timeline .h75 .full .text-content-full p {
	font-size: 22px;
	line-height: 22px;
}

#timeline .h75 .full .text-content-full h4 {
	font-size: 18px;
}

#timeline .era h2 {
	background-color: #002E4D;
	color: #fff;
	margin: 0;
	padding: 40px 20px 80px;
}

#timeline .era h2 {
	padding-bottom: 368px;
}

#timeline .era h2 span {
	font-size: 36px;
}
.reset-timeline {
	color: inherit;
	text-decoration: none;
}
h1 {
	font-size: 50px;
	font-weight: normal;
	margin: 0;
	line-height: 80px;
	height: 80px;
	padding-left: 20px;
	color: #1d3f6e;
	-webkit-font-smoothing: antialiased;
	float: left;
}
.header h2 {
	font-family: "Myriad Arabic", sans-serif;
	font-size: 20px;
	font-weight: bold;
	margin: 0;
	float: left;
	width: 370px;
	color: #1d3f6e;
	margin-left: 20px;
	margin-top: 18px;
}
h1 .red {
	color: #de4344;
}
.marks {
	position: relative;
	top: 18px;
	left: 40px;
	max-width: 100%;
	font-size: 0;
}
.markers {
	display: inline-block;
	font-family: "Myriad Arabic", sans-serif;
	height: 10px;
	position: relative;
}
.markers a {
	color: #fff;
	text-decoration: none;
	position: absolute;
	display: block;
	width: 95%;
	padding-top: 14px;
	padding-right: 5%;
	font-size: 16px;
	line-height: 13px;
}
.markers .year {
	position: absolute;
	top: -15px;
	color: #fff;
	font-size: 16px;
}
.trigger {
    cursor: url('/css/magnify.cur'), auto;
}

.modal .trigger {
	cursor: auto;
}

/******** MODAL STUFF *******/
#cboxContent {
	background-color: transparent;
}
.modal {
	background-color: #fff;
	float: left;
}
.images-holder {
	position: relative;
}
.image-item {
	display: none;
	margin-left: 20px;
	margin-top: 5px;
}
.image-item.active {
	display: block;
}
.image-item img {
	max-width: 100%;
	margin-bottom: 5px;
	width: 100%;
	height: auto;
	margin-top: 40px;
}
.image-item span.caption {
	display: block;
	font-family: "Myriad Arabic", sans-serif;
	font-weight: bold;
	color: #1d3f6e;
	font-size: 16px;
	line-height: 17px;
	min-height: 38px;
	max-width: 100%;
}
span.caption.video-caption {
	display: block;
	font-family: "Myriad Arabic", sans-serif;
	font-weight: bold;
	color: #1d3f6e;
	font-size: 16px;
	line-height: 17px;
	min-height: 38px;
	max-width: 100%;
	margin-top: 5px;
	margin-left: 20px;
}
.prev-image, .next-image {
	position: absolute;
	top: 14px;
	right: 15px;
	width: 25px;
	height: 25px;
	display: block;
	text-indent: -9999px;
	background: url(next-image.png) no-repeat;
}
.prev-image.inactive, .next-image.inactive {
	display: none;
}
.prev-image {
	right: 60px;
	background: url(prev-image.png) no-repeat;
}
.col-sm-6 {
	width: 50%;
	float: left;
	box-sizing: border-box;
}

.modal-header {
	height: 120px;
	padding: 0 30px;
	background-color: #18385f;
	display: block;
}
.modal-header h2 {
	margin: 0;
	font-size: 42px;
	font-weight: normal;
	color: #fff;
	padding: 20px 0 10px;
}
.modal-header h2 span {
	padding-left: 15px;
	font-size: 36px;
}
.tag {
	display: inline-block;
	font-family: "Myriad Arabic", sans-serif;
	color: #fff;
	font-size: 16px;
	margin-right: 15px;
	background-color: #e33e2d;
	padding: 3px 20px 2px;
	border: 2px solid #fff;
}
.modal-body {
	display: block;
	clear: both;
	float: left;
/* 	height: 476px; */
/* 	height: 487px; */
	height: 498px;
	width: 100%;
}
.modal {
	width: 100%;
}
.old .modal-body {
	height: 405px;
}
.new .modal-body {
	height: 385px;
}
.modal-body p {
	font-size: 24px;
	line-height: 24px;
}
.modal-text {
/* 	padding: 15px 20px 0; */
	padding: 45px 20px 0;
}
body:not(.locale_zh) .modal-text .chinese {
	font-size: 18px;
	line-height: 24px;
	display: inline-block;
	vertical-align: middle;
}
.modal-text.no-arrows {
	padding-top: 45px;
}
.modal-footer {
	display: block;
	width: 100%;
	background-color: #1d3f6e;
	clear: both;
	height: 40px;
	margin-top: 6px;
	float: left;
	position: relative;
}
.breakout-right {
	float: right;
	width: 94px;
	position: relative;
}
.breakout-right .breakout {
	top: -7px;
	right: 27px;
}
.breakout-right a {
	color: #5e461f;
}
.breakout-right .fa {
	font-size: 30px;
}
.breakout-right .fa-chevron-right {
	float: right;
}
.breakout-right .fa-chevron-left {
	margin-right: 49px;
}
.modal-footer .prev, .modal-footer .next {
	position: absolute;
	bottom: 5px;
	left: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 24px;
	display: block;
	padding-left: 40px;
	color: #fff;
	text-decoration: none;
	background: url(prev-arrow.png) no-repeat;
}
.modal-footer .next {
	right: 20px;
	left: auto;
	padding-left: 0;
	padding-right: 40px;
	background: url(next-arrow.png) no-repeat right center;
}


.breakout {
	display: block;
	width: 40px;
	height: 40px;
	background: url(pen-icon.png) no-repeat center center / contain;
	position: absolute;
	top: 25px;
	right: 40px;
	z-index: 50;
}
.full .breakout {
	top: 21px;
	right: 36px;
	border-radius: 24px;
}
.no-touch .full .breakout:hover {
	border: 4px solid #808080;
	top: 17px;
	right: 32px;
}
.modal-header .breakout {
	top: 20px;
	right: 70px;
	width: 140px;
	height: 35px;
	background: url(inside-story.png) no-repeat center center / contain;
	padding: 17px 13px 0 60px;
	text-align: center;
	font-family: "Myriad Arabic",sans-serif;
	color: #1d3f6e;
	text-decoration:none;
	font-size: 18px;
}
.modal-header .breakout:before {
	content:"Inside Story";
}
.locale_zh .modal-header .breakout{
	font-size: 13px;
	font-family: "Microsoft YaHei",微软雅黑,"STHeiti",华文黑体,sans-serif;
}
.locale_zh .modal-header .breakout:before {
	content:"小故事";
}

#cboxClose {
	position: absolute;
	top: 15px;
	right: 20px;
	color: #fff;
	width: 29px;
	height: 29px;
	background: url(close-white.png) no-repeat;
	display: block;
	text-indent:-9999px;
}

.modal.breakout-box {
	background:url(breakout-bg.png) no-repeat left top / contain;
	padding: 20px 60px 0;
	box-sizing: border-box;
	min-height: 100%;
}
.modal.breakout-box.old {
	margin-top: 50px;
}
.modal.breakout-box.new {
	margin-top: 20px;
}
.modal.breakout-box.new {
	background:url(breakout-new-bg.png) no-repeat left top / contain;
	padding:52px 40px 0 110px;
}
.modal.breakout-box .modal-header, .modal.breakout-box .modal-footer {
	background-color: transparent;
}
.modal.breakout-box .modal-header {
	padding-left: 15px;
	height: 60px;
	padding-right: 15px;
	padding-top: 20px;
}
.breakout-box h2 {
	display: inline-block;
	padding-top: 0;
}
.breakout-box h2, .breakout-box p, .breakout-box .modal-footer .prev, .breakout-box .modal-footer .next, .breakout-box .image-item span {
	color: #5e461f;
}
.new .breakout-box h2, .new .breakout-box p, .new .breakout-box .modal-footer .prev, .new .breakout-box .modal-footer .next, .new .breakout-box .image-item span, .new span.caption.video-caption {
	color: #6d6f71;
}
.video-holder {
	position: relative;
	height: 100%;
}
.new span.caption.video-caption {
	position: absolute;
	margin-left: 0;
	left: 0;
	bottom: 0;
}
.breakout-box .modal-footer .prev {
	background: url(prev-brown.png) no-repeat;
}
.breakout-box .modal-footer .next {
	background: url(next-brown.png) no-repeat right top;
}
.new .breakout-box .modal-footer .prev {
	background: url(prev-grey.png) no-repeat;
}
.new .breakout-box .modal-footer .next {
	background: url(next-grey.png) no-repeat right top;
}
.old #cboxClose {
	background: url(close-brown.png) no-repeat;
	top: 80px;
	right: 80px;
}
.new #cboxClose {
	background: url(close-grey.png) no-repeat;
	top: 90px;
	right: 60px;
}

.modal.breakout-box .tags {
	margin-top: -5px;
}

.breakout-box .modal-text {
	margin-top: 35px;
	padding-top: 0;
	max-height: 345px;
	overflow-y: auto;
}

.breakout-box.chinese .modal-text p {
	font-family: "Myriad Pro", sans-serif;
	font-size: 18px;
}
.breakout-box.chinese .modal-header h2 span.chinese {
	font-size: 30px;
	vertical-align: middle;
}

.breakout-box .image-item span {
	width: 100%;
}
.tipsy-inner {
	font-family: "Myriad Arabic", sans-serif;
	color: #333;
	font-weight: normal;
	font-size: 16px;
	background-color: rgb(116, 75, 38);
	color: #fff;
}
.tipsy-arrow {
	color: rgb(116, 75, 38);
}
.bold {
	font-weight: bold;
}
#timeline .h100 .full h4.bold, #timeline .h100 .full p.bold {
	font-size: 18px;
}
.top-right {
	float: right;
}
.lang-switcher {
	float: left;
	width: auto;
	display: block;
	margin-right: 20px;
	line-height: 80px;
	font-size: 18px;
	font-family: "MyriadPro", "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
	color: #1d3f6e;
}
.lang-switcher a {
	color: inherit;
	text-decoration: none;
	color: #1d3f6e;
}
.lang-switcher .chinese {
	font-size: 16px;
}

.inside-story {
	background: url(inside-story.png) no-repeat right top;
	display: block;
	float: left;
	width: 140px;
	height: 35px;
	padding-top: 17px;
	margin-top: 13px;
	margin-right: 13px;
	color: #1d3f6e;
	font-size: 18px;
	text-align: right;
	padding-right: 13px;
	font-family: "Myriad Arabic", sans-serif;
}

.filter-industry  {
	float: left;
	width: 175px;
	height: 51px;
	position: relative;
	margin-right: 10px;
}

.filter-industry .sod_select {
	background: url(industry-filter.png) no-repeat left top / contain;
	display: block;
	float: left;
	/*text-indent: -9999px;*/
	width: 175px;
	height: 40px;
	margin-top: 24px;
}

.filter-industry, .filter-industry .sod_select {
	outline: none !important;
	box-shadow: none !important;
}

.sod_select .sod_option {
	font-family: "Myriad Arabic", sans-serif;
	text-transform: none;
	white-space: normal;
	font-size: 18px;
	font-weight: normal !important;
}

form {
	float: left;
}
.form-wrapper {
	background: url(search-bg.png) no-repeat left top / contain;
	display: block;
	float: left;
	text-indent: -9999px;
	width: 198px;
	height: 32px;
	margin-top: 24px;
	margin-right: 20px;
	position: relative;
}
.form-wrapper .search {
	position: absolute;
	background-color: transparent;
	top: 5px;
    left: 5px;
    border: none;
    height: 19px;
    line-height: 20px;
    color: #1d3f6e;
    padding-left: 10px;
    padding-bottom: 2px;
    padding-right: 5px;
    font-family: "Myriad Arabic", sans-serif;
    font-size: 18px;
    width: 150px;
}
.fake-search-button {
	position: absolute;
	right: 0;
	top: 0;
	height: 32px;
	width: 32px;
}
.form-wrapper .search::-webkit-input-placeholder {
   color: #1d3f6e;
}
.form-wrapper .search:-moz-placeholder { /* Firefox 18- */
   color: #1d3f6e;  
}
.form-wrapper .search::-moz-placeholder {  /* Firefox 19+ */
   color: #1d3f6e;  
}
.form-wrapper .search:-ms-input-placeholder {  
   color: #1d3f6e;  
}

.video-holder {
	display: none;
}
.video-holder.active {
	display: block;
}
#cboxContent, #cboxWrapper, #colorbox {
	overflow: visible;
}
.tabs {
	display: block;
	position: absolute;
	top: 0;
	left: -70px;
}

.tabs a {
	height: 70px;
	width: 70px;
	display: block;
	background-color: #c5c4c4;
}

.tabs a.active {
	background-color: #18385f;
}

.tabs .photos {
	background-image: url(camera-blue.png);
}

.tabs .video {
	background-image: url(video-blue.png);
}

.tabs .photos.active {
	background-image: url(camera-white.png);
}

.tabs .video.active {
	background-image: url(video-white.png);
}

.video-holder iframe {
	max-width: 100%;
}

#noresults p {
	padding: 200px 0;
	text-align: center;
}

.clearable.x:after {
	content: "&#120";
	position: absolute;
	top: 0;
	right: 30px;
}

.clearable{
  background: transparent url(../images/times.png) no-repeat right -30px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: 150px 5px; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */


.caption.moveup {
	margin-top: -25px;
}

.hide {
	display: none !important;
}
#cboxLoadedContent {
	position: relative;
	overflow: visible !important;
}

#cboxLoadingGraphic, #cboxLoadingOverlay {
	display: none !important;
}

body.locale_zh, body.locale_zh h2.intro, .locale_zh h4, .locale_zh p, .locale_zh .image-item span.caption, .locale_zh .markers a {
	font-family: "MyriadPro", "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
}
.locale_zh .tag {
	font-family: "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
}
body.locale_zh p {
	font-family: "MyriadPro", "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
	font-size: 16px;
	line-height: 22px;
}
body.locale_zh .modal-text p {
	font-size: 18px;
	line-height: 26px;
}
body.locale_zh h3, body.locale_zh .era h2, body.locale_zh h2, .locale_zh .modal-footer a {
	font-family: "Bebas Neue", "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
}

.locale_zh #timeline .h100 .full p {
	font-size: 16px;
	line-height: 22px;
}
.locale_zh #timeline .h100 .full h4 {
	font-size: 18px;
	line-height: 24px;
}
.locale_zh h4 {
	font-size: 18px;
	line-height: 24px;
}
.locale_zh #timeline .h75 .full .text-content-full p {
	font-size: 16px;
	line-height: 22px;
}
.locale_zh .markers a, .locale_zh .tipsy-inner {
	font-size: 12px;
}
.locale_zh h2.intro {
	font-size: 36px;
	line-height: 54px;
	padding-top: 180px;
}
.no-touch .locale_zh h2.intro {
	padding-top: 230px;
}
.locale_zh h1 {
	position: relative;
	font-size: 40px;
	line-height:70px;
}
.locale_zh.mac h1 {
	line-height:80px;
}
.locale_zh .sod_select .sod_option, .locale_zh .sod_select .sod_label, .locale_zh .inside-story {
	font-size: 13px;
	line-height: 13px;
	font-family: "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
}
.locale_zh .inside-story {
	text-align: center;
	padding-left: 60px;
	width: 67px;
	padding-top: 19px;
}
.locale_zh .sod_select .sod_label {
	line-height: 25px;
}
.locale_zh .tag {
	font-size: 14px;
	line-height: 14px;
	padding: 4px 20px 4px;
}
.locale_zh .form-wrapper .search {
	font-family: "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
	font-size: 13px;
	line-height: 13px;
/* 	height: auto; */
	vertical-align: middle;
	top: 3px;
}
.no-touch .intro .dot, .no-touch h2 .dot, .android h2 .dot, .android .intro .dot {
	top: -9px;
	left: 0;
	padding: 0 !important;
}

.dot {
	display: inline-block !important;
	position: relative;
}

.column p .dot, .modal-text .dot, .caption .dot, h4 .dot {
	top: -4px;
	left: 0px;
}

.locale_zh .caption, .locale_zh .image-item span.caption {
	/*
	font-size: 14px;
	line-height: 18px;
	*/
}

/** chinese specific overrides **/

.locale_zh .modal-header h2 span {
	font-size: 32px;
	line-height: 34px;
	display: inline-block;
	vertical-align: middle;
}

#timeline .era h2 span.chinese {
	display: inline-block;
	font-size: 38px;
	vertical-align: middle;
}

.locale_zh .our-journey-wrapper {
	position: relative;
	top: 4px;
	font-weight: bold;
}

#portrait {
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 1000;
	text-align: center;
	margin: 0 auto;
	font-family: "MyriadPro", sans-serif;
}

#portrait h2 {
	width: 80%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 300px;
	font-size: 80px;
}

.locale_zh #portrait {
	font-family: "Microsoft YaHei", 微软雅黑, "STHeiti", 华文黑体, sans-serif;
}

#portrait {
	display: none;
}

@media (orientation: portrait) {
	#portrait {
		display: block;
	}
}

@media (orientation: landscape) {
	html {
		min-height: 100%;
	}
}
.intro-container {
	overflow-y: hidden;
}
@media only screen and (max-device-width: 740px){
	body {
		overflow-y: hidden;
	}
} 
.old #cboxLoadedContent {
	height: 585px !important;
}