/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #000;
    text-shadow: none;
}

::selection {
    background: #000;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


.top {
    background: #000 none repeat scroll 0 0;
    height: 28px;
    position: fixed;
    width: 100%;
    z-index: 2;
}
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0 0 0 -20%;
    background: #FF6444;
    color: #fff;
    padding: 0.2em 0;
    position: relative;
    z-index: 20;
    left:40%;
    width: 60%;
    font-family: 'droid_serif', Arial, Helvetica, sans-serif;
    padding: 20px 10px 10px 10px;
    text-align: center;
}
.chromeframe a{
	text-decoration: underline !important;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */   
 .mobile {display:none }  
 .mobile_video {display: none;}

/*WEB FONTS*/
@font-face {
    font-family: 'droid_sans';
    src: url('../fonts/DroidSans-webfont.eot');
    src: url('../fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DroidSans-webfont.woff') format('woff'),
         url('../fonts/DroidSans-webfont.ttf') format('truetype'),
         url('../fonts/DroidSans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



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

}

@font-face {
    font-family: 'droid_serif';
    src: url('../fonts/DroidSerif-Bold-webfont.eot');
    src: url('../fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DroidSerif-Bold-webfont.woff') format('woff'),
         url('../fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
         url('../fonts/DroidSerif-Bold-webfont.svg#droid_serifbold') format('svg');
    font-weight: bold;
    font-style: normal;

}

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

@font-face {
    font-family: 'droid_serif';
    src: url('../fonts/DroidSerif-BoldItalic-webfont.eot');
    src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/DroidSerif-BoldItalic-webfont.svg#droid_serifbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

/*
@font-face {
	font-family: 'franchise';
	src: url('../fonts/Franchise-Bold.eot');
	src: local('☺'), 
	url('../fonts/Franchise-Bold.woff') format('woff'), 
	url('../fonts/Franchise-Bold.ttf') format('truetype'), 
	url('../fonts/Franchise-Bold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}*/

/*
@font-face {
 	font-family: 'franchise';
    src: url('../fonts/franchise-bold-webfont3.eot');
 	src: local('☺'), 
		 url('../fonts/franchise-bold-webfont3.woff') format('woff'), 
		 url('../fonts/franchise-bold-webfont3.ttf') format('truetype'), 
		 url('../fonts/franchise-bold-webfont3.svg#webfontdI5uohOI') format('svg');
	font-weight: bold;
 	font-style: normal;
}
*/

/*for icon font*/
@font-face {
	font-family: 'icons';
	src:url('../fonts/icomoon4.eot');
	src:url('../fonts/icomoon4.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon4.woff') format('woff'),
		url('../fonts/icomoon4.ttf') format('truetype'),
		url('../fonts/icomoon4.svg#icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

[data-icon]:before {
	font-family: 'icons';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}



/*GLOBAL ELEMENTS*/
html, body {
	height: 100%;
}

body {
	line-height: 1.2;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	background:#000;
	
	/*hide scrollbars*/
	overflow: hidden;
}

a,
a:link,
a:active,
a:visited {	
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	/* font-family: 'franchise'; */
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;	
}

/*iOS*/
textarea, input { outline: none; }

nav ul,
nav ol,
nav dl {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a.playtrigger {
	color: #000;
    font-size: 14px;
}

/*MAIN CONTAINER*/
#main {
	height: 100%;

	/*only have this because we animate the main panel when we move to linked in*/
	position: absolute;
	top: 28px;
	left: 0;
	width: 100%;
}

/*HEADER  	height:240px;*/
#main > header {
	position: fixed;
	top: 0;
	right: -64px;
	width: 64px;
	height:180px;
	background: #c60b26;
	z-index: 5;
}

#main > header nav li {
	position: relative;
}

#main > header nav li.lang > a {
	font-size: 1.875em;
	/* font-family: 'franchise'; */
	text-transform: uppercase;
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
}

#main > header nav li.register .icon {
	font-size: 1.5em;
}

#main > header nav li.postcards .icon {
	font-size: 1.8em;
}

#main > header nav li.connection .icon {
	font-size: 1.9em;
}

#main > header nav li.next .icon {
	font-size: 1.9em;
}
#main > header nav li.back .icon {
	font-size: 1.9em;
}

#main > header nav li.next a {
	border-bottom: none;
	height: 60px;
}

#main > header nav a,
#main > header nav a:link,
#main > header nav a:active,
#main > header nav a:visited {	
	text-align: center;
	width: 65px;
	height: 59px;
	line-height: 59px;
	border-bottom: 1px solid #000;
	text-decoration: none;
	display: block;
	background: #000;
	color: #fff;
}

#main > header nav a:hover {
	background: #c60b26;
	color: #fff;
}

#main > header nav .label {
	font-size: 0.813em;
	background: #000;
	position: absolute;
	height: 60px;
	line-height: 60px;
	top: 0;
	right: 95px;
	font-weight: bold;
	padding: 0 30px 0 26px;
	white-space: nowrap;
	opacity: 0;
 	filter: alpha(opacity = 0);
	display: none;
	z-index: 3;
}

.touch #main > header nav .label {
	display: none !important;
}


/*language dropdown*/
#main > header nav ul ul {
	position: absolute;
	top: 0;
	right: 64px;
	z-index: 4;
	display: none;
}

#main > header nav ul ul a,
#main > header nav ul ul a:link,
#main > header nav ul ul a:active,
#main > header nav ul ul a:visited {
	text-align: left;
	width: 170px;
	border-bottom: none;
	font-weight: bold;
	padding-left: 15px;
	font-size: 0.813em;
	opacity: 0;
 	filter: alpha(opacity = 0);
	position: relative;
	right: 30px;
}

#main > header nav ul ul a span {
	font-size: 2.308em;
	text-transform: uppercase;
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
	/* font-family: 'franchise'; */
	margin-right: 20px;
}



/*FOOTER*/
#main > footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background:#c60b26 ;
	z-index: 5;
	text-align: center;
}

#main > footer #links {
	float: left;
	font-size: 0.750em;
	padding-left: 11px;
	text-transform: uppercase;
}

#links li {
	float: left;
	margin-right: 23px;
}

#links li a,
#links li a:link,
#links li a:active,
#links li a:visited {
	display: block;
	color: #fff;
	line-height: 30px;
}


#main > footer #nav {
	margin-top: 7px;
}

#main > footer #nav li {
	display: inline-block;
	line-height: 30px;
}

.lt-ie8 #main > footer #nav li {
	display: inline;
	zoom: 1;
}

#main > footer #nav li a {
	width: 32px;
	height: 14px;
	background: url(../img/sprite.png) no-repeat -100px -28px;
	display: block;
}

#main > footer #nav li.first a {
	width: 24px;
	background-position: -100px -14px;	
}

#main > footer #nav li.last a {
	width: 23px;
	background-position: -100px -56px;	
}

#main > footer #nav li a.active {
	background-position: -100px -42px;	
}

#main > footer #nav li.first a.active {
	width: 24px;
	background-position: -100px 0;	
}

#main > footer #nav li.last a.active {
	width: 23px;
	background-position: -100px -70px;	
}

