/*  
	-------------------------------------------------------------
	Cascade Style Sheet - jQuery Timeline slider
	Description: jQuery Plugin for building web timelines
	Author: pezflash - http: //www.codecanyon.net/user/pezflash
	Version: 1.0
	-------------------------------------------------------------
*/ 


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

/* -- Global -- */
.timeline_container_container {
	position:relative;
    min-height: 100px;
}
.timeline_container_container > .shadow {
    width: 100%;
}
.timeline_container_container > .shadow > img:first-child {
    width: 100%;
    opacity: 0.5;
}
.timeline_container_container .preload{
	position:absolute;
	top:50%;
	left:50%;
}
.timeline_container_container .preloader{
	width:20px;
	height:20px;
	margin-left:-10px;
	margin-top:-10px;
	background-image:url(images/preloader.gif);
}

.timeline-preloader{
    width:30px;
    height:30px;
    background:rgba(230,230,230,0.9);
    border-radius:50px;


    position:absolute;
    top:50%;
    left:50%;

    /*z-index: 5555;*/

    margin-left: -15px;
    margin-right: -15px;

    animation: timeline-preloader-tween 1.4s infinite linear;
    -webkit-animation: timeline-preloader-tween 1.4s infinite linear;
}
.timeline-preloader:after{
    position:absolute;
    width:50px;
    height:50px;
    border-top:10px solid rgba(200,200,200,0.5);
    border-bottom:10px solid rgba(200,200,200,0.5);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-radius:50px;
    content:'';
    top:-20px;
    left:-20px;
}
@-webkit-keyframes timeline-preloader-tween {
    0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
    50% {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
    100% {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
@keyframes timeline-preloader-tween {
    0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
    50% {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
    100% {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}

.timeline .scroller-con.no-need-for-nav .marks{
    display: none;
}

.timeline_container {
	position:relative;
	background-color:#242424;
	border:4px solid #777;
	opacity: 0;
	
    transform-origin:0% 0%;
    -ms-transform-origin:0% 0%; /* IE 9 */
    -webkit-transform-origin:0% 0%; /* Safari and Chrome */
    -moz-transform-origin:0% 0%; /* Firefox */
    -o-transform-origin:0% 0%; /* Opera */	
}

.timeline {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
}
.timeline *{

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
}

.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;
	
	
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transition-property: left;
  transition-duration: 0.9s;
  transition-timing-function: ease-out;
  -moz-transition-property: left;
  -moz-transition-duration: 0.9s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: left;
  -webkit-transition-duration: 0.9s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: left;
  -o-transition-duration: 0.9s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: left;
  -ms-transition-duration: 0.9s;
  -ms-transition-timing-function: ease-out;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  /* easeOutBack */ 

}

.timeline .viewport .images img{
	float: left;
	padding: 0px;
	margin: 0px;
}
/* -- End Viewport -- */



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

.timeline .milestones .content {
	position: absolute;
	padding: 0px;
	margin: 0px;
	height:100%;
	
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transition-property: left;
  transition-duration: 0.9s;
  transition-timing-function: ease-out;
  -moz-transition-property: left;
  -moz-transition-duration: 0.9s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: left;
  -webkit-transition-duration: 0.9s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: left;
  -o-transition-duration: 0.9s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: left;
  -ms-transition-duration: 0.9s;
  -ms-transition-timing-function: ease-out;
	
	
}
.timeline .milestones .content {
	color:#fff;
}

.timeline .column_first {
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 14px 0px 0px 20px;
}

.timeline .column {
	float: left;
	padding: 0px 0px 0px 10px;
	margin: 14px 0px 0px 50px;
	height: 150px;
    width: auto;
	border-left: 1px solid #505050;
}

.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: 400px; }

.timeline .marks{
	position:absolute; bottom: 21px; z-index:3;-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width:100%;
}
.timeline .scrollbarx{
	z-index:4;
}
.timeline .scrollbarx_bg{
	z-index:2;
}

.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: #fff;
	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;	
}
	
.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: #0b0b0b;
}

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

/* -- End Milestones -- */



/* -- Scrollbar -- */
.timeline .scrollbar{
	background: transparent url(./images/scrollbar_background.png) repeat-x 0 0;
	position: absolute;
    top:100%;
}

.timeline .dragger {
	background: transparent url(./images/scrollbar_dragger.png) no-repeat 0 0;
	cursor: pointer;
	position: absolute;
}

.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 .drag_icon {
	cursor:url(./images/drag_icon.png), e-resize;
}

.timeline .audio_player {
	position: absolute;
	top: 1px;
	right: 7px;
}
/* -- End Miscellaneous -- */



.timeline.skin_white {
	background: none repeat scroll 0 0 #FFFFFF;
}

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



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

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

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



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

.timeline.skin_white .milestones .content {
	position: absolute;
	padding: 0px;
	margin: 0px;
}

.timeline.skin_white .column_first {
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 14px 0px 0px 20px;
}

.timeline.skin_white .column {
	float: left;
	padding: 0px 0px 0px 10px;
	margin: 14px 0px 0px 50px;
	height: 150px;
	border-left: 1px solid #ccc;
}

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

.timeline.skin_white span {
	display: block;
}

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

}

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

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

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

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

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

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

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

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

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

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

/* -- End Milestones -- */



/* -- Scrollbar -- */
.timeline.skin_white .scrollbar{
	background: transparent url(./images/scrollbar_background.png) repeat-x 0 0;
	position: absolute;
}

.timeline.skin_white .dragger {
	background: transparent url(./images/scrollbar_dragger.png) no-repeat 0 0;
	cursor: pointer;
	position: absolute;
}

.timeline.skin_white .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 -- */

.timeline .milestones .readmore{
	
	background:transparent url(images/read_more.png) no-repeat center center;
	width:14px;
	height:14px;
	padding:0;
	
}


.timeline.swipe-enabled .images {
  cursor: move;
  cursor: -moz-grab;
  cursor: grab;
  cursor: url(images/openhand.cur) 4 4, move; }

.timeline.swipe-enabled.closedhand .images {
  cursor: url(images/closedhand.cur) 4 4, move; }

.timeline.swipe-enabled.closedhand .images{
  transition-property: left;
  transition-duration: 0s;
  transition-timing-function: linear;
  -moz-transition-property: left;
  -moz-transition-duration: 0s;
  -moz-transition-timing-function: linear;
  -webkit-transition-property: left;
  -webkit-transition-duration: 0s;
  -webkit-transition-timing-function: linear;
  -o-transition-property: left;
  -o-transition-duration: 0s;
  -o-transition-timing-function: linear;
  -ms-transition-property: left;
  -ms-transition-duration: 0s;
  -ms-transition-timing-function: linear; }




/* -- Miscellaneous -- */
.timeline.skin_white .drag_icon {
	cursor:url(./images/drag_icon.png), e-resize;
}

.timeline.skin_white .audio_player {
	position: absolute;
	top: 1px;
	right: 7px;
}
/* -- End Miscellaneous -- */