#main > footer #social {
	float: right;
	margin: 0;
	padding: 0 6px 0 0;
	list-style-type: none;
	text-transform: uppercase;
}

#social li {
	float: left;
}

#social li a.close,
#social li a.close:link,
#social li a.close:active,
#social li a.close:visited,
#social h2 {
	display: none;
}

#social li a,
#social li a:link,
#social li a:active,
#social li a:visited {
	border-left: 1px solid #000;
	display: block;
	height: 30px;
	line-height: 30px;
	width: 35px;
	color: #000;
}

#social li a span {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

#social li a:hover {
	background: #000;
	border-color: #000;
	color:#fff;
	text-decoration: none;
}

/*play button*/
a.playbutton,
a.playbutton:link,
a.playbutton:active,
a.playbutton:visited,
a.playbutton:hover {	
	text-decoration: none;
	position: relative;
	height: 100px;
	line-height: 119px;
	width: 100px;
	display: inline-block;
	text-align: center;	
	background: url(../img/sprite.png) no-repeat 0 0;
}

a.playbutton .circle {
	color:#C60B26;
	font-size: 84px;
}

.lt-ie9 a.playbutton:hover .circle {
	color: #FF6444;
}

a.playbutton span.arrow {
	position: absolute;
	
	top: 20%;
	margin-left: -52px;
	
	margin-top: -23px;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 



a.playbutton,
a.playbutton:link, 
a.playbutton:active,
a.playbutton:visited, 
a.playbutton:hover {

	margin-left: 0;
}

a.playbutton:hover span.arrow{

	margin-left: 0;

}


}





a.playbutton,
a.playbutton:link,
a.playbutton:active,
a.playbutton:visited,
a.playbutton:hover {	
	text-decoration: none;
	position: relative;
	height: 100px;
	width: 100px;
	display: inline-block;
	text-align: center;	
	background: url(../img/sprite.png) no-repeat 0 0;
}
/*
a.playbutton span.circle {
	color: #983222;
	font-size: 84px;
	position: relative;	
	top: 8px;
}

.lt-ie9 a.playbutton:hover span.circle {
	color: #FF6444;
}

a.playbutton span.arrow {
	position: absolute;
	left: 50%;	
	top: 50%;
	margin-left: -6px;
	margin-top: -17px;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
}*/

.postplay {
	display: none;
}

/*CONTAINER FOR THE PAGES*/
#main > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 100%;
 	white-space: nowrap;

}

#main > ul li.page {
	height: 100%;
	width: 100%;
	display: inline-block;
	white-space: normal;

	overflow: hidden;
	position: relative;
	background-color: #000;
}

.lt-ie8 #main > ul li.page {
	display: inline;
	zoom: 1;
}



/*

li.centered {
	text-align: center;
}

li.centered:before {
  	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
  	margin-right: -0.25em;
}

li.centered > div {
  	display: inline-block;
  	vertical-align: middle;
}

.lt-ie8 li.centered > div {
	margin-top: 10%;
}
*/

li.centered .pagecontents {
	text-align: center;
}

li.centered .pagecontents:before {
  	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
  	margin-right: -0.25em;
}

li.centered .pagecontents > div {
  	display: inline-block;
  	vertical-align: middle;
  	width: 648px;
}

.lt-ie8 li.centered .pagecontents > div {
	margin-top: 10%;
}



/*background video*/
.page .pagecontents {
	width: 100%;
 	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/*half way marker, used for cehcking when the page becomes visible*/
.page .pagecontents .halfwaymarker {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 1px;
	width: 1px;
	z-index: 1;
	opacity: 0;
}

#page1 .trans {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: url(../img/spc.png) repeat;
	height: 100%;
	overflow: hidden;
}

.page .videobg {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: #fff;
	text-align: center;
	height: 100%;
	overflow: hidden;
	background-size: cover;
}

.page .videobg video {
	/*height: 98%;
	width: 100%;*/
	min-height: 100%;
	min-width: 100%;
	background-color: #fff;
}

/*video.js player*/
#videoWrapper {	
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	background: #000;
	display: none;
}

#videoWrapper .vjs-big-play-button {
	display: none;
}

.touch .video-js .vjs-tech {
    height: 90%;
    top: auto;
    bottom: 0;
}

a.close,
a.close:link,
a.close:active,
a.close:visited,
a.close:hover {	
	text-decoration: none;
	position: absolute;
	z-index: 3;
	top: 15px;
	right: 40px;
	height: 33px;
	width: 33px;
	display: block;
	background: url(../img/sprite.png) no-repeat -132px -40px;
}
           
.video-js {
	height: 100% !important;
	width: 100% !important;
}


.foreground {
	height: 100px;
	width: 200px;
	background: #fff;
	color: #000;
	margin: 100px auto;
}

.textpanel {
	background: #000;
	width: 247px;
	height: 100%;
	overflow-y:auto;
	padding: 15px;
}

.textpanel  p:last-child {

	 margin-bottom: 70px;


}

.textpanel .top {
	background: #333 none repeat scroll 0 0;
    margin-bottom: 40px;
    padding: 11px 15px 70px 13px;
    position: relative;
}

.textpanel .top .location-meta {
	color: #ccc;
	font-size: 0.813em;
	font-family: 'droid_sans';
	border-bottom: 2px solid #ccc;
	line-height: 25px;
	margin: 0;
}

.textpanel .top h2 {
	font-size: 2.125em;/* 3.500em *//*3.125em*/
	margin: 22px 0 0;
	line-height:1;/* .7 */
	text-transform: uppercase;
}

.textpanel .top .nubble {
	width: 19px;
	height: 39px;
	background: url(../img/sprite.png) no-repeat -165px -40px;
	position: absolute;
	top: 63px;
	right: -19px;
}

.textpanel .top .nubble span {
	display: none;
}

.textpanel > p {
	font-size: 0.813em;
	padding: 0 31px 0 12px;
	line-height: 1.55;
}

.infoicons {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin-left:247px;
}

.infoicon {
	width: 40px;
	height: 40px;
	line-height: 46px;
	position: absolute;
	text-align: center;
	cursor: pointer;
}

.infoicon .bg {
	width: 40px;
	height: 40px;	
	background: url(../img/sprite.png) no-repeat -132px 0;
	position: absolute;
	top: 0;
	left: 0;
}

.infoicon .circle {
	color:#C60B26;
	font-size: 28px;
}

.lt-ie9 .infoicon:hover .circle {
	color: #FF6444;
}

.infoicon .plus {
	color: #fff;
	position: absolute;
	width: 40px;
	height: 40px;
	top: 0;
	left: 0;
	background: url(../img/sprite.png) no-repeat -172px 0;
}

.infoicon .popup {	
	background: url(../img/sprite.png) no-repeat 224px -100px;
	width: 388px;
	line-height: 1.2;
	position: absolute;
	z-index: 3;
	right: -63px;
	top: -63px;
	display: none;
}

.infoicon .popup > a,
.infoicon .popup > a:link,
.infoicon .popup > a:active,
.infoicon .popup > a:visited,
.infoicon .popup > a:hover {	
	text-decoration: none;
	position: absolute;
	width: 30px;
	height: 21px;
	color: #fff;
	top: -30px;
	left: 0;
	background: #C60B26;
	padding-top: 9px;
	font-size: 0.750em;
}

.infoicon .popup > a span.close {
	display: none;
}

.infoicon .content {	
	background:#C60B26;
	width: 200px;
	padding: 12px 15px;
	text-align: center;
	min-height: 144px;
}

.infoicon .content h3 {
   border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 2em;
    margin: 0 0 18px;
}

.infoicon .content p {
	font-size: 0.9em;
    line-height: 1.2;
    margin:10px 0;
    text-align: left;
}

/*preloader*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
	text-align: center;
	line-height: 1;
	overflow: hidden;

	/*display: none;*//*temp*/
}

#preloader2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #C60B26;	
}

#preloader2:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em;
}

#preloader2 > div {
	display: inline-block;
  	vertical-align: middle;
}

/*fix for ie7*/
.lt-ie8 #preloader2 > div {
	margin-top: 10%;
}

#preloader h1 {
	color: #ff6444;
	font-size: 3.563em;
	margin: 0;
}

#preloader h2 {
	font-size: 8.938em;
	margin: 0;
}


.page.casestudy > div { padding-top: 20px; padding-left: 20px;}

/*preloader desktop aniimation*/
#socialtrigger {
	display: none;
}

.animation {
	height: 150px;

}

/****** PAGE SPECIFIC STYLES ******/

#main ul li#page1 {
	background: url(../img/page1bg.jpg);
	width: 100%;
	height:100%;
	background-size: cover;
}

/*for ipad, this fixes the background image on step 1 video*/
.touch #page1 .videobg {
	background: url(../img/page1bg.jpg);
	width: 100%;
		height:100%;

}
.touch #page1 .videobg video {
	display: none;
}

#page1 .pagecontents > div {
	width: 600px;
}

#page1 .block1,
#page1 .block2 {
	position: relative;
	opacity: 0;
	filter: alpha(opacity = 0);
}

#page1 .block1 {
	bottom: 50px;
}


#page1 .block2 {
	top: 50px;
}

#page1 h1 {
     font-size: 5.2em;
    line-height: 84%;
    margin: 75px 0 0;
    text-align: left;
}

#page1 .block1 .presenta {
    margin-left: 250px;
}

#page1 p {
	 font-size: 1em;
    line-height: 1.5em;
    margin-top: 5px;
    text-align: left;
}

#page1 .postplay p,
#page3 .postplay p,
#page6 .postplay p,
#page9 .postplay p,
#page11 .postplay p  {
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
	/* font-family: 'franchise'; */
	/* font-weight: bold; */
	font-size: 1.875em;
	text-tranform: uppercase;
}


#main .connection img {
    height: auto;
    max-height: 57px;
    width: 100%;
}

p a.button,
p a.button:link,
p a.button:active,
p a.button:visited,
p a.button:hover {	
	/* height: 37px;  */
	line-height: 37px; 
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px; 
	border-radius: 3px; 
	background-color: #C60B26; 
	-webkit-box-shadow: 0 3px #80281a; 
	-moz-box-shadow: 0 3px #80281a; 
	box-shadow: 0 3px #80281a;
	padding: 0 10px;
	font-size: 0.800em;
	text-decoration: none;
	display: inline-block;
}

.lt-ie8 p a.button {
	display: inline;
	zoom: 1;
}

/*page 2*/

#page2 {
	background-image: url("../img/carlos_1.jpg"); background-position: 10px center;
}

#page2 .infoicon.one {
	left: 30%;
	top: 30%;
}

#page2 .infoicon.two {
	left: 40%;
	top: 65%;	
}

#page2 .infoicon.three {
	left: 72%;
	top: 16%;		
}

#page2 .infoicon.four {
	left: 81%;
	top: 58%;		
}

/*page 3*/
.page.casestudy {
	background-repeat: no-repeat;
	background-position: center 0;
	background-size: cover;
	background-color:red;
}

.lt-ie9 .page.casestudy {
	background-position: center center;
}

.page.casestudy h2 {
	font-size: 7.813em;/* 8.875em */
	 margin: 0 20px 0 0;
	line-height: 1;
	text-transform: uppercase;
	float: left;
}

.page.casestudy p {
    font-size: 1em;
    font-weight: bold;
    margin-top: 0px;
    line-height: 1.750em;
}

.page.casestudy .playbutton {
    margin-left: 10px;
    margin-top: 10px;
}

.page.casestudy .postplay {
	margin-top:30px;
}

.page.casestudy .postplay p:nth-child(1) {
    margin-bottom: 5px;
    padding-bottom: 0;
    padding-top: 14px;
}

#page3 {
	
}
#page4 {

	background-image: url(../img/marcelo_1.jpg);
	 background-position: 10px center;
	
}

/*page 4*/
#page4 .infoicon.one {
	left: 30%;
	top: 30%;
}

#page4 .infoicon.two {
	left: 40%;
	top: 65%;	
}

#page4 .infoicon.three {
	left: 72%;
	top: 16%;		
}

#page4 .infoicon.four {
	left: 81%;
	top: 58%;		
}
/*page 5*/
#page5 .infoicon.one {
	left: 30%;
	top: 30%;
}

#page5 .infoicon.two {
    left: 75%;
    top: 40%;
}

#page5 .infoicon.three {
	left: 72%;
	top: 16%;		
}

#page5 .infoicon.four {
	left: 81%;
	top: 58%;		
}


/*page 6*/
#page6 {
	background-image: url(../img/valeyquique_1.jpg);
	background-position: center;
}

/*page 7*/
#page7 .infoicon.one {
	left: 30%;
	top: 30%;
}

#page7 .infoicon.two {
    left: 58%;
    top: 65%;
}
#page7 .infoicon.three {
	left: 72%;
	top: 16%;		
}

#page7 .infoicon.four {
	left: 81%;
	top: 58%;		
}

/*page 8*/
#page8 .infoicon.one {
	left: 30%;
	top: 30%;
}

#page8 .infoicon.two {
    left: 53%;
    top: 25%;
}

#page8 .infoicon.three {
	left: 72%;
	top: 16%;		
}

#page8 .infoicon.four {
	left: 81%;
	top: 58%;		
}
/*page 9*/
#page9 {
	
}

/*page 10*/
#page10 .infoicon.one {
	left: 30%;
	top: 30%;
}

#page10 .infoicon.two {
	left: 40%;
	top: 65%;	
}

#page10 .infoicon.three {
	left: 72%;
	top: 16%;		
}

#page10 .infoicon.four {
	left: 81%;
	top: 58%;		
}

/*page 11*/
#page11 {
	
}

/*page 12*/
#page12 .infoicon.one {
	left: 30%;
	top: 30%;
}

#page12 .infoicon.two {
	left: 40%;
	top: 65%;	
}

#page12 .infoicon.three {
	left: 72%;
	top: 16%;		
}

#page12 .infoicon.four {
	left: 81%;
	top: 58%;		
}
#main > ul li#registerform {
	background: #000;
}



/*register form*/
#registerform {
	max-width: 716px;
}

.registerform .top p
{
	 font-size: 0.9em!important;
}

.registerform h2, #videopostcards h2, #invite h2 {
    color: #fff;
    font-size: 2.5em;
    line-height: 0.9;
    margin: 0 0 26px;
    text-transform: uppercase;
}



.registerform .top, #videopostcards .top, #invite .top {
    background: #000 none repeat scroll 0 0;
    padding: 44px 21px 25px 85px;
    width: 26%;
}


#videopostcards .top p,
#invite .top p {
	font-size: 0.813em
}

.registerform form {
	padding: 0 30px;
}

.error .top > h2,
.error .top > p,
.registererror {
	display: none;
}

.error .registererror {
	display: block;
	min-height: 140px;
}

.registererror p {
	font-weight: bold;
	font-style: italic;
	color: #fff !important;
}

.registererror h2 {
	color: #ff6444 !important;
}

.registerform form p {
    font-size: 0.813em;
	margin: 20px 0;
}

.registerform form p a {
    text-decoration: underline;
}

form input.text {
	border: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 40px;
	line-height: 40px;
	color: #4b5254;
	font-family: 'droid_serif';
	margin-right: 30px;
	padding: 0 12px;
	box-shadow: none;
}

form input.text.error,
#invite form textarea.error {
	border: 3px solid #983222;
}

.customSelect,
.occuSelect { 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
	background: #fff url(../img/sprite.png) no-repeat right bottom;
	height: 40px;
	line-height: 40px;
	color: #4b5254;
	padding: 0 50px 0 11px;
	width: 221px;
	margin-bottom: 10px;
}

.occuSelect {
	width: 533px;
}

.customSelect.error,
.occuSelect.error {
	border: 3px solid #983222;
}

.customSelect.customSelectHover {
/* Styles for when the select box is hovered */
}

.customSelect.customSelectOpen {
/* Styles for when the select box is open */
}

.customSelect.customSelectFocus {
/* Styles for when the select box is in focus */
}

.customSelect.customSelectDisabledOption {
/* Styles for when the selected item is a disabled one */
}

.customSelect.customSelectDisabled {
/* Styles for when the select box itself is disabled */
}

.customSelectInner {
	width: 221px !important;
}

.registerform .asmHighlight {
	display: none !important;
}

.registerform .asmList {
	margin: 0;
}

.registerform .asmListItem {
	width: auto;
	display: inline-block !important;
	background: #6694AE;
	height: 30px;
	line-height: 30px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 0 30px 0 12px;
	border: none;
	margin: 10px 15px 10px 0;
}

.registerform .asmListItem:hover {
	background: #6694AE;
}

.registerform .asmListItemLabel {
	padding: 0;
}

.registerform .asmListItemRemove {
	width: 10px;
	height: 9px;
	background: url(../img/sprite.png) no-repeat -123px -73px;
	overflow: hidden;
	text-indent: 100px;
	top: 11px;
	right: 8px;
	padding: 0;
}

.registerform p.row2,
.registerform p.row3 {
	margin: 10px 0;
}

.registerform p.row4 {
	width: 500px;
}

.registerform .styledCheckbox {
	float: left;
	margin-right: 14px;
}

.registerform .styledCheckbox.error {
	border: 3px solid #983222;
}

form .submit {
	padding: 5px 11px;
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px; 
	border-radius: 3px; 
	background-color: #983222; 
	-webkit-box-shadow: 0 3px #80281a; 
	-moz-box-shadow: 0 3px #80281a; 
	box-shadow: 0 3px #80281a;
	border: none;
	color: #fff;
	font-size: 1.846em;
	/* font-family: 'franchise'; */
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
}

#registerform2 {
	position: fixed;
	top: 0;
	right: -717px;/*right: 64px;*/
	height: 100%;
	background: #000;
	z-index: 4;
	width:520px;
	display: none;
}

#registerform2 a.close,
#registerform2 a.close:link,
#registerform2 a.close:active,
#registerform2 a.close:visited,
#registerform2 a.close:hover {	
	top: 20px;
	right: 28px;
}

/*video postcards*/
#videopostcards {
	position: fixed;
	top: 0;
	right: -732px;

	height: 100%;
	background: red;
	z-index: 4;
	width: 732px;
	display: none;
}

#videopostcards ul {
	margin: 15px 0 15px 15px;
	padding: 0;
	list-style-type: none;
}

#videopostcards li {
	float: left;
	margin: 15px;
	font-size: 0.813em;
	width: 204px;
	min-height: 177px
}

#videopostcards .img {
	height: 120px;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-align: center;
}

#videopostcards .overlay {
	padding-top: 40px;
	height: 80px;
}

#videopostcards .overlay.played:hover {
	background: url(../img/sprite.png) no-repeat -296px 0;
}

/*smaller play buttons on postcards*/
#videopostcards a.playbutton, 
#videopostcards a.playbutton:link, 
#videopostcards a.playbutton:active, 
#videopostcards a.playbutton:visited, 
#videopostcards a.playbutton:hover {
    background-position: -132px 0;
    height: 40px;
    width: 40px;
    line-height: 47px;
}

#videopostcards a.playbutton .circle {
    font-size: 32px;
}

#videopostcards a.playbutton span.arrow {
    font-size: 16px;
    margin-left: -3px;
    margin-top: -3px;
}

#videopostcards .played a.playbutton, 
#videopostcards .played a.playbutton:link, 
#videopostcards .played a.playbutton:active, 
#videopostcards .played a.playbutton:visited, 
#videopostcards .played a.playbutton:hover {
	width: 35px;
	height: 35px;
	background-position: -184px -40px;	
}

#videopostcards .played .circle,
#videopostcards .played .arrow {
	display: none;
}

/* Indicator tooltip */
#indicatortooltip {
	background: #000;
	width: 42%;
	position: fixed;
	z-index: 3;
	border-bottom: 1px solid #000;
	left: 50%;
	bottom: 30px;
	padding: 5px 0;
	margin-left: -21%;
	text-align: center;
	display: none;
}

/*cookie warning*/
#cookiepolicy {
	background: #FF6444;
	width: 100%;
	position: fixed;
	z-index: 3;
	border-bottom: 1px solid #B7412C;
	left: 0;
	bottom: 30px;
	padding: 25px 0;
	display: none;
}

#cookiepolicy p {
	font-size: 0.813em;
	margin: 0 50px 0 13px;
}

#cookiepolicy p a,
#cookiepolicy p a:link,
#cookiepolicy p a:active,
#cookiepolicy p a:visited,
#cookiepolicy p a:hover {	
	text-decoration: underline;
}

#cookiepolicy a.close,
#cookiepolicy a.close:link,
#cookiepolicy a.close:active,
#cookiepolicy a.close:visited,
#cookiepolicy a.close:hover {	
	top: 15px;
	right: 15px;
}




/*legal popup*/
.legalslide {
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 6;
	background: red;
	left: 0;
	top: 0;
	display: none;
}

.legalslide .scrollbarwrap .viewport {
	height: 100%;
}

.legalslide .scrollbarwrap {
	height: 100%;
}

.legalslide .scrollbarwrap .overview {
	padding: 0 80px 0 95px;
}

.legalslide .scrollbarwrap .overview h2 {
	font-size: 3.125em
}

.legalslide .scrollbarwrap .overview p,
.legalslide .scrollbarwrap .overview li {
	font-size: 0.813em;
}

table.table {
	border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    margin: 0 -1px 24px 0;
    text-align: left;
    width: 100%;
}

table.table td {
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    padding: 6px 24px;
}

/*linkin panel*/
#linkedin {
	height: 100%;
	width: 100%;
	background:rgba(0, 0, 0, 0) url("../img/vinyl_gr.jpg") repeat scroll 0 0 / cover ;
	position: fixed;
	/*bottom: 100%;*/
	top: 0;
	left: 0;
	z-index: 6;
	text-align: center;
	display: none;
}

#linkedin:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

#linkedin #intro {
	background: #000;
	width: 430px;
	text-align: center;
	position: relative;
	min-height: 212px;
	margin-top: 196px;
	padding: 150px 20px 0 20px;

	display: inline-block;
  	vertical-align: middle;
	z-index: 8;

/*display: none;*/
}


#linkedin #intro h2 {
    color: #9c1d1d;
    font-size: 4.375em;
    line-height: 0.8;
    margin: 109px 0 0;
    text-transform: uppercase;
}
#globe {
	width: 344px;
	height: 342px;
	background: url(../img/linkedin.png) no-repeat 0 0;
	position: absolute;
	left: 0;
	top: -35px;
}

#linkedin #intro p,
#invite .top p,
#invite .right ul p {
	font-size: 0.813em;
	color: #92d0f3;
	margin: 1.2em 0;
	text-align: left;
}

#linkedin #intro p.italic,
#invite .top p.first,
#invite .right ul p.first {
	font-style: italic;
	color: #fff;
}

#linkedin #intro p a.button {
	font-size: 1.846em;
	/* font-family: 'franchise'; */
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
	/* font-weight: bold; */
	margin-top: 10px;
	padding: 0 22px;
}

#linkedin .closelinkedin {
	position: absolute;
	width: 100%;
	height: 43px;
	bottom: 0;
	left: 0%;
	/* margin-left: -15px; */
	background: #c60b26;
	font-size: 0.750em;
	line-height: 20px;
	z-index: 10;
}

#linkedin .closelinkedin p{
font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 1.500em;
	margin: 3px 0 0 0;
	padding: 0;
}

#linkedin .closelinkedin:hover {
	text-decoration: none;
}

#linkedin #intro.authenticated {
	background-color: transparent;
	min-height: 0;
}

#linkedin #intro #globe p a.button {
	margin-top: 0;
}

/*the grid, for when there's over x connections*/
#grid {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	display: none;
}

#grid .scrollbarwrap .viewport {
	height: 100%;
}

#grid .scrollbarwrap {
	height: 100%;
}

#grid ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#grid li {
	float: left;
	width: 80px;
	height: 80px;
	background-repeat: no-repeat;
	background-position: center center;
}

#grid li.active {
	border: 4px solid #345060;
	width: 72px;
	height: 72px;
}

#gridpopup {
	position: absolute;
	top: 0;
	left: 0;
	background: #345060;
	min-height: 80px;
	width: 136px;
	text-align: left;
	padding: 0 15px;
	display: none;
}

#gridpopup .left {
	display: none;
}

#gridpopup p {
	font-size: 0.813em;
}

#gridpopup p.name {
	font-style: italic;
	font-weight: bold;
}

#gridpopup p.title {
	color: #92d0f3;
}

#gridpopup a.remove,
#gridpopup a.remove:link,
#gridpopup a.remove:active,
#gridpopup a.remove:visited,
#gridpopup a.remove:hover {
	display: block;
	border-top: 1px solid #9BCFF6;
	font-family: "nimbus-sans-condensed",sans-serif;
	font-weight: 700;
	line-height: 25px;
	margin-top: 10px;
	font-size: 0.813em;
	display: none;
}

#gridpopup a.closebutton,
#gridpopup a.closebutton:link,
#gridpopup a.closebutton:active,
#gridpopup a.closebutton:visited,
#gridpopup a.closebutton:hover {
	width: 30px;
	height: 30px;
	background: #983222;
	color: #fff;
	line-height: 34px;
	text-align: center;
	position: absolute;
	top: 0;
	right: -30px;
	text-decoration: none;
	font-size: 0.750em;
}

#lightsout {
	display: none;	
}

/*styling for linkedin D3 force-directed graph*/

svg {
	position: absolute;
	top: 0;
	left: 0;	
}

.link {
  	stroke: #ccc;
}

.labels {
	display: none;
}

.labels.selected {
	display: block;
}

body.label {
	background-color: transparent;
	text-align: left;
	height: auto;
}

.label div {
	width: 104px;
	float: left;
	padding: 5px 10px 0 36px;
	min-height: 61px;
	background-color: #345060;
}

.label p {
	margin: 0 0 5px;
	font-size: 0.813em;
}

.label p.name {
    font-weight: bold;
    font-style: italic;
}

.label p.title {
	color: #92d0f3;
}

.label span.close {
	color: #92d0f3;
	display: block;
	height: 30px;
	width: 30px;
	background: #983222 url(../../img/sprite.png) no-repeat -246px -40px;
	float: right;
}

/*delete button to remove yourself*/
.label a,
.label a:link,
.label a:active,
.label a:visited,
.label a:hover {
	display: block;
	border-top: 1px solid #9BCFF6;
	font-family: "nimbus-sans-condensed",sans-serif;
	font-weight: 700;
	line-height: 25px;
	margin-top: 10px;
	font-size: 0.813em;
}


.activeimage {
	display: none;
}

.activeimage.selected {
	display: block;
}

/*LinkedIn invite*/
#invite {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:red;
	z-index: 9;
	text-align: left;
	display: none;
}

#invite .left,
#invite .right {
	width: 50%;
	float: left;
}

#invite .left .top {
	padding: 91px 10px 10px;
	background: #345060;
}

#invite .left .top p {
	margin: 1.5em 0;
}

#invite form {
	padding: 10px;
}

#invite form label {
	color: #383d3f;
	/*
font-family: 'franchise';
	font-weight: bold;
*/
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 2.308em;	
}

#invite form .text {
	height: 42px;
	line-height: 42px;
	padding: 0 1%;
	width: 98%;
	margin-right: 0;
	font-size: 0.813em;
}

#invite form textarea {
	height: 294px;
	padding: 3px 1%;
	width: 98%;
    border: none;
    border-radius: 3px;
    box-shadow: none;
    color: #4B5254;
    font-family: 'droid_serif';
	font-size: 0.813em;
}

#invite .submit {
	padding: 5px 19px;
}

#invite .button {
	display: none;
}

#invite form p.success {
	text-align: center;
	font-size: 2.308em;
	/*
font-family: 'franchise';
	font-weight: bold;
*/
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
	width: 220px;
	margin: 100px auto 0 auto;
}

#invite > .right {
	background: #383D3F;
}

#invite > .right.loading {
	background:#383D3F url(../img/loading.gif) no-repeat center center;
}


#invite .right .top {
	background: transparent;
}

#invite h3 {
	color: #4b5254;
	/* font-family: 'franchise'; */
	font-family: "nimbus-sans-condensed",sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 2.308em;
	margin: 0;
}

#invite .right .top {
	padding: 24px 10px 50px 10px;
}

#invite .right ul {
	margin: 0 0 0 7px;
	padding: 0;
	list-style-type: none;
}

#invite .right li {
	float: left;
	width: 239px;
	height: 110px;
	overflow: hidden;
	margin-bottom: 10px;
}

#invite .right li .left {
	float: left;
	border: 3px solid #383D3F;
	width: 80px;
	height: 80px;
	cursor: pointer;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#invite .right li .left.selected {
	border: 3px solid #983222;
}

#invite .right li .left.selected .overlay {
	width: 80px;
	height: 80px;
	background: url(../img/sprite.png) no-repeat -296px -120px;
}

#invite .right li .right {
	float: left;
	border: 3px solid #383D3F;
}

#invite .right ul p.first {
	margin-top: 0;
}


/*****FOR GREENSOCK ANIMATION*****/
.anim {
	position: absolute;	
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

.jsBG {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0;
	background: #000;
	width: 90%;
	height: 100%;

/*height: 1459px;*/

	/*max-width: 100%;
	max-height: 100%;*/
	overflow: hidden;
	z-index: 0;
}

.carsBG img, .BG img, .Mid img, .Fore img, .crWheel img, .dPlane img, .crTrainBG img, .ctTrainBG img, .atTrainBG img, .rTrainBG img, .dTrainBG img, .hkTrainBG img, .ctBoat img, .ctBoat2 img, .dCars img, .dCarBG img, .dCars2 img, .p1 img, .p2 img, .p3 img, .e1 img, .e2 img, .e3 img, .e4 img, .e5 img, .atE img, .rioE img{
  max-width: 100%;
  width:100%;
}

/* Scenes */

.carsBG{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
}

.BG{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
}

.Mid, .MidBG{
	position: absolute;
	z-index: 2;
	width: 100%;
}
.Fore, .MidFore, .MidMid{
	position: absolute;
	z-index: 3;
	width: 100%;
}
.FourFore, .MidForeRio{
	position: absolute;
	z-index: 4;
	width: 100%;
}
.FiveFore{
	position: absolute;
	z-index: 5;
	width: 100%;
}

/* People */
.p1{
	position: absolute;
	z-index: 3;
	padding-top: 53%;
	width: 100%;
}
.p2{
	position: absolute;
	z-index: 3;
	padding-top: 34.75%;
	width: 100%;
}
.p3{
	position: absolute;
	z-index: 3;
	padding-top: 50%;
	width: 100%;
}

.p4{
	position: absolute;
	z-index: 3;
	padding-top: 47%;
	width: 100%;
}
.p5{
	position: absolute;
	z-index: 3;
	padding-top: 48.75%;
	width: 100%;
}
.p6{
	position: absolute;
	z-index: 3;
	padding-top: 47%;
	width: 100%;
}
.p7, .p8, .p9{
	position: absolute;
	z-index: 3;
	padding-top: 54%;
	width: 100%;
}
.p10{
	position: absolute;
	z-index: 3;
	padding-top: 47%;
	width: 100%;
}
.p11{
	position: absolute;
	z-index: 3;
	padding-top: 48%;
	width: 100%;
}
.p12{
	position: absolute;
	z-index: 3;
	padding-top: 47%;
	width: 100%;
}
.p13, .p14, .p15{
	position: absolute;
	z-index: 4;
	padding-top: 49%;
	width: 100%;
}
.p16{
	position: absolute;
	z-index: 4;
	padding-top: 47%;
	width: 100%;
}
.p17{
	position: absolute;
	z-index: 4;
	padding-top: 45%;
	width: 100%;
}
.p18{
	position: absolute;
	z-index: 4;
	padding-top: 41%;
	width: 100%;
}

.e1, .e2, .e3, .e4, .e5{
	position: absolute;
	z-index: 3;
	width: 100%;
}
.e3{
	position: absolute;
	z-index: 2;
	width: 100%;
}

.atE{
	position: absolute;
	z-index: 2;
	padding-top: 46%;
	width: 100%;
}

.rioE{
	position: absolute;
	z-index: 2;
	padding-top: 24%;
	width: 100%;
}

/* Trains */

.crTrainFore img {
	max-width: 150%;
	position: relative;
}
.ctTrainFore img {
 	 max-width: 290%;
 	 position: relative;
}
.atTrainFore img {
 	 max-width: 340%;
 	 position: relative;
}

.hkTrainFore img {
 	 max-width: 250%;
 	 position: relative;
}
.rioTrainBG img{
	max-width: 150%;
	position: relative;
}
.rioTrainFore img {
 	 max-width: 340%;
 	 position: relative;
 	 
}
.rTrainFore img {
 	 max-width: 420%;
 	 position: relative;
}
.dTrainFore img, .ctTrainBG img{
	max-width: 120%;
	position: relative;
}
.crTrainBG img, .atTrainBG img, .rTrainBG img, .dTrainBG img, .dPlane img, .dCars img, .dCars2 img, .dCarBG img, .hkTrainBG img, .ctBoat img, .ctBoat2 img, .rCarsBG1 img, .rCarsBG2 img, .rCarsBG3 img, .e3 img, .atE img, .rioE img{
	position: relative;
}

.crTrainBG{
	position: absolute;
	z-index: 1;
	padding-left: 45%;
	padding-top: 45%;
	width: 65%;
}
.ctTrainBG{
	position: absolute;
	z-index: 1;
	padding-left: 0%;
	padding-top: 44.5%;
	width: 100%;
}
.rioTrainBG{
	position: absolute;
	z-index: 2;
	padding-left: 0%;
	padding-top: 40.5%;
	width: 150%;
}
.atTrainBG{
	position: absolute;
	z-index: 1;
	padding-left: 0%;
	padding-top: 40.1%;
	width: 100%;
}
.rTrainBG{
	position: absolute;
	z-index: 1;
	padding-left: 40%;
	padding-top: 36.3%;
	width: 60%;
	}
.dTrainBG{
	position: absolute;
	z-index: 1;
	padding-right: 60%;
	padding-top: 56%;
	width: 40%;
}
.hkTrainBG{
	position: absolute;
	z-index: 1;
	padding-left: 12%;
	padding-top: 44.5%;
	width: 100%;
}
.crTrainFore{
	position: absolute;
	z-index: 3;
	padding-left: 0%;
	padding-top: 57%;
	width: 150%;
}
.ctTrainFore{
	position: absolute;
	z-index: 2;
	padding-left: 0%;
	padding-top: 53%;
	width:290%;
	}
.atTrainFore{
	position: absolute;
	z-index: 3;
	padding-left: 0%;
	padding-top: 51%;
	width:340%;
}
.rioTrainFore{
	position: absolute;
	z-index: 4;
	padding-left: 0%;
	padding-top: 52%;
	width: 340%;
}
.hkTrainFore{
	position: absolute;
	z-index: 3;
	padding-left: 0%;
	padding-top: 52%;
	width: 250%;
}
.rTrainFore{
	position: absolute;
	z-index: 3;
	padding-left: 0%;
	padding-top: 55%;
	width: 420%;
}
.dTrainFore{
	position: absolute;
	z-index: 3;
	padding-left: 0%;
	padding-top: 45%;
	width:120%;
}

/* Elements */

.crWheel{
	position: absolute;
	z-index: 0;
	padding-left: 85%;
	padding-top: 15%;
	width:15%}

.dCars{
	position: absolute;
	z-index: 1;
	padding-left: 77%;
	padding-top: 42%;
	width: 23%;
}
.dCars2{
	position: absolute;
	z-index: 1;
	padding-left: 77%;
	padding-top: 44%;
	width: 23%;

}
.dCarBG{
	position: absolute;
	z-index: 1;
	padding-left: 80%;
	padding-top: 59%;
	width: 20%;
}
.rCarsBG1, .rCarsBG2, .rCarsBG3{
	position: absolute;
	z-index: 1;
	padding-left: 95%;
	padding-top: 51.5%;
	width: 5%;
}
 .rCarsBG1 img, .rCarsBG2 img, .rCarsBG3 img{
	 /* width: 60%; */
 }

.ctBoat{
	position: absolute;
	z-index:0;
	padding-left: 95%;
	padding-top: 11.5%;
	width:5%;
}

.ctBoat2{
	position: absolute;
	z-index:5;
	padding-left: 85%;
	padding-top: 18.5%;
	width:8%;
}

.dPlane{
	position: absolute;
	z-index: 0;
	padding-left: 94%;
	padding-top: 22%;
	width: 6%;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/*THIRD PARTY STYLES*/
/*!
Video.js Default Styles (http://videojs.com)
Version 4.1.0
*/
/*!
Video.js Default Styles (http://videojs.com)
Version 4.1.0
*/

/*
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
   that will hold the video tag or object tag for other playback methods.
   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.

   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
   Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
  font-size: 10px;
  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */ /*This works in Safari but not Firefox.*/

  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;
}

/* Playback technology elements expand to the width/height of the containing div.
    <video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
.video-js:-moz-full-screen { position: absolute; }

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
}
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  _position: absolute; /* IE6 Full-window (underscore hack) */
}
.video-js:-webkit-full-screen {
  width: 100% !important; height: 100% !important;
}

/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  left: 1em; /* Leave padding on left and right */
  right: 1em;
  font-family: Arial, sans-serif;
}
/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
.video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
.video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
.vjs-tt-cue { display: block; }

/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
  display: block !important;
  visibility: visible; /* Needed to make sure things hide in older browsers too. */
  opacity: 1;

  -webkit-transition: visibility 0.1s, opacity 0.1s;
     -moz-transition: visibility 0.1s, opacity 0.1s;
      -ms-transition: visibility 0.1s, opacity 0.1s;
       -o-transition: visibility 0.1s, opacity 0.1s;
          transition: visibility 0.1s, opacity 0.1s;
}
.vjs-fade-out {
  display: block !important;
  visibility: hidden;
  opacity: 0;

  -webkit-transition: visibility 1.5s, opacity 1.5s;
     -moz-transition: visibility 1.5s, opacity 1.5s;
      -ms-transition: visibility 1.5s, opacity 1.5s;
       -o-transition: visibility 1.5s, opacity 1.5s;
          transition: visibility 1.5s, opacity 1.5s;

  /* Wait a moment before fading out the control bar */
  -webkit-transition-delay: 2s;
     -moz-transition-delay: 2s;
      -ms-transition-delay: 2s;
       -o-transition-delay: 2s;
          transition-delay: 2s;
}
/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden { display: none; }

.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */

/* Base UI Component Classes
-------------------------------------------------------------------------------- */
@font-face{
  font-family: 'VideoJS';
  src: url('../fonts/vjs.eot');
  src: url('../fonts/vjs.eot?#iefix') format('embedded-opentype'),
  url('../fonts/vjs.woff') format('woff'),
  url('../fonts/vjs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.vjs-default-skin {
  color: #fff;
}

/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  outline: 0; /* Replace browser focus hightlight with handle highlight */
  position: relative;
  cursor: pointer;
  padding: 0;

  background: rgb(50, 50, 50); /* IE8- Fallback */
  background: rgba(100, 100, 100, 0.5);
}

.vjs-default-skin .vjs-slider:focus {
  background: rgb(70, 70, 70); /* IE8- Fallback */
  background: rgba(100, 100, 100, 0.70);

  /*-webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
     -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
          box-shadow: 0 0 2em rgba(255, 255, 255, 1);*/
}

.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.vjs-default-skin .vjs-slider-handle:before {
  /*content: "\f111";*/ /* Circle icon = f111 */
  content: "\e009"; /* Square icon */
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  /*text-shadow: 0em 0em 1em #fff;*/

  position: absolute;
  top: 0;
  left: 0;

  /* Rotate the square icon to make a diamond */
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* Control Bar
-------------------------------------------------------------------------------- */
/* The default control bar. Created by controls.js */
.vjs-default-skin .vjs-control-bar {
  display: none; /* Start hidden */
  position: absolute;
  /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  bottom: 0;
  /* 100% width of player div */
  left: 0;
  right: 0;
  /* Controls are absolutely position, so no padding necessary */
  padding: 0;
  margin: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  background-color: rgb(0, 0, 0);
  /* Slight blue so it can be seen more easily on black. */
  background-color: rgba(198, 11, 38, 0.9);
  /* Default font settings */
  font-style: normal;
  font-weight: normal;
  font-family: Arial, sans-serif;
}

/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em;
}

/* FontAwsome button icons */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  /*text-shadow: 1px 1px 1px rgba(0,0,0,0.5);*/
}

/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
  /*text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);*/
}

.vjs-default-skin .vjs-control:focus { /*  outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ }

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer;
}
.vjs-default-skin .vjs-play-control:before {
  content: "\e001"; /* Play Icon */
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002"; /* Pause Icon */
}

/* Rewind
-------------------------------------------------------------------------------- */
/*.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
*/

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}
.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006"; /* Full volume */
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003"; /* No volume */
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004"; /* Half volume */
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005"; /* Full volume */
}

.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right;
  margin-right: 2em;
}
.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0;
}

.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em;
}

.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;

  background: #68a0c1;
}
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
}

.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;

  width: 1em;
  height: 1em;
}

.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em;
}

/*.vjs-default-skin .vjs-menu-button .vjs-volume-control {
  height: 1.5em;
}*/

/* Progress
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;

  /* Shrink the bar slower than it grows. */
  -webkit-transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
     -moz-transition: top 0.4s, height 0.4s, font-size 0.4s,    -moz-transform 0.4s;
       -o-transition: top 0.4s, height 0.4s, font-size 0.4s,      -o-transform 0.4s;
          transition: top 0.4s, height 0.4s, font-size 0.4s,         transform 0.4s;

}

/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: .9em;

  /* Even though we're not changing the top/height, we need to include them in
      the transition so they're handled correctly. */
  -webkit-transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
     -moz-transition: top 0.2s, height 0.2s, font-size 0.2s,    -moz-transform 0.2s;
       -o-transition: top 0.2s, height 0.2s, font-size 0.2s,      -o-transform 0.2s;
          transition: top 0.2s, height 0.2s, font-size 0.2s,         transform 0.2s;
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  /* Placement within the progress control item */
  height: 100%;
}

/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.vjs-default-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprising works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */
 background: #68a0c1;
}
.vjs-default-skin .vjs-load-progress {
  background: rgb(100, 100, 100); /* IE8- Fallback */
  background: rgba(255, 255, 255, 0.4);
}

.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}

.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em; /* Minor adjustment */
}

/* Time Display
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
  display: none;
}
.vjs-default-skin .vjs-current-time { float: left; }
.vjs-default-skin .vjs-duration { float: left; }
/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time { display: none; float: left; }
.vjs-time-divider { float: left; line-height: 3em; display: none; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
  display: none;
}
.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000"; /* Enter full screen */
}
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b"; /* Exit full screen */
}

/* Big Play Button (at start)
---------------------------------------------------------*/



.vjs-default-skin .vjs-big-play-button {
  display: block;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width:100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;

  /* Need a slightly gray bg so it can be seen on black backgrounds */
  background-color: rgb(152, 50, 34);
  background-color: rgba(152, 50, 34, 0.2);

  border: 0.3em solid rgb(152, 50, 34);
  border-color: rgba(152, 50, 34);

  -webkit-border-radius: 70px;
     -moz-border-radius: 70px;
          border-radius: 70px;

/* -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
     -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
          box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);

  -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
     -moz-transition: border 0.4s,    -moz-box-shadow 0.4s,    -moz-transform 0.4s;
       -o-transition: border 0.4s,      -o-box-shadow 0.4s,      -o-transform 0.4s;
          transition: border 0.4s,         box-shadow 0.4s,         transform 0.4s;*/
}

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  /*border-color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 1);*/
  /* IE8 needs a non-glow hover state */
  /*background-color: rgb(80, 80, 80);
  background-color: rgba(50, 50, 50, 0.75);*/
/*
  -webkit-box-shadow: 0 0 3em #fff;
     -moz-box-shadow: 0 0 3em #fff;
          box-shadow: 0 0 3em #fff;

  -webkit-transition: border 0s, -webkit-box-shadow 0s, -webkit-transform 0s;
     -moz-transition: border 0s,    -moz-box-shadow 0s,    -moz-transform 0s;
       -o-transition: border 0s,      -o-box-shadow 0s,      -o-transform 0s;
          transition: border 0s,         box-shadow 0s,         transform 0s;*/
}

.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001"; /* Play icon */
  font-family: VideoJS;
  font-size: 3em;
  line-height: 2.86;
  /*text-shadow: 0.05em 0.05em 0.1em #000;*/
  text-align: center; /* Needed for IE8 */
  
  position: absolute;
  width: 85px;
  height: 85px;
  top:50%;
  left: 50%;
  margin-left: -42.5px;
  margin-top: -42.5px;
  
  
   -webkit-border-radius: 70px;
     -moz-border-radius: 70px;
          border-radius: 70px;
  
   background-color: rgb(152, 50, 34);
   
   
   
   
  -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
	      transition: all 0.2s ease;
  
}
.vjs-default-skin:hover .vjs-big-play-button:before{
	background-color: rgb(255, 100, 86);
	width: 96px;
	height: 96px;
	margin-left: -48px;
	margin-top: -48px;
	line-height: 3.26;
}


/* Loading Spinner
---------------------------------------------------------*/
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;

  font-size: 5em;
  line-height: 1;

  width: 1em;
  height: 1em;

  margin-left: -0.5em;
  margin-top: -0.5em;

  opacity: 0.75;

  -webkit-animation: spin 1.5s infinite linear;
     -moz-animation: spin 1.5s infinite linear;
       -o-animation: spin 1.5s infinite linear;
          animation: spin 1.5s infinite linear;
}

.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e00a"; /* Loading spinner icon */
  font-family: VideoJS;

  position: absolute;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}

/* Add a gradient to the spinner by overlaying another copy.
   Text gradient plus a text shadow doesn't work
   and `background-clip: text` only works in Webkit. */
.vjs-default-skin .vjs-loading-spinner:after {
  content: "\e00a"; /* Loading spinner icon */
  font-family: VideoJS;

  position: absolute;
  width: 1em;
  height: 1em;
  text-align: center;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer;
}

.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em; /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;

  border-left: 2em solid transparent;
  border-right: 2em solid transparent;

  border-top: 1.55em solid rgb(0, 0, 0); /* Same top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
}

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0; margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em; /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;

  left: -5em; /* Width of menu - width of button / 2 */

  background-color: rgb(0, 0, 0);
  background-color: rgba(7, 40, 50, 0.7);

  -webkit-box-shadow: -20px -20px 0px rgba(255, 255, 255, 0.5);
     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
          box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}

/*.vjs-default-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block;
}
.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  font-weight: normal;
  text-align: center;
  text-transform: lowercase;
}
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000;
}
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.75);
  color: #111;
  outline: 0;

  -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
          box-shadow: 0 0 1em rgba(255, 255, 255, 1);
}
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; }

/* There's unfortunately no CC button in FontAwesome, so we need
    to use another font. Please +1 the fontawesome request.
    https://github.com/FortAwesome/Font-Awesome/issues/968 */
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008";
}


/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
     -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
          box-shadow: 0 0 1em rgba(255, 255, 255, 1);
}














/*************ASM SELECT*******************/
.asmContainer {
	/* container that surrounds entire asmSelect widget */
}

.asmSelect {
	/* the newly created regular 'select' */
	display: inline; 
}

.asmOptionDisabled {
	/* disabled options in new select */
	color: #999; 
}

.asmHighlight {
	/* the highlight span */
	padding: 0;
	margin: 0 0 0 1em;
}

.asmList {
	/* html list that contains selected items */
	margin: 0.25em 0 1em 0; 
	position: relative;
	display: block;
	padding-left: 0; 
	list-style: none; 
}

.asmListItem {
	/* li item from the html list above */
	position: relative; 
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	background: #ddd;
	border: 1px solid #bbb; 
	width: 100%; 
	margin: 0 0 -1px 0; 
	line-height: 1em;
}

.asmListItem:hover {
	background-color: #e5e5e5;
}

.asmListItemLabel {
	/* this is a span that surrounds the text in the item, except for the remove link */
	padding: 5px; 
	display: block;
}

.asmListSortable .asmListItemLabel {
	cursor: move; 
}

.asmListItemRemove {
	/* the remove link in each list item */
	position: absolute;
	right: 0;
	top: 0;
	padding: 5px; 
}




/* Tiny Scrollbar */
#scrollbar1 {}
.scrollbarwrap .viewport { height:500px; overflow: hidden; position: relative; }
.scrollbarwrap .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
.scrollbarwrap .scrollbar{ background: #345060; position: relative; float: right; width: 10px; }
.scrollbarwrap .track { height: 100%; width:13px; position: relative; padding: 0 1px; }
/*#scrollbar1 .thumb { background: #983222; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }*/
.scrollbarwrap .thumb { background: #983222; /* height: 20px; */ width: 10px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; }
.scrollbarwrap .thumb .end { display: none; overflow: hidden; height: 5px; width: 25px; }
.scrollbarwrap .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

/*rtl language support*/
.rtl p,
.rtl h1,
.rtl h2,
.rtl h3 {
	direction: rtl;
	text-align: right;
}

.rtl #indicatortooltip p,
.rtl .closelinkedin p,
.rtl #globe h2 {
	text-align: center;
}

.rtl .casestudy .pagecontents p{
	margin-top: 20px;
